🎨 Palette: Add aria-expanded to collapsible buttons#192
Conversation
Added the `aria-expanded` attribute to three different accordion/disclosure toggle buttons across the Next.js frontend application (in `BenchmarkResults` and `ExportPanel` components) to improve accessibility by communicating the expanded/collapsed state of the panels to screen readers.
|
👋 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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Pull request overview
Improves accessibility for collapsible UI sections in the web app by exposing expanded/collapsed state to assistive technologies.
Changes:
- Add
aria-expandedto the Skills Generator export panel toggle button. - Add
aria-expandedto the Benchmark Results “Compiled Prompt” collapsible toggle button. - Add
aria-expandedto the Agent Generator export panel toggle button.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| web/app/skills-generator/components/ExportPanel.tsx | Adds aria-expanded to the export section toggle for better screen reader state reporting. |
| web/app/components/BenchmarkResults.tsx | Adds aria-expanded to the compiled prompt disclosure toggle. |
| web/app/agent-generator/components/ExportPanel.tsx | Adds aria-expanded to the export section toggle for better accessibility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
madara88645
deleted the
palette-aria-expanded-collapsible-buttons-9634158429627417377
branch
💡 What
Added the
aria-expandedattribute to collapsible/accordion toggle buttons inBenchmarkResults.tsx,agent-generator/components/ExportPanel.tsx, andskills-generator/components/ExportPanel.tsx.🎯 Why
When toggle buttons control the visibility of a section (like the Compiled Prompt or Export panels), screen readers need to know whether that section is currently visible or hidden. Without the
aria-expandedattribute, screen reader users interact with a button that doesn't explicitly state what state it is controlling.📸 Before/After
(No visual changes, purely accessibility-focused attributes added)
♿ Accessibility
This enhancement allows screen readers (like NVDA, VoiceOver, JAWS) to correctly announce the state (expanded or collapsed) of these dynamic sections to the user, making navigation and interaction much more predictable.
PR created automatically by Jules for task 9634158429627417377 started by @madara88645