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).
This commit is contained in:
parent
2ff517fb74
commit
92eed1ec9b
8 changed files with 40 additions and 9 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue