🎨 Palette: [UX improvement] Add explicit focus rings and ARIA states to interactive nav widgets#116
Conversation
…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>
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
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 acrossNavbar.jsxandFocusLayout.jsx. Also prefixed an unusedthemevariable 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:
aria-expanded) to assistive technologies. Keyboard users navigating via "Tab" received minimal/no visual feedback when landing on icon-only buttons.focus-visible:ring-accent-500) when tabbing to these buttons, drastically improving the predictability of interaction.Accessibility:
aria-expandedattributes dynamically bound to state on disclosure buttons.aria-haspopupto the Forum dropdown button.aria-labelattributes where missing.focus-visibleutility 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