android: what a screen reader says — names, roles, and the sheets out of the tree when they are down

Every control on the phone has a name now, in the app's own words, and the
desktop's word where it already has one; the nav is a tab set whose badge
count is part of the tab's name — "You, 3 transfers" rather than a stray 3
read out before it. The two sheets are dialogs with somewhere sensible for
the focus to land, and the half sheet's grab handle is finally a real
Close — the first dismissal a screen reader could reach, because the scrim
never was one. A sheet that is down is inert rather than sitting
off-screen in the accessibility tree with the hidden mini bar and the nav
under it, and one live region is mounted for the life of the app so that
an undo offer is actually announced; switches say on or off, chips say
pressed, and the waveform is a slider where it can seek. Nothing visible
changed. The walk counts the controls with no name, with a junk name, in a
hidden layer, or with unsaid state — all four held at zero on ten screens,
and the nameless count on a room and on both prompts besides, which is
where the six fields named here actually live.

src/mobile/HalfSheet.svelte

@@ -3,6 +3,7 @@
        and toolbar popovers. Only rows that do something are here; what a
        row cannot do yet is not a dead row, it is absent. Facts about a file
        are key/value rows, not buttons. */
+    import { tick } from "svelte";
     import Icon from "../components/Icon.svelte";
     import Cover from "./Cover.svelte";
     import Identicon from "../components/Identicon.svelte";
@@ -29,6 +30,32 @@
     let shown = $state(null);
     $effect(() => { if (nav.half) shown = nav.half; });
 
