diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..8c56b5b --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-07-03 - Custom Toggle Switches (role="switch") without aria-label +**Learning:** Found custom toggle switch components (buttons with `role="switch"`) in the `FraterniteesPortal` that do not provide `aria-label` or `aria-labelledby`, violating the memory directive regarding custom toggle switches lacking embedded visible text. This makes them inaccessible to screen readers as they won't know what setting the switch toggles. +**Action:** Always add an `aria-label` (e.g., `aria-label={\`Toggle ${label}\`}`) to toggle switches if they do not contain descriptive text inside the button. diff --git a/components/fraternitees/fraternitees-portal.tsx b/components/fraternitees/fraternitees-portal.tsx index ecc1890..c9c7d60 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 Automatic daily sync" onClick={() => void updateDailyAutoSync(!dailyAutoSync.enabled)} className={classNames( "relative h-7 w-12 shrink-0 rounded-full border transition",