peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(a11y): accessible names for switches, swatches, selects and inputs

Browse source 
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).
This commit is contained in:
npeter83 2026-07-04 19:13:11 +02:00
parent 2ff517fb74
commit 92eed1ec9b
8 changed files with 40 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/ConfigPanel.tsx
View file

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