+    /* What this sheet is called, for a screen reader: whatever its own
+       first title says. Every kind writes one — a .sheet-title, or the
+       head's .t — so read it back out of the DOM rather than keeping a
+       list of twenty-seven names in step with the markup. */
+    let hsName = $state("");
+    let grabEl = $state(null);
+    $effect(() => {
+        if (!nav.half) return;
+        void shown;
+        tick().then(() => {
+            const el = document.querySelector(".halfsheet .sheet-title, .halfsheet .sheet-head .t");
+            hsName = el ? (el.textContent || "").replace(/\s+/g, " ").trim() : "Options";
+        });
+    });
+    /* the grab handle is where the focus lands — unless the sheet has a
+       field, which takes it for itself a moment later (focusLater) */
+    $effect(() => {
+        if (!nav.half) return;
+        const t = setTimeout(() => {
+            if (!grabEl || document.querySelector(".halfsheet .field")) return;
+            if (grabEl.closest(".halfsheet")?.contains(document.activeElement)) return;
+            grabEl.focus({ preventScroll: true });
+        }, 160);
+        return () => clearTimeout(t);
+    });
+
     const kind = $derived.by(() => {
         const h = shown;
         if (!h) return null;
@@ -317,15 +344,16 @@
 {/snippet}
 
 {#snippet swrow(icon, t, m, on, fn)}
-    <button class="row" onclick={fn}>
+    <button class="row" onclick={fn} role="switch" aria-checked={on}>
         <span class="lead"><Icon name={icon} size={20} /></span>
         <span class="b"><span class="t">{t}</span>{#if m}<span class="m">{m}</span>{/if}</span>
         <span class="sw" class:on><span></span></span>
     </button>
 {/snippet}
 
-<div class="halfsheet" class:up={!!nav.half}>
-    <div class="grab"></div>
+<div class="halfsheet" class:up={!!nav.half} role="dialog" aria-modal="true" aria-label={hsName || "Options"}
+    aria-hidden={nav.half ? undefined : "true"} inert={!nav.half}>
+    <button class="grab" bind:this={grabEl} onclick={closeHalf} aria-label="Close this sheet"></button>
     <div class="hs-body">
         {#if kind === "track" && trackArg}
             {@const album = trackArg.album}
@@ -504,9 +532,9 @@
             <div class="sheet-title">{a.title}</div>
             <div class="prompt">
                 {#if a.multiline}
-                    <textarea class="field area" bind:value={promptVal} placeholder={a.placeholder || ""} rows="3" use:focusLater></textarea>
+                    <textarea class="field area" bind:value={promptVal} placeholder={a.placeholder || ""} rows="3" aria-label={a.title} use:focusLater></textarea>
                 {:else}
-                    <input class="field" bind:value={promptVal} placeholder={a.placeholder || ""} autocomplete="off" spellcheck="false" inputmode={a.numeric ? "numeric" : undefined} enterkeyhint="done" onkeydown={(e) => { if (e.key === "Enter") submitPrompt(); }} use:focusLater />
+                    <input class="field" bind:value={promptVal} placeholder={a.placeholder || ""} autocomplete="off" spellcheck="false" inputmode={a.numeric ? "numeric" : undefined} aria-label={a.title} enterkeyhint="done" onkeydown={(e) => { if (e.key === "Enter") submitPrompt(); }} use:focusLater />
                 {/if}
                 <div class="prompt-acts">
                     <button class="btn btn-ghost" onclick={closeHalf}>Cancel</button>
@@ -590,12 +618,12 @@
                 {@render row("tag", "Group", m.group || "a word to sort them by", () => metaPrompt(u, "group", "Group", "Traders", m.group || ""))}
                 {@render row("file-text", "Note", m.note || "a private note, for you only", () => metaPrompt(u, "note", "Note", "What you want to remember about them", m.note || "", true))}
                 <div class="sheet-hair"></div>
-                <button class="row" onclick={() => setMeta(u, { favorite: !m.favorite })}>
+                <button class="row" onclick={() => setMeta(u, { favorite: !m.favorite })} role="switch" aria-checked={!!m.favorite}>
                     <span class="lead"><Icon name="star" size={20} /></span>
                     <span class="b"><span class="t">Favorite</span><span class="m">kept at the top of the buddy list</span></span>
                     <span class="sw" class:on={m.favorite}><span></span></span>
                 </button>
-                <button class="row" onclick={() => setMeta(u, { trusted: !m.trusted })}>
+                <button class="row" onclick={() => setMeta(u, { trusted: !m.trusted })} role="switch" aria-checked={!!m.trusted}>
                     <span class="lead"><Icon name="shield" size={20} /></span>
                     <span class="b"><span class="t">Trusted</span><span class="m">someone you take at their word</span></span>
                     <span class="sw" class:on={m.trusted}><span></span></span>
@@ -684,13 +712,13 @@
             <div class="sheet-sec">Order</div>
             <div class="chips" style="padding-bottom:12px">
                 {#each SORTS as [k, l] (k)}
-                    <button class="chip" class:on={(top().c.sort || "added") === k} class:quiet={(top().c.sort || "added") !== k} onclick={() => patch({ sort: k, tab: "albums" })}>{l}</button>
+                    <button class="chip" class:on={(top().c.sort || "added") === k} class:quiet={(top().c.sort || "added") !== k} aria-pressed={(top().c.sort || "added") === k} onclick={() => patch({ sort: k, tab: "albums" })}>{l}</button>
                 {/each}
             </div>
             <div class="sheet-sec">View</div>
             <div class="chips" style="padding-bottom:12px">
                 {#each [["grid", "Grid"], ["list", "List"]] as [k, l] (k)}
-                    <button class="chip" class:on={(top().c.view || "grid") === k} class:quiet={(top().c.view || "grid") !== k} onclick={() => patch({ view: k, tab: "albums" })}>{l}</button>
+                    <button class="chip" class:on={(top().c.view || "grid") === k} class:quiet={(top().c.view || "grid") !== k} aria-pressed={(top().c.view || "grid") === k} onclick={() => patch({ view: k, tab: "albums" })}>{l}</button>
                 {/each}
             </div>
             <div style="padding: 4px var(--pad) 16px"><button class="btn btn-fill wide" onclick={closeHalf}>Done</button></div>
@@ -755,7 +783,7 @@
             <div class="sheet-sec">Pause after</div>
             <div class="chips" style="padding-bottom:16px">
                 {#each [[0, "Off"], [15, "15 min"], [30, "30 min"], [45, "45 min"], [60, "1 hour"], [90, "1½ hours"]] as [m, l] (m)}
-                    <button class="chip" class:on={m === 0 ? !player.sleepAt : Math.abs((player.sleepAt - Date.now()) / 60000 - m) < 1} class:quiet={!(m === 0 ? !player.sleepAt : Math.abs((player.sleepAt - Date.now()) / 60000 - m) < 1)} onclick={act(() => setSleep(m))}>{l}</button>
+                    <button class="chip" class:on={m === 0 ? !player.sleepAt : Math.abs((player.sleepAt - Date.now()) / 60000 - m) < 1} class:quiet={!(m === 0 ? !player.sleepAt : Math.abs((player.sleepAt - Date.now()) / 60000 - m) < 1)} aria-pressed={m === 0 ? !player.sleepAt : Math.abs((player.sleepAt - Date.now()) / 60000 - m) < 1} onclick={act(() => setSleep(m))}>{l}</button>
                 {/each}
             </div>
             {#if player.sleepAt}<div class="sec-note" style="padding-bottom:14px">Playback pauses in {sleepLabel().replace(" left", "")}.</div>{/if}

src/mobile/Lane.svelte

@@ -87,8 +87,20 @@
     }
     function pm(e) { if (down) at(e); }
     function pu() { down = false; }
+    /* a seek from the keyboard, or from TalkBack: two per cent a press —
+       the fraction the pointer path already speaks */
+    function key(e) {
+        if (!onseek) return;
+        const step = e.key === "ArrowRight" ? 0.02 : e.key === "ArrowLeft" ? -0.02 : 0;
+        if (!step) return;
+        e.preventDefault();
+        onseek(Math.max(0, Math.min(1, played + step)));
+    }
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -- the role and the
+     tabindex arrive together: a lane that can seek is a slider, and one
+     that cannot is out of the tree entirely -->
 <span
     class="lane {cls}"
     class:pending
@@ -102,6 +114,14 @@
     onpointermove={pm}
     onpointerup={pu}
     onpointercancel={pu}
+    onkeydown={key}
+    role={onseek ? "slider" : undefined}
+    tabindex={onseek ? 0 : undefined}
+    aria-hidden={onseek ? undefined : "true"}
+    aria-label={onseek ? "Seek" : undefined}
+    aria-valuemin={onseek ? 0 : undefined}
+    aria-valuemax={onseek ? 100 : undefined}
+    aria-valuenow={onseek ? Math.round(played * 100) : undefined}
 >
     {#each Array(bars) as _, i (i)}
         <i style="--i:{i}; height:{heightOf(i)}%; --fill:{fillOf(i).toFixed(3)}; opacity:{dimOf(i) ? PENDING_ALPHA : 1}"></i>

src/mobile/Mobile.svelte

@@ -107,6 +107,30 @@
     const playing = $derived(player.status === "playing" || player.status === "buffering");
     const played = $derived(player.duration ? Math.min(1, player.position / player.duration) : 0);
 
+    /* ── what the machine says ───────────────────────────────────────── */
+    /* A tab's own name: the section, and when the dot is up, what the
+       number counts. "You, 3 transfers" — not a stray 3 read out before
+       the word it belongs to. */
+    function tabCount(id) {
+        if (id === "you") return activeTransfers().length;
+        if (id === "community") return unreadTotal();
+        return 0;
+    }
+    function tabName(id, label) {
+        const n = tabCount(id);
+        if (!n) return label;
+        return label + ", " + n + (id === "you" ? " transfer" + (n === 1 ? "" : "s") : " unread");
+    }
+
+    /* The one live region. It is mounted for the life of the app on
+       purpose: a region that appears with its words already inside it is
+       announced reliably by neither TalkBack nor VoiceOver, so an
+       announcement here is a TEXT CHANGE in a node that was always there.
+       The desktop does the same (FollowToast's always-mounted .layer,
+       PreviewOverlay's .sr-announce). Never drawn — shell.css clips it to
+       a pixel. */
+    const announce = $derived([player.error || lib.error, notice.text, notice.action?.label].filter(Boolean).join(". "));
+
     /* ── the ground: two layers, the incoming one fades up over the old ── */
     let ambA = $state(null);
     let ambB = $state(null);
@@ -272,7 +296,7 @@
     </div>
 
     {#if player.track}
-        <div class="mini" class:hidden={nav.sheet} use:drag={miniDrag} onclick={onMiniTap} oncontextmenu={(e) => { e.preventDefault(); openHalf("track", { album: player.album, track: player.track }); }} role="button" tabindex="0" onkeydown={() => {}} aria-label="Now playing">
+        <div class="mini" class:hidden={nav.sheet} use:drag={miniDrag} onclick={onMiniTap} oncontextmenu={(e) => { e.preventDefault(); openHalf("track", { album: player.album, track: player.track }); }} role="button" tabindex="0" onkeydown={() => {}} aria-hidden={nav.sheet ? "true" : undefined} aria-label={"Now playing: " + (player.track.title || "") + (player.track.artist || player.album?.artist ? " · " + (player.track.artist || player.album?.artist) : "")}>
             <span class="art" bind:this={miniArt}><Cover path={player.album?.art_path} eager size={20} /></span>
             <span class="b">
                 <span class="t">{player.track.title}</span>
@@ -293,32 +317,40 @@
         </div>
     {/if}
 
-    <nav class="nav" class:gone={nav.sheet}>
+    <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -- the
+         five destinations ARE a tab set, and the desktop's own segmented
+         control says so too; wrapping them in an inner div to keep <nav>'s
+         implicit role would change the bar's flex layout -->
+    <nav class="nav" class:gone={nav.sheet} role="tablist" aria-label="Sections" aria-hidden={nav.sheet ? "true" : undefined}>
         {#each TABS as [id, icon, label] (id)}
-            <button class:on={nav.tab === id} onclick={() => go(id)}>
+            <button class:on={nav.tab === id} onclick={() => go(id)} role="tab" aria-selected={nav.tab === id} aria-label={tabName(id, label)}>
                 <span class="pill"></span>
                 <span class="gl">
                     <Icon name={icon} size={22} />
-                    {#if id === "you" && activeTransfers().length}<span class="nb">{activeTransfers().length}</span>{/if}
-                    {#if id === "community" && unreadTotal()}<span class="nb">{unreadTotal()}</span>{/if}
+                    {#if id === "you" && activeTransfers().length}<span class="nb" aria-hidden="true">{activeTransfers().length}</span>{/if}
+                    {#if id === "community" && unreadTotal()}<span class="nb" aria-hidden="true">{unreadTotal()}</span>{/if}
                 </span>
                 <span class="lb">{label}</span>
             </button>
         {/each}
     </nav>
 
-    <div class="scrim" class:on={!!nav.half} onclick={closeHalf} role="presentation"></div>
+    <div class="scrim" class:on={!!nav.half} onclick={closeHalf} aria-hidden="true"></div>
     <HalfSheet />
     <Sheet />
     <Viewer />
     <SyncRoom />
 
+    <!-- the announcement: one node, always here, so a change of its words
+         is what gets read out. The toasts below stay where they were and
+         say nothing on their own — two announcers say everything twice -->
+    <div class="sr-live" data-live aria-live="polite" aria-atomic="true">{announce}</div>
     {#if player.error || lib.error}
-        <div class="toast" onclick={() => { player.error = ""; lib.error = ""; }} role="status">{player.error || lib.error}</div>
+        <div class="toast" onclick={() => { player.error = ""; lib.error = ""; }} role="button" tabindex="0" onkeydown={() => {}} aria-label="Dismiss this message">{player.error || lib.error}</div>
     {/if}
     {#if notice.text}
-        <div class="toast notice" role="status">
-            <span class="nt">{notice.text}</span>
+        <div class="toast notice">
+            <span class="nt" aria-hidden="true">{notice.text}</span>
             {#if notice.action}<button class="na" onclick={() => { const f = notice.action.fn; clearNote(); f?.(); }}>{notice.action.label}</button>{/if}
         </div>
     {/if}

src/mobile/Release.svelte

@@ -15,9 +15,9 @@
     }
 </script>
 
-<button class="release" class:w2 {onclick} oncontextmenu={hold} use:visible={path}>
+<button class="release" class:w2 {onclick} oncontextmenu={hold} use:visible={path} aria-label={[title, sub, badge].filter(Boolean).join(", ")}>
     <span class="cover-wrap">
-        {#if badge}<span class="ed-badge">{badge}</span>{/if}
+        {#if badge}<span class="ed-badge" aria-hidden="true">{badge}</span>{/if}
         {#if mark}<span class="mark"><Icon name={mark} size={11} strokeWidth={3} /></span>{/if}
         {#if src}<img src={src} alt="" loading="lazy" />{:else}<span class="ph"><Icon name={icon} size={26} /></span>{/if}
     </span>

src/mobile/Sheet.svelte

@@ -64,6 +64,20 @@
         }
     });
 
+    /* Somewhere sensible to land when the sheet opens: its own Close. The
+       gate is nav.sheet and not "shown" — "shown" is false for a frame at
+       the start of a morph arrival and the dialog has to be live by then —
+       and preventScroll because that arrival is measuring rects in the
+       same frames. */
+    $effect(() => {
+        if (!nav.sheet) return;
+        const t = setTimeout(() => {
+            const el = document.querySelector(".sheet.up .np-head .iconbtn");
+            if (el && !el.closest(".sheet")?.contains(document.activeElement)) el.focus({ preventScroll: true });
+        }, 160);
+        return () => clearTimeout(t);
+    });
+
     function flip(a) {
         const to = frameEl;
         const css = getComputedStyle(document.documentElement);
@@ -134,7 +148,9 @@
     function lineSeek(l) { seekSecs(Math.max(0, (l.time_ms + lyr.offset) / 1000)); }
 </script>
 
-<div class="sheet" class:up={shown} class:morphing use:drag={sheetDrag}>
+<div class="sheet" class:up={shown} class:morphing use:drag={sheetDrag}
+    role="dialog" aria-modal="true" aria-label={"Now playing" + (player.track ? ": " + player.track.title : "")}
+    aria-hidden={nav.sheet ? undefined : "true"} inert={!nav.sheet}>
     {#if player.album}
         <div class="sheet-bg" aria-hidden="true">
             <div class="amb on" style:background-image={cover ? `url("${cover}")` : null}></div>
@@ -151,7 +167,8 @@
                 <button class="iconbtn" onclick={more} aria-label="More"><Icon name="more" size={22} /></button>
             </div>
 
-            <div class="np-art" class:small onclick={() => openViewer(player.album?.art_path)} role="presentation">
+            <div class="np-art" class:small onclick={() => openViewer(player.album?.art_path)}
+                role="button" tabindex="0" onkeydown={() => {}} aria-label={"View album artwork" + (player.album?.title ? " — " + player.album.title : "")}>
                 <div class="np-frame" bind:this={frameEl}><Cover path={player.album.art_path} eager size={64} /></div>
             </div>
 
@@ -247,9 +264,9 @@
             </div>
 
             <div class="np-foot">
-                <div class="np-faces">
+                <div class="np-faces" role="tablist" aria-label="Player faces">
                     {#each [["art", "disc", "Art"], ["lyrics", "lyrics", "Lyrics"], ["queue", "playlist", "Queue"]] as [f, ic, lb] (f)}
-                        <button class="fbtn" class:on={face === f} onclick={() => (nav.face = f)}><Icon name={ic} size={17} /><span>{lb}</span></button>
+                        <button class="fbtn" class:on={face === f} onclick={() => (nav.face = f)} role="tab" aria-selected={face === f}><Icon name={ic} size={17} /><span>{lb}</span></button>
                     {/each}
                 </div>
             </div>

src/mobile/SyncRoom.svelte

@@ -69,7 +69,7 @@
 </script>
 
 {#if nav.timing}
-    <div class="syncroom">
+    <div class="syncroom" role="dialog" aria-modal="true" aria-label="Tap in time">
         <div class="sy-head">
             <button class="iconbtn sy-close" onclick={close} aria-label={confirmDiscard ? "Discard the timing" : "Close"}>
                 {#if confirmDiscard}<span class="sy-discard">Discard?</span>{:else}<Icon name="x" size={22} />{/if}

src/mobile/Viewer.svelte

@@ -70,7 +70,8 @@
 </script>
 
 {#if nav.viewer}
-    <div class="viewer" onclick={tap} onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up} role="presentation">
+    <div class="viewer" onclick={tap} onpointerdown={down} onpointermove={move} onpointerup={up} onpointercancel={up}
+        role="button" tabindex="0" onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") closeViewer(); }} aria-label="Close artwork viewer">
         {#if src}<img src={src} alt="" draggable="false" style:transform={scale === 1 ? "" : `translate(${tx}px, ${ty}px) scale(${scale})`} />{/if}
     </div>
 {/if}

src/mobile/screens/Album.svelte

@@ -40,7 +40,7 @@
 
 {#if album}
     <div class="rec-head">
-        <div class="rec-cover" onclick={() => openViewer(album.art_path)} role="presentation"><Cover path={album.art_path} eager size={48} /></div>
+        <div class="rec-cover" onclick={() => openViewer(album.art_path)} role="button" tabindex="0" onkeydown={() => {}} aria-label={"View album artwork — " + album.title}><Cover path={album.art_path} eager size={48} /></div>
         <div class="rec-meta">
             <div class="rec-title">{album.title}</div>
             <button class="rec-artist" onclick={() => push("artist", { name: album.artist }, screenEl)}>{album.artist}</button>
@@ -64,14 +64,14 @@
         {#if discs.length > 1}<div class="disc-head">Disc {d}</div>{/if}
         <div class="tracks">
             {#each list as t, i (t.id)}
-                <button class="trk" class:playing={isPlaying(t)} onclick={() => playAt(t)} oncontextmenu={(e) => { e.preventDefault(); openHalf("track", { album, track: t }); }}>
+                <button class="trk" class:playing={isPlaying(t)} onclick={() => playAt(t)} oncontextmenu={(e) => { e.preventDefault(); openHalf("track", { album, track: t }); }} aria-label={(t.track_no ?? i + 1) + ". " + t.title + (various && t.artist ? " · " + t.artist : "")}>
                     <span class="n">{t.track_no ?? i + 1}</span>
                     <span class="b">
                         <span class="t">{t.title}</span>
                         {#if various && t.artist}<span class="m">{t.artist}</span>{/if}
                     </span>
                     <span class="d">{mmss(t.duration_secs)}</span>
-                    <span class="r" role="button" tabindex="0" aria-label="More" onkeydown={() => {}}
+                    <span class="r" role="button" tabindex="0" aria-label={"More for " + t.title} onkeydown={() => {}}
                         onclick={(e) => { e.stopPropagation(); openHalf("track", { album, track: t }); }}>
                         <Icon name="more" size={17} />
                     </span>

src/mobile/screens/Artist.svelte

@@ -276,9 +276,9 @@
 {#if tabs.length}
     <div class="sec"><h2>Discography <em>· {releasedCount} on the catalog</em></h2></div>
     {#if tabs.length > 1}
-        <div class="segtabs disco-tabs">
+        <div class="segtabs disco-tabs" role="tablist" aria-label="Discography">
             {#each tabs as t (t.key)}
-                <button class:on={tab === t.key} onclick={() => (tab = t.key)}>{t.label}<span class="count">{t.items.length}</span></button>
+                <button class:on={tab === t.key} onclick={() => (tab = t.key)} role="tab" aria-selected={tab === t.key} aria-label={t.label + ", " + t.items.length}>{t.label}<span class="count" aria-hidden="true">{t.items.length}</span></button>
             {/each}
         </div>
     {/if}
@@ -343,7 +343,7 @@
             </div>
         {/if}
         {#if extras.bio}
-            <p class="bio" class:open={bioOpen} onclick={() => (bioOpen = !bioOpen)} role="button" tabindex="0" onkeydown={() => {}}>{extras.bio}</p>
+            <p class="bio" class:open={bioOpen} onclick={() => (bioOpen = !bioOpen)} role="button" tabindex="0" aria-expanded={bioOpen} onkeydown={() => {}}>{extras.bio}</p>
         {/if}
         {#if extras.profile?.tags?.length}
             <div class="tags">{#each extras.profile.tags.slice(0, 6) as t (t)}<span class="chip quiet">{t}</span>{/each}</div>

src/mobile/screens/CatalogAlbum.svelte

@@ -206,7 +206,7 @@
     <div class="about">
         {#if desc.lede}<p class="lede">{desc.lede}</p>{/if}
         {#if desc.rest}
-            <p class="bio" class:open={descOpen} onclick={() => (descOpen = !descOpen)} role="button" tabindex="0" onkeydown={() => {}}>{desc.rest}</p>
+            <p class="bio" class:open={descOpen} onclick={() => (descOpen = !descOpen)} role="button" tabindex="0" aria-expanded={descOpen} onkeydown={() => {}}>{desc.rest}</p>
         {/if}
     </div>
 {/if}

src/mobile/screens/Community.svelte

@@ -107,9 +107,9 @@
     <div class="signin">
         <div class="signin-t">Sign in to Soulseek</div>
         <div class="signin-m">The network's rooms, its people and, next, its music. Your account is kept on this phone only.</div>
-        <input class="field" bind:value={user} placeholder="Username" autocomplete="username" autocapitalize="off" spellcheck="false" enterkeyhint="next" />
+        <input class="field" bind:value={user} placeholder="Username" aria-label="Soulseek username" autocomplete="username" autocapitalize="off" spellcheck="false" enterkeyhint="next" />
         <div class="field-row">
-            <input class="field" type={showPass ? "text" : "password"} bind:value={pass} placeholder="Password" autocomplete="current-password" enterkeyhint="go" onkeydown={(e) => { if (e.key === "Enter") signIn(); }} />
+            <input class="field" type={showPass ? "text" : "password"} bind:value={pass} placeholder="Password" aria-label="Soulseek password" autocomplete="current-password" enterkeyhint="go" onkeydown={(e) => { if (e.key === "Enter") signIn(); }} />
             <button class="iconbtn sm muted" onclick={() => (showPass = !showPass)} aria-label="Show password"><Icon name="eye" size={18} /></button>
         </div>
         {#if slsk.loginError}<div class="signin-err">{slsk.loginError}</div>{/if}
@@ -126,10 +126,10 @@
         They live on the private layer; the network side is here first.
     </div>
 {:else}
-    <div class="segtabs" style="padding-top:12px">
+    <div class="segtabs" style="padding-top:12px" role="tablist" aria-label="Community sections">
         {#each [["rooms", "Rooms"], ["chat", "Chat"], ["buddies", "Buddies"], ["taste", "Taste"]] as [k, l] (k)}
-            <button class:on={tab === k} onclick={() => patch({ tab: k })}>
-                {l}{#if k === "chat" && unreadTotal()} <span class="count">{unreadTotal()}</span>{/if}
+            <button class:on={tab === k} onclick={() => patch({ tab: k })} role="tab" aria-selected={tab === k} aria-label={l + (k === "chat" && unreadTotal() ? ", " + unreadTotal() + " unread" : "")}>
+                {l}{#if k === "chat" && unreadTotal()} <span class="count" aria-hidden="true">{unreadTotal()}</span>{/if}
             </button>
         {/each}
     </div>

src/mobile/screens/Import.svelte

@@ -96,7 +96,7 @@
             <span class="r"><Icon name="chevron-right" size={17} /></span>
         </button>
         {#if w.unresolved_count > 0}
-            <button class="row" onclick={() => (importer.includeUnresolved = !importer.includeUnresolved)}>
+            <button class="row" onclick={() => (importer.includeUnresolved = !importer.includeUnresolved)} role="switch" aria-checked={!!importer.includeUnresolved}>
                 <span class="lead"><Icon name="alert" size={20} /></span>
                 <span class="b"><span class="t">Keep unresolved entries</span><span class="m">as placeholders, to repair on the desktop</span></span>
                 <span class="sw" class:on={importer.includeUnresolved}><span></span></span>

src/mobile/screens/Library.svelte

@@ -102,16 +102,16 @@
     </div>
 </div>
 
-<div class="segtabs">
+<div class="segtabs" role="tablist" aria-label="Library sections">
     {#each TABS as [k, l] (k)}
-        <button class:on={tab === k} onclick={() => patch({ tab: k })}>{l}</button>
+        <button class:on={tab === k} onclick={() => patch({ tab: k })} role="tab" aria-selected={tab === k}>{l}</button>
     {/each}
 </div>
 
 {#if tab === "albums"}
     <div class="chips" style="padding-bottom:12px">
         {#each SORTS as [k, l] (k)}
-            <button class="chip" class:on={sort === k} class:quiet={sort !== k} onclick={() => patch({ sort: k })}>{l}</button>
+            <button class="chip" class:on={sort === k} class:quiet={sort !== k} aria-pressed={sort === k} onclick={() => patch({ sort: k })}>{l}</button>
         {/each}
     </div>
     <div class="countline">
@@ -170,7 +170,7 @@
                 <span class="r"><Icon name="chevron-right" size={17} /></span>
             </button>
             {#if count !== 0}
-                <button class="gapline" onclick={() => toggleGaps(ar.name)}>
+                <button class="gapline" onclick={() => toggleGaps(ar.name)} aria-expanded={!!gapOpen[key]}>
                     {#if gapLoading[key]}Checking the catalogue…{:else if count != null}<b>{count}</b> more released{:else}See what's missing{/if}
                     <span class="cta">{gapOpen[key] ? "hide" : "show"}<Icon name={gapOpen[key] ? "chevron-down" : "chevron-right"} size={12} /></span>
                 </button>

src/mobile/screens/Playlist.svelte

@@ -125,7 +125,7 @@
                         {#if item.artist || item.album}<span class="m">{item.artist}{item.artist && item.album ? " — " : ""}{item.album ?? ""}</span>{/if}
                     </span>
                     <span class="d">{item.duration_secs != null ? mmss(item.duration_secs) : "–:––"}</span>
-                    <span class="r" role="button" tabindex="0" aria-label="More" onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); sheet(item); }}><Icon name="more" size={17} /></span>
+                    <span class="r" role="button" tabindex="0" aria-label={"More for " + item.title} onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); sheet(item); }}><Icon name="more" size={17} /></span>
                 </button>
             {/each}
         </div>

src/mobile/screens/Room.svelte

@@ -44,7 +44,7 @@
 {#if room}
     <div class="room-head">
         <span class="b"><span class="t-sub">{room.users.length} here now</span></span>
-        <button class="btn btn-ghost" style="height:32px;padding:0 12px" onclick={() => openHalf("roomusers", { name })}>{room.users.length} <Icon name="users" size={14} /></button>
+        <button class="btn btn-ghost" style="height:32px;padding:0 12px" onclick={() => openHalf("roomusers", { name })} aria-label={room.users.length + " people in this room"}>{room.users.length} <Icon name="users" size={14} /></button>
     </div>
     <div class="chat">
         {#if !lines.length}
@@ -60,7 +60,7 @@
         {/each}
     </div>
     <div class="composer">
-        <input class="field" bind:this={inputEl} bind:value={text} placeholder="Message #{name}…" autocomplete="off" enterkeyhint="send" onkeydown={(e) => { if (e.key === "Enter") { e.preventDefault(); send(); } }} />
+        <input class="field" bind:this={inputEl} bind:value={text} placeholder="Message #{name}…" aria-label={"Message #" + name} autocomplete="off" enterkeyhint="send" onkeydown={(e) => { if (e.key === "Enter") { e.preventDefault(); send(); } }} />
         <button class="disc sm" onclick={send} aria-label="Send" disabled={!text.trim()}><Icon name="send" size={16} /></button>
     </div>
 {:else}

src/mobile/screens/Search.svelte

@@ -414,7 +414,7 @@
                 <span class="n"><Icon name="play" size={12} /></span>
                 <span class="b"><span class="t">{row.title}</span><span class="m">{row.artist} · {row.album}</span></span>
                 <span class="d">{mmss(row.duration_secs)}</span>
-                <span class="r" role="button" tabindex="0" aria-label="More" onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); moreHit(row); }}><Icon name="more" size={17} /></span>
+                <span class="r" role="button" tabindex="0" aria-label={"More for " + row.title} onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); moreHit(row); }}><Icon name="more" size={17} /></span>
             </button>
         {/each}
     {/if}
@@ -432,9 +432,9 @@
             {#if net.error}<div class="sec-note">{net.error}</div>{/if}
             {#if net.groups.length}
                 <div class="chips netfilters" style="padding-bottom: 10px">
-                    <button class="chip" class:on={netFree} class:quiet={!netFree} onclick={() => (netFree = !netFree)}>Free slot</button>
+                    <button class="chip" class:on={netFree} class:quiet={!netFree} aria-pressed={netFree} onclick={() => (netFree = !netFree)}>Free slot</button>
                     {#each [["any", "Any format"], ["flac", "FLAC"], ["mp3320", "MP3 320+"]] as [v, l] (v)}
-                        <button class="chip" class:on={netFmt === v} class:quiet={netFmt !== v} onclick={() => (netFmt = v)}>{l}</button>
+                        <button class="chip" class:on={netFmt === v} class:quiet={netFmt !== v} aria-pressed={netFmt === v} onclick={() => (netFmt = v)}>{l}</button>
                     {/each}
                 </div>
                 {#if shownGroups.length !== net.groups.length}<div class="sec-note">{shownGroups.length} of {net.groups.length} folders</div>{/if}

src/mobile/screens/Thread.svelte

@@ -51,7 +51,7 @@
     {/each}
 </div>
 <div class="composer">
-    <input class="field" bind:this={inputEl} bind:value={text} placeholder="Message {display(username)}…" autocomplete="off" enterkeyhint="send" onkeydown={(e) => { if (e.key === "Enter") { e.preventDefault(); send(); } }} />
+    <input class="field" bind:this={inputEl} bind:value={text} placeholder="Message {display(username)}…" aria-label={"Message " + display(username)} autocomplete="off" enterkeyhint="send" onkeydown={(e) => { if (e.key === "Enter") { e.preventDefault(); send(); } }} />
     <button class="disc sm" onclick={send} aria-label="Send" disabled={!text.trim()}><Icon name="send" size={16} /></button>
 </div>
 

src/mobile/screens/Tracks.svelte

@@ -61,7 +61,7 @@
         <span class="n">{i + 1}</span>
         <span class="b"><span class="t">{r.title}</span><span class="m">{r.artist} · {r.album}</span></span>
         <span class="d">{mmss(r.duration_secs)}</span>
-        <span class="r" role="button" tabindex="0" aria-label="More" onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); more(r); }}><Icon name="more" size={17} /></span>
+        <span class="r" role="button" tabindex="0" aria-label={"More for " + r.title} onkeydown={() => {}} onclick={(e) => { e.stopPropagation(); more(r); }}><Icon name="more" size={17} /></span>
     </button>
 {/each}
 {#if index && !list.length}

src/mobile/screens/You.svelte

@@ -178,7 +178,7 @@
 <div class="sheet-sec" style="padding-top: 4px">Appearance</div>
 <div class="group">
     {#each ROWS as [k, icon, t, m] (k)}
-        <button class="row" onclick={() => setSetting(k, !settings[k])}>
+        <button class="row" onclick={() => setSetting(k, !settings[k])} role="switch" aria-checked={!!settings[k]}>
             <span class="lead"><Icon name={icon} size={20} /></span>
             <span class="b"><span class="t">{t}</span><span class="m">{m}</span></span>
             <span class="sw" class:on={settings[k]}><span></span></span>
@@ -188,7 +188,7 @@
 
 <div class="sheet-sec">Playback</div>
 <div class="group">
-    <button class="row" onclick={toggleNormalization}>
+    <button class="row" onclick={toggleNormalization} role="switch" aria-checked={normalization}>
         <span class="lead"><Icon name="volume" size={20} /></span>
         <span class="b"><span class="t">Volume normalization</span><span class="m">every track at about the same loudness (−14 LUFS); a track is measured on its first play and matched from then on</span></span>
         <span class="sw" class:on={normalization}><span></span></span>
@@ -232,13 +232,13 @@
     <div class="pref">
         <div class="pref-l"><span class="t">Keep streamed tracks</span><span class="m">how long the cache holds a track after its last play</span></div>
         <div class="chips">
-            {#each RETENTION as [v, l] (v)}<button class="chip" class:on={retention === v} class:quiet={retention !== v} onclick={() => setRetention(v)}>{l}</button>{/each}
+            {#each RETENTION as [v, l] (v)}<button class="chip" class:on={retention === v} class:quiet={retention !== v} aria-pressed={retention === v} onclick={() => setRetention(v)}>{l}</button>{/each}
         </div>
     </div>
     <div class="pref">
         <div class="pref-l"><span class="t">Cache size limit</span><span class="m">the oldest streamed tracks go first past this size</span></div>
         <div class="chips">
-            {#each CACHE as [v, l] (v)}<button class="chip" class:on={cacheMax === v} class:quiet={cacheMax !== v} onclick={() => setCacheMax(v)}>{l}</button>{/each}
+            {#each CACHE as [v, l] (v)}<button class="chip" class:on={cacheMax === v} class:quiet={cacheMax !== v} aria-pressed={cacheMax === v} onclick={() => setCacheMax(v)}>{l}</button>{/each}
         </div>
     </div>
 </div>
@@ -251,19 +251,19 @@
         <div class="pref">
             <div class="pref-l"><span class="t">Maximum</span><span class="m">lossy only avoids huge lossless transfers</span></div>
             <div class="chips">
-                {#each MAX_Q as [v, l] (v)}<button class="chip" class:on={prefsOf(key).max === v} class:quiet={prefsOf(key).max !== v} onclick={() => setPref(key, "max", v)}>{l}</button>{/each}
+                {#each MAX_Q as [v, l] (v)}<button class="chip" class:on={prefsOf(key).max === v} class:quiet={prefsOf(key).max !== v} aria-pressed={prefsOf(key).max === v} onclick={() => setPref(key, "max", v)}>{l}</button>{/each}
             </div>
         </div>
         <div class="pref">
             <div class="pref-l"><span class="t">Minimum</span><span class="m">files below the floor are skipped; a lossy file must report its bitrate</span></div>
             <div class="chips">
-                {#each MIN_Q as [v, l] (v)}<button class="chip" class:on={prefsOf(key).min === v} class:quiet={prefsOf(key).min !== v} onclick={() => setPref(key, "min", v)}>{l}</button>{/each}
+                {#each MIN_Q as [v, l] (v)}<button class="chip" class:on={prefsOf(key).min === v} class:quiet={prefsOf(key).min !== v} aria-pressed={prefsOf(key).min === v} onclick={() => setPref(key, "min", v)}>{l}</button>{/each}
             </div>
         </div>
         <div class="pref">
             <div class="pref-l"><span class="t">Priority</span><span class="m">among the files inside that window</span></div>
             <div class="chips">
-                {#each PRI as [v, l] (v)}<button class="chip" class:on={prefsOf(key).priority === v} class:quiet={prefsOf(key).priority !== v} onclick={() => setPref(key, "priority", v)}>{l}</button>{/each}
+                {#each PRI as [v, l] (v)}<button class="chip" class:on={prefsOf(key).priority === v} class:quiet={prefsOf(key).priority !== v} aria-pressed={prefsOf(key).priority === v} onclick={() => setPref(key, "priority", v)}>{l}</button>{/each}
             </div>
         </div>
     </div>
@@ -271,7 +271,7 @@
 
 <div class="sheet-sec">Downloads</div>
 <div class="group">
-    <button class="row" onclick={() => setSetting("wifiOnly", !settings.wifiOnly)}>
+    <button class="row" onclick={() => setSetting("wifiOnly", !settings.wifiOnly)} role="switch" aria-checked={!!settings.wifiOnly}>
         <span class="lead"><Icon name="globe" size={20} /></span>
         <span class="b"><span class="t">Downloads on Wi-Fi only</span><span class="m">on mobile data, Save waits; streaming is never held back</span></span>
         <span class="sw" class:on={settings.wifiOnly}><span></span></span>
@@ -314,7 +314,7 @@
 
 <div class="sheet-sec">Lyrics</div>
 <div class="group">
-    <button class="row" onclick={() => setFlag("wordTiming", !cfg?.word_timing)}>
+    <button class="row" onclick={() => setFlag("wordTiming", !cfg?.word_timing)} role="switch" aria-checked={!!cfg?.word_timing}>
         <span class="lead"><Icon name="lyrics" size={20} /></span>
         <span class="b"><span class="t">Word-by-word fill</span><span class="m">each word fills as it is sung; off keeps the line-by-line sync everywhere</span></span>
         <span class="sw" class:on={!!cfg?.word_timing}><span></span></span>
@@ -326,16 +326,16 @@
     <div class="pref">
         <div class="pref-l"><span class="t">Art inside downloaded files</span><span class="m">the canonical cover, or whatever the uploader embedded</span></div>
         <div class="chips">
-            {#each ART_MODE as [v, l] (v)}<button class="chip" class:on={artMode === v} class:quiet={artMode !== v} onclick={() => setFlag("replaceEmbeddedArt", v === "replace")}>{l}</button>{/each}
+            {#each ART_MODE as [v, l] (v)}<button class="chip" class:on={artMode === v} class:quiet={artMode !== v} aria-pressed={artMode === v} onclick={() => setFlag("replaceEmbeddedArt", v === "replace")}>{l}</button>{/each}
         </div>
     </div>
     <div class="pref">
         <div class="pref-l"><span class="t">Embedded cover size</span><span class="m">the longest edge of the copy written into each file; the original is kept in the folder</span></div>
         <div class="chips">
-            {#each ART_EDGE as [v, l] (v)}<button class="chip" class:on={artEdge === v} class:quiet={artEdge !== v} onclick={() => setNumber("embedArtMaxEdge", Number(v))}>{l}</button>{/each}
+            {#each ART_EDGE as [v, l] (v)}<button class="chip" class:on={artEdge === v} class:quiet={artEdge !== v} aria-pressed={artEdge === v} onclick={() => setNumber("embedArtMaxEdge", Number(v))}>{l}</button>{/each}
         </div>
     </div>
-    <button class="row" onclick={() => setFlag("writeFolderCover", !(cfg?.write_folder_cover ?? true))}>
+    <button class="row" onclick={() => setFlag("writeFolderCover", !(cfg?.write_folder_cover ?? true))} role="switch" aria-checked={!!(cfg?.write_folder_cover ?? true)}>
         <span class="lead"><Icon name="image" size={20} /></span>
         <span class="b"><span class="t">Album folder cover</span><span class="m">cover.jpg and folder.jpg beside the files, so other players show the same art</span></span>
         <span class="sw" class:on={cfg?.write_folder_cover ?? true}><span></span></span>

src/mobile/shell.css

@@ -1507,3 +1507,9 @@ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="
     /* 76% of 411 is 312; a half sheet may take all but a strip */
     .halfsheet { max-height: calc(100% - 36px); }
 }
+
+/* The one live region: never drawn, never laid out, always there — so an
+   announcement is a change of text inside it rather than a node arriving
+   with its words already in it (PreviewOverlay.svelte's .sr-announce, at
+   phone scale) */
+.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }