Skip to content

🎨 Palette: Fix Dropdown Keyboard Accessibility#37

Open
divineforge wants to merge 1 commit into
mainfrom
palette-nav-a11y-770036250948059044
Open

🎨 Palette: Fix Dropdown Keyboard Accessibility#37
divineforge wants to merge 1 commit into
mainfrom
palette-nav-a11y-770036250948059044

Conversation

@divineforge

Copy link
Copy Markdown
Collaborator

🎨 Palette: Fix Dropdown Keyboard Accessibility

💡 What:

  • Updated the CSS selector for the ecosystem dropdown menu from targeting the hidden menu directly (.gzen-nav-dropdown-menu:focus-within) to targeting the parent container (.gzen-nav-dropdown:focus-within .gzen-nav-dropdown-menu).
  • Added aria-hidden="true" to the decorative dropdown arrow () in the header.
  • Added a new journal entry documenting the specific learning about keyboard accessibility and visibility: hidden elements.

🎯 Why:

  • When an element has visibility: hidden, it and its children are completely removed from the tab order. Keyboard users could not tab into the dropdown menu to trigger its :focus-within state, making the ecosystem links inaccessible. By applying the :focus-within to the parent .gzen-nav-dropdown, tabbing to the visible trigger button now correctly reveals the menu, allowing users to tab through its items.
  • Screen readers were likely reading out the literal translation of the downward-pointing triangle symbol, which adds unnecessary noise.

Accessibility:

  • Keyboard Navigation: The ecosystem dropdown menu is now fully navigable via keyboard.
  • Screen Reader Polish: Decorative characters are now properly hidden from assistive technologies.

PR created automatically by Jules for task 770036250948059044 started by @divineforge

…rience

- Update CSS for dropdown menu to ensure `:focus-within` targets the visible `.gzen-nav-dropdown` parent so keyboard users can navigate into the hidden menu.
- Add `aria-hidden="true"` to the decorative dropdown arrow in the header so it is ignored by screen readers.
- Create a journal entry documenting the learning about `visibility: hidden` and focus states.

Co-authored-by: divineforge <1146195+divineforge@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 10, 2026

Copy link
Copy Markdown

Deploying gzen with  Cloudflare Pages  Cloudflare Pages

Latest commit: a392f5e
Status:🚫  Build failed.

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant