🎨 Palette: Enhance Accessibility in FavoritesPanel#9
Conversation
…ttons Added correct disclosure widget ARIA attributes (aria-expanded, aria-controls) to the Favorites Panel toggle. Also explicitly hid decorative text icons/symbols from screen readers and added focus-visible outline states to all buttons in the component for keyboard accessibility. Co-authored-by: kastnerp <1919773+kastnerp@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. |
1 participant
💡 What:
Added accessible disclosure widget attributes (
aria-expanded,aria-controls) to the Favorites panel toggle. Hid visual-only decorative text (♥, arrows) from screen readers viaaria-hidden="true". Finally, addedfocus-visibleoutline styles to all buttons within the component to support keyboard navigation.🎯 Why:
Screen reader users had no context that the "Favorites" button was a toggle for a collapsible panel, nor could they easily discern the state (expanded vs collapsed) since the visual indicators (
▼/▲) were read as raw unicode symbols. Furthermore, keyboard users could not easily determine which button was focused within the panel due to missing focus outlines.📸 Before/After:
No visual difference on load or hover, but keyboard users will now see a blue outline on focused interactive elements.
♿ Accessibility:
aria-expandedandaria-controlsto the toggle button.aria-hidden="true"to visual icons/symbols.focus-visible:ring-2to support clear keyboard navigation paths.PR created automatically by Jules for task 1024019346964237037 started by @kastnerp