diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 00000000..79400b6f --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2025-02-12 - Added ARIA attributes to icon-only More options button +**Learning:** Icon-only buttons that trigger menus or dialogs often lack the necessary ARIA attributes to communicate their state and purpose to screen readers. In `EventAnnotations.tsx`, the `MoreHorizontal` button was missing `aria-label`, `aria-expanded`, and `aria-haspopup`. +**Action:** When implementing togglable menu triggers (e.g., 'More actions' buttons), always ensure they include an 'aria-expanded' attribute reflecting their current state, a descriptive 'aria-label', an 'aria-haspopup' attribute (e.g., 'menu'), and 'aria-hidden="true"' on any purely decorative internal icons. 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" > - +