Skip to content

🎨 Palette: Improve accessibility of More options button in EventAnnotations #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aarjava wants to merge 3 commits into
base: main
Choose a base branch
from
+7 −1
Open

🎨 Palette: Improve accessibility of More options button in EventAnnotations #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46caa9a
🎨 Palette: Add ARIA attributes to More options button in EventAnnotat…
google-labs-jules[bot] Jun 17, 2026
5c57102
🎨 Palette: Add ARIA attributes to More options button in EventAnnotat…
google-labs-jules[bot] Jun 17, 2026
970885d
🎨 Palette: Add ARIA attributes to More options button in EventAnnotat…
google-labs-jules[bot] Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
5 changes: 4 additions & 1 deletion src/components/events/EventAnnotations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Match haspopup to actual menu semantics

When this button is opened, the popup rendered below is still a plain motion.div containing native buttons rather than an ARIA menu with menuitems and the expected menu keyboard behavior. In the screen-reader path for this options control, aria-haspopup="menu" now advertises menu semantics that the popup does not implement; either use the existing Radix dropdown menu primitive here or omit/change this attribute until the popup has matching roles and keyboard handling.

Useful? React with 👍 / 👎.

>
<MoreHorizontal className="size-4" />
<MoreHorizontal className="size-4" aria-hidden="true" />
</button>

<AnimatePresence>
Expand Down
Loading