diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..9d74c66 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-07-06 - Missing ARIA Labels on Switch Toggles +**Learning:** Custom toggle switches (`role="switch"`) used in the UI, even if they have descriptive text nearby, must explicitly include an `aria-label` (or `aria-labelledby`) for proper screen reader support. The visual context does not automatically translate to the interactive element without it. +**Action:** Ensure all custom toggle switches explicitly provide an `aria-label` attribute if they do not contain embedded visible text. diff --git a/components/fraternitees/fraternitees-portal.tsx b/components/fraternitees/fraternitees-portal.tsx index ecc1890..89ce698 100644 --- a/components/fraternitees/fraternitees-portal.tsx +++ b/components/fraternitees/fraternitees-portal.tsx @@ -181,6 +181,7 @@ function PluginToggle({ type="button" role="switch" aria-checked={enabled} + aria-label={`Toggle ${label}`} disabled={disabled} onClick={onToggle} className={classNames( @@ -1038,6 +1039,7 @@ export function FraterniteesWorkspace({ type="button" role="switch" aria-checked={dailyAutoSync.enabled} + aria-label="Toggle daily sync" onClick={() => void updateDailyAutoSync(!dailyAutoSync.enabled)} className={classNames( "relative h-7 w-12 shrink-0 rounded-full border transition",