🎨 Palette: Improve accessibility of WikiCollapsible#22
🎨 Palette: Improve accessibility of WikiCollapsible#22aicoder2009 wants to merge 2 commits intomainfrom
Conversation
Added missing ARIA attributes (`aria-expanded`, `aria-controls`, `aria-label`) to the toggle button in the `WikiCollapsible` component, and a unique `id` generated via `useId()` to the content container to make it accessible to screen readers. Co-authored-by: aicoder2009 <[email protected]>
|
👋 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 of the WikiCollapsible UI component by adding ARIA attributes that expose the toggle’s expanded/collapsed state and intended controlled region to assistive technologies.
Changes:
- Added
aria-expanded,aria-controls, and a descriptivearia-labelto theWikiCollapsibletoggle button. - Introduced a per-instance
contentIdviauseId()and applied it to the collapsible content container. - Added an internal palette note documenting the ARIA pattern to follow for custom collapsibles.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/components/wiki/wiki-collapsible.tsx | Adds ARIA attributes and an ID linkage between the toggle and content region for better screen-reader support. |
| .jules/palette.md | Documents the accessibility learning/action item for future similar UI work. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| aria-expanded={isOpen} | ||
| aria-controls={contentId} | ||
| aria-label={`${isOpen ? "Hide" : "Show"} ${title}`} |
There was a problem hiding this comment.
aria-controls points at contentId, but the element with that id is only rendered when isOpen is true. When collapsed (including on initial render with defaultOpen={false}), this leaves aria-controls referencing a non-existent element, which breaks the control->region relationship for assistive tech. Consider always rendering the content container with a stable id and toggling its visibility (e.g., hidden/CSS), optionally keeping {children} conditional to avoid mounting heavy content when collapsed.
💡 What: Added
aria-expanded,aria-controls, andaria-labelto theWikiCollapsiblebutton.🎯 Why: The previous implementation just said
[show]or[hide]without indicating what is being hidden or if the element is currently expanded or collapsed. This makes the toggle screen-reader friendly and improves overall accessibility.♿ Accessibility: The toggle is now explicitly linked to its content container and accurately announces its state.
PR created automatically by Jules for task 2304619088196931926 started by @aicoder2009