🎨 Palette: Add aria-controls to expandable PPP savings panel - #337
🎨 Palette: Add aria-controls to expandable PPP savings panel#337brycejohnson1417 wants to merge 1 commit into
Conversation
💡 What: Added `aria-controls` to the expand/collapse button and applied the corresponding `id` to both branch elements of the PPP savings panel conditionally rendered content. 🎯 Why: Fixes broken screen reader association. Without an explicitly associated ID present in all states, screen readers lose track of the content area being toggled when React swaps the DOM elements. 📸 Before/After: Visuals remain unchanged, but the accessibility tree now correctly maps the trigger to its content in both collapsed and expanded states. ♿ Accessibility: Ensures WCAG compliance for accordion-style expand/collapse interactions by explicitly associating the toggle trigger with the content container via `aria-controls`. Co-authored-by: brycejohnson1417 <257422776+brycejohnson1417@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 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
aria-controlsto the expand/collapse button and applied the correspondingidto both branch elements of the PPP savings panel conditionally rendered content.🎯 Why: Fixes broken screen reader association. Without an explicitly associated ID present in all states, screen readers lose track of the content area being toggled when React swaps the DOM elements.
📸 Before/After: Visuals remain unchanged, but the accessibility tree now correctly maps the trigger to its content in both collapsed and expanded states.
♿ Accessibility: Ensures WCAG compliance for accordion-style expand/collapse interactions by explicitly associating the toggle trigger with the content container via
aria-controls.PR created automatically by Jules for task 8338478608205448079 started by @brycejohnson1417