From 82203190a15de300f77e31bad99654e108dc56d8 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 27 Jun 2026 23:03:46 +0000 Subject: [PATCH] feat(a11y): add aria properties to action menu toggle in EventAnnotations Added `aria-label`, `aria-expanded`, and `aria-haspopup` to the actions menu toggle button in `EventAnnotations.tsx` for improved screen reader accessibility. Also added `aria-hidden="true"` to the decorative `` icon. Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com> --- .Jules/palette.md | 3 +++ src/components/events/EventAnnotations.tsx | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 00000000..8d06cc6a --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-06-27 - Added Action Menu Accessible Name and Properties +**Learning:** For a toggle trigger that expands a menu, it is critical to expose standard a11y properties including aria-label for its action, aria-expanded reflecting its state, aria-haspopup for its function, and to hide pure decorative internal icons like MoreHorizontal from screen readers. +**Action:** Apply this pattern to all context/action menus toggle triggers consistently. diff --git a/src/components/events/EventAnnotations.tsx b/src/components/events/EventAnnotations.tsx index aefd7007..88ded451 100644 --- a/src/components/events/EventAnnotations.tsx +++ b/src/components/events/EventAnnotations.tsx @@ -325,8 +325,11 @@ export default function EventAnnotations({ setShowActionsFor(showActionsFor === thread.id ? null : thread.id) } className="rounded-lg p-1.5 text-[#9CA3AF] hover:bg-[#F8FAFC] hover:text-[#666666] transition-colors" + aria-label="More actions" + aria-expanded={showActionsFor === thread.id} + aria-haspopup="menu" > - +