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

@@ -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"
           />
         )}

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. */}

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>

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>

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

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>

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>
   );
 }

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"}`}
     >