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:
@@ -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. */}
|
||||
|
||||
Reference in New Issue
Block a user