🎨 Palette: Improve accessibility of WikiCollapsible#49
🎨 Palette: Improve accessibility of WikiCollapsible#49aicoder2009 wants to merge 2 commits intomainfrom
Conversation
Added `useId` to generate unique IDs for the collapsible content to prevent collisions when multiple collapsibles are rendered. Added `aria-expanded` and `aria-controls` to the toggle button. Added `aria-label` to provide context (e.g. "Hide [Title]") for screen reader users instead of just reading "[hide]". Co-authored-by: aicoder2009 <127642633+aicoder2009@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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Improves the accessibility semantics of the WikiCollapsible component so screen readers can better understand and announce the toggle’s purpose and state, and records the accessibility learning in the project’s palette notes.
Changes:
- Added
useId()-based ID wiring plusaria-expanded,aria-controls, and contextualaria-labelto theWikiCollapsibletoggle button. - Linked the collapsible content container to the toggle via an
id. - Added a palette note documenting the accessible-name/controls pattern for collapsibles.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
src/components/wiki/wiki-collapsible.tsx |
Adds ARIA attributes and an ID connection between the toggle button and collapsible content. |
.jules/palette.md |
Documents the accessibility rationale and recommended pattern for contextual labels and aria-controls. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {isOpen && ( | ||
| <div id={contentId} className="px-4 py-3"> | ||
| {children} | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
aria-controls points at contentId, but the controlled content <div id={contentId}> is only rendered when isOpen is true. When collapsed, this leaves aria-controls referencing a non-existent element, which can be flagged by a11y checkers and undermines the intended control/region relationship. Consider always rendering the content container with that id and toggling visibility via hidden/CSS, or only setting aria-controls when the element is present (less ideal).
| {isOpen && ( | |
| <div id={contentId} className="px-4 py-3"> | |
| {children} | |
| </div> | |
| )} | |
| <div id={contentId} className="px-4 py-3" hidden={!isOpen}> | |
| {children} | |
| </div> |
| @@ -22,11 +23,18 @@ export function WikiCollapsible({ | |||
| <button | |||
There was a problem hiding this comment.
The toggle <button> is missing an explicit type="button". If WikiCollapsible is ever rendered inside a <form>, the default type="submit" can trigger unexpected submissions. Other wiki components set type="button" explicitly (e.g., src/components/wiki/wiki-dropdown.tsx:40-46, src/components/wiki/barcode-scanner.tsx:91-97).
| <button | |
| <button | |
| type="button" |
| **Learning:** Generic text like "[hide]" or "[show]" used on toggle buttons lacks context for screen reader users when navigating by controls. Furthermore, screen readers need to associate a toggle button directly with the region it controls using `aria-controls` to understand the state relationship properly. | ||
| **Action:** Always provide a contextual `aria-label` (e.g., "Hide [Title]" or "Show [Title]") for buttons using generic visual text. Use React's `useId` hook to generate unique IDs for content regions and link them to the toggle button via `aria-controls` to avoid ID collisions in lists of collapsibles. |
There was a problem hiding this comment.
The guidance recommends using aria-controls to associate the button with the collapsible region. To avoid invalid aria-controls references, ensure the controlled element with the referenced id is present in the DOM even when collapsed (e.g., render it with hidden/CSS instead of conditionally omitting it).
💡 What: Added proper ARIA attributes to the
WikiCollapsiblecomponent, including a contextualaria-label,aria-expandedstate, andaria-controlsconnection usinguseId. Also recorded this learning in.jules/palette.md.🎯 Why: To improve accessibility for screen reader users. The generic "[hide]" or "[show]" toggle button lacked context out of bounds. Also, by properly linking the button to the content with a unique ID, screen readers correctly announce the toggle state and the content it expands/collapses.
📸 Before/After: No visual changes. Behavior verified successfully with Playwright visually.
♿ Accessibility: Added
aria-expanded,aria-controls, and a contextualaria-labelmapped to a unique ID to the generic toggle button.PR created automatically by Jules for task 4385178654827795622 started by @aicoder2009