Skip to content

🎨 Palette: [UX improvement] Add explicit focus rings and ARIA states to interactive nav widgets#116

Open
belpythons wants to merge 1 commit into
masterfrom
palette/ux-a11y-focus-rings-14391381833891525806
Open

🎨 Palette: [UX improvement] Add explicit focus rings and ARIA states to interactive nav widgets#116
belpythons wants to merge 1 commit into
masterfrom
palette/ux-a11y-focus-rings-14391381833891525806

Conversation

@belpythons
Copy link
Copy Markdown
Owner

What:
Added explicit ARIA state attributes (aria-expanded, aria-label, aria-haspopup) and visible focus indicators (focus-visible:ring-2) to interactive, icon-only navigation widgets like the mobile menu toggle, theme toggles, and forum dropdowns across Navbar.jsx and FocusLayout.jsx. Also prefixed an unused theme variable to satisfy ESLint.

Why:
Icon-only disclosure widgets and navigation buttons often lack sufficient context and state announcements out-of-the-box, creating significant barriers for screen reader users. Additionally, native browser focus outlines can sometimes be suppressed or insufficiently distinct on custom UI elements, leaving keyboard navigators lost on the page without clear visual feedback.

Before/After:

  • Before: Toggling the mobile menu or forum dropdown did not broadcast state changes (aria-expanded) to assistive technologies. Keyboard users navigating via "Tab" received minimal/no visual feedback when landing on icon-only buttons.
  • After: Screen readers now correctly announce when these menus open or close. Keyboard users see a distinct, brand-colored focus ring (via focus-visible:ring-accent-500) when tabbing to these buttons, drastically improving the predictability of interaction.

Accessibility:

  • Added aria-expanded attributes dynamically bound to state on disclosure buttons.
  • Added aria-haspopup to the Forum dropdown button.
  • Added explicit, descriptive aria-label attributes where missing.
  • Implemented Tailwind focus-visible utility classes to guarantee a high-contrast focus ring for keyboard-only users without polluting pointer/mouse clicks.

PR created automatically by Jules for task 14391381833891525806 started by @belpythons

…to interactive nav widgets

- Added `aria-expanded`, `aria-haspopup`, and `aria-label` to global navigation buttons (dropdown, mobile menu, sidebar toggles)
- Ensured strong keyboard accessibility by appending Tailwind `focus-visible` ring utilities to icon-only buttons in Layouts.
- Cleaned up a newly surfaced unused-var ESLint warning.

Co-authored-by: belpythons <187399139+belpythons@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown

👋 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.

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