From 92eed1ec9bc9339579769b55f1e1d5e808fd6bd7 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 19:13:11 +0200
Subject: [PATCH 1/3] fix(a11y): accessible names for switches, swatches,
 selects and inputs

Lighthouse a11y across the authenticated module pages flagged: the clickable
Siftlode logo had aria-label='Feed' (accessible name didn't include its visible
text); the shared Switch, theme swatches, sort selects and several number/range
inputs had no accessible name/label. Give Switch role='switch'+aria-checked and
an optional label (passed at every call site), aria-label the swatches, selects
(feed/playlists sort) and the settings/config/scheduler inputs, and drop the
mismatched logo aria-label so its visible text is the name. All 11 module pages
now score 100 accessibility (settings 86->100, playlists 89->100, others 92-95->100).
---
 frontend/src/components/ConfigPanel.tsx   |  7 +++++-
 frontend/src/components/Feed.tsx          |  1 +
 frontend/src/components/NavSidebar.tsx    |  1 -
 frontend/src/components/Playlists.tsx     |  2 ++
 frontend/src/components/Scheduler.tsx     |  1 +
 frontend/src/components/SettingsPanel.tsx | 27 ++++++++++++++++++-----
 frontend/src/components/Sidebar.tsx       |  2 +-
 frontend/src/components/ui/form.tsx       |  8 ++++++-
 8 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index fad57be..fb110c7 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -224,7 +224,11 @@ function Field({
 
       <div className="flex flex-col items-end gap-1.5 shrink-0">
         {isBool ? (
-          <Switch checked={value === "true"} onChange={(v) => onChange(v ? "true" : "false")} />
+          <Switch
+            label={t(`config.fields.${item.key}.label`, item.key)}
+            checked={value === "true"}
+            onChange={(v) => onChange(v ? "true" : "false")}
+          />
         ) : (
           <input
             type={item.secret ? "password" : isNum ? "number" : "text"}
@@ -234,6 +238,7 @@ function Field({
             min={isNum && item.min != null ? item.min : undefined}
             max={isNum && item.max != null ? item.max : undefined}
             placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
+            aria-label={t(`config.fields.${item.key}.label`, item.key)}
             className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-none focus:border-accent disabled:opacity-50"
           />
         )}
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 3288e26..d3ade19 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -579,6 +579,7 @@ export default function Feed({
               seed: key === "shuffle" ? rollSeed() : undefined,
             });
           }}
+          aria-label={t("feed.sortLabel")}
           className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
         >
           {/* Relevance only ranks meaningfully when there's a search term — offer it then. */}
diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/components/NavSidebar.tsx
index 965d6be..345ef3e 100644
--- a/frontend/src/components/NavSidebar.tsx
+++ b/frontend/src/components/NavSidebar.tsx
@@ -258,7 +258,6 @@ export default function NavSidebar({
             onClick={() => setPage("feed")}
             className="text-lg font-bold tracking-tight select-none cursor-pointer rounded-md -mx-1 px-1 hover:bg-card hover:opacity-90 transition"
             title={t("header.feed")}
-            aria-label={t("header.feed")}
           >
             Sift<span className="text-accent">lode</span>
           </button>
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index 5229a8d..b866541 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -140,6 +140,7 @@ function Row({
       <span className="text-xs text-muted w-4 text-center tabular-nums">{index + 1}</span>
       <button
         onClick={onPlay}
+        aria-label={`${t("card.play")} — ${video.title}`}
         className="relative w-[62px] h-[35px] rounded overflow-hidden bg-surface shrink-0 group"
       >
         {video.thumbnail_url && (
@@ -540,6 +541,7 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
               onChange={(e) =>
                 setPlSort({ ...plSort, key: e.target.value as PlSort["key"] })
               }
+              aria-label={t("playlists.sortLabel")}
               className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-[11px] outline-none focus:border-accent"
             >
               <option value="custom">{t("playlists.railSortCustom")}</option>
diff --git a/frontend/src/components/Scheduler.tsx b/frontend/src/components/Scheduler.tsx
index 92aadf6..f57eddf 100644
--- a/frontend/src/components/Scheduler.tsx
+++ b/frontend/src/components/Scheduler.tsx
@@ -259,6 +259,7 @@ function MaintenanceSettings({
           value={val}
           onChange={(e) => setVal(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && save()}
+          aria-label={t("scheduler.maintenance.batchLabel")}
           className="w-28 bg-card border border-border rounded px-2 py-1 text-sm tabular-nums outline-none focus:border-accent"
         />
         <button
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 6fc6582..da85714 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -138,6 +138,8 @@ function Appearance({ prefs }: { prefs: PrefsController }) {
             <Tooltip key={s.id} hint={s.name}>
               <button
                 onClick={() => setTheme({ ...theme, scheme: s.id as Scheme })}
+                aria-label={s.name}
+                aria-pressed={theme.scheme === s.id}
                 className={`h-9 w-full rounded-lg border-2 transition ${
                   theme.scheme === s.id ? "border-fg" : "border-transparent"
                 }`}
@@ -151,24 +153,29 @@ function Appearance({ prefs }: { prefs: PrefsController }) {
       <Section title={t("settings.appearance.display")}>
         <SettingRow label={t("settings.appearance.darkMode")}>
           <Switch
+            label={t("settings.appearance.darkMode")}
             checked={theme.mode === "dark"}
             onChange={(v) => setTheme({ ...theme, mode: v ? "dark" : "light" })}
           />
         </SettingRow>
         <SettingRow label={t("settings.appearance.listView")} hint={t("settings.appearance.listViewHint")}>
-          <Switch checked={view === "list"} onChange={(v) => setView(v ? "list" : "grid")} />
+          <Switch
+            label={t("settings.appearance.listView")}
+            checked={view === "list"}
+            onChange={(v) => setView(v ? "list" : "grid")}
+          />
         </SettingRow>
         <SettingRow
           label={t("settings.appearance.performanceMode")}
           hint={t("settings.appearance.performanceModeHint")}
         >
-          <Switch checked={perf} onChange={setPerf} />
+          <Switch label={t("settings.appearance.performanceMode")} checked={perf} onChange={setPerf} />
         </SettingRow>
         <SettingRow
           label={t("settings.appearance.showHints")}
           hint={t("settings.appearance.showHintsHint")}
         >
-          <Switch checked={hints} onChange={setHints} />
+          <Switch label={t("settings.appearance.showHints")} checked={hints} onChange={setHints} />
         </SettingRow>
       </Section>
 
@@ -180,6 +187,7 @@ function Appearance({ prefs }: { prefs: PrefsController }) {
           step={0.02}
           value={theme.fontScale}
           onChange={(e) => setTheme({ ...theme, fontScale: Number(e.target.value) })}
+          aria-label={t("settings.appearance.textSize")}
           className="w-full accent-accent"
         />
         <div className="text-right text-xs text-muted">{Math.round(theme.fontScale * 100)}%</div>
@@ -202,13 +210,21 @@ function Notifications({ prefs }: { prefs: PrefsController }) {
         label={t("settings.notifications.sound")}
         hint={t("settings.notifications.soundHint")}
       >
-        <Switch checked={cfg.sound} onChange={(v) => update({ sound: v })} />
+        <Switch
+          label={t("settings.notifications.sound")}
+          checked={cfg.sound}
+          onChange={(v) => update({ sound: v })}
+        />
       </SettingRow>
       <SettingRow
         label={t("settings.notifications.autoDismiss")}
         hint={t("settings.notifications.autoDismissHint")}
       >
-        <Switch checked={autoOn} onChange={(v) => update({ durationMs: v ? 6000 : 0 })} />
+        <Switch
+          label={t("settings.notifications.autoDismiss")}
+          checked={autoOn}
+          onChange={(v) => update({ durationMs: v ? 6000 : 0 })}
+        />
       </SettingRow>
       {autoOn && (
         <div className="py-1.5 text-sm">
@@ -223,6 +239,7 @@ function Notifications({ prefs }: { prefs: PrefsController }) {
             step={1000}
             value={cfg.durationMs}
             onChange={(e) => update({ durationMs: Number(e.target.value) })}
+            aria-label={t("settings.notifications.dismissAfter")}
             className="w-full accent-accent mt-1"
           />
         </div>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 0134ec8..1aeaaf2 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -733,7 +733,7 @@ function Toggle({
   return (
     <label className="flex items-center justify-between py-1 cursor-pointer text-sm">
       <span>{label}</span>
-      <Switch checked={checked} onChange={onChange} />
+      <Switch label={label} checked={checked} onChange={onChange} />
     </label>
   );
 }
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index c99fcd3..8171d24 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -4,17 +4,23 @@ import Tooltip from "../Tooltip";
 // Shared form/settings primitives, factored out of the many panels that each re-declared
 // them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.
 
-/** Pill on/off switch — the bare control; compose it with your own label/row. */
+/** Pill on/off switch — the bare control; compose it with your own label/row. Pass `label` for
+ * the accessible name (the visible row text) since the control itself has no inner text. */
 export function Switch({
   checked,
   onChange,
+  label,
 }: {
   checked: boolean;
   onChange: (v: boolean) => void;
+  label?: string;
 }) {
   return (
     <button
       type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
       onClick={() => onChange(!checked)}
       className={`w-9 h-5 rounded-full transition relative shrink-0 ${checked ? "bg-accent" : "bg-border"}`}
     >

From 35c3d0f2cb7ef19564c1911b3b97c2128b0e18eb Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 19:13:11 +0200
Subject: [PATCH 2/3] perf(feed): intrinsic dimensions + async decode on video
 thumbnails

Give the feed card thumbnail width/height (16:9) so the browser reserves the
aspect box before load (CLS), and decoding=async so image decode never blocks
the main thread. loading=lazy was already set.
---
 frontend/src/components/VideoCard.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index fd5a963..6802008 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -153,6 +153,9 @@ function Thumb({
           src={video.thumbnail_url}
           alt=""
           loading="lazy"
+          decoding="async"
+          width={1280}
+          height={720}
           className="w-full h-full object-cover"
         />
       ) : (

From e612e09c4e2f5bae64bb4b6bfafee458dabb9f44 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 19:13:35 +0200
Subject: [PATCH 3/3] docs(release): note a11y improvements in v0.22.2

---
 frontend/src/lib/releaseNotes.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/releaseNotes.ts b/frontend/src/lib/releaseNotes.ts
index 58d2f82..5f4a34f 100644
--- a/frontend/src/lib/releaseNotes.ts
+++ b/frontend/src/lib/releaseNotes.ts
@@ -17,9 +17,10 @@ export const RELEASE_NOTES: ReleaseEntry[] = [
   {
     version: "0.22.2",
     date: "2026-07-04",
-    summary: "A faster, tidier sign-in page.",
+    summary: "A faster sign-in page and better accessibility across the app.",
     fixes: [
       "The landing page loads much faster — its preview screenshots are now served in a modern, far smaller image format, and static assets are cached so repeat visits are near-instant.",
+      "Accessibility: toggles, colour swatches, sort menus and settings inputs now carry proper labels for screen readers and voice control, across every section of the app.",
     ],
     chores: [
       "Search-engine metadata (page description, robots.txt) and a cleaner console on the public page.",