From 6c5127b45a7e7bc3d7996dc224f5c68f5d6cec77 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 6 Jul 2026 10:24:46 +0000 Subject: [PATCH] Add ARIA labels to custom switch components Co-authored-by: brycejohnson1417 <257422776+brycejohnson1417@users.noreply.github.com> --- .Jules/palette.md | 3 +++ components/fraternitees/fraternitees-portal.tsx | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 .Jules/palette.md 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",