🎨 Palette: Improve WikiCollapsible accessibility with useId#38
🎨 Palette: Improve WikiCollapsible accessibility with useId#38aicoder2009 wants to merge 2 commits intomainfrom
Conversation
💡 What: Updated the WikiCollapsible component to use React's useId hook for generating unique IDs and mapped them correctly to aria-controls and aria-expanded attributes. 🎯 Why: Custom interactive widgets often lack proper accessibility context for screen readers. Using useId ensures that every instance of a collapsible element has a unique ID, creating a direct and accurate relationship between the toggle button and its content container. 📸 Before/After: No visual change, but structural accessibility is improved. ♿ Accessibility: - Added unique ID generation using useId - Added aria-expanded to indicate toggle state - Added aria-controls mapping the toggle to the content container - Added dynamic aria-label indicating the "Show/Hide" action on the specific title 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 UI widget by generating a unique content container ID via React useId and wiring it to the toggle button’s ARIA attributes.
Changes:
- Add
useId()-generated ID for the collapsible content container. - Add
aria-expanded,aria-controls, and a dynamicaria-labelto the toggle button. - Add a
.jules/palette.mdnote capturing the accessibility learning/pattern.
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 useId and ARIA wiring between the toggle button and collapsible content. |
| .jules/palette.md | Documents the “use useId for aria-controls mapping” accessibility guideline. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </button> | ||
| </div> | ||
| {isOpen && <div className="px-4 py-3">{children}</div>} | ||
| {isOpen && <div id={contentId} className="px-4 py-3">{children}</div>} |
| @@ -22,11 +23,14 @@ export function WikiCollapsible({ | |||
| <button | |||
| @@ -22,11 +23,14 @@ export function WikiCollapsible({ | |||
| <button | |||
| onClick={() => setIsOpen(!isOpen)} | |||
🎨 Palette: Improve WikiCollapsible accessibility with useId
💡 What:
Updated the WikiCollapsible component to use React's useId hook for generating unique IDs and mapped them correctly to aria-controls and aria-expanded attributes.
🎯 Why:
Custom interactive widgets often lack proper accessibility context for screen readers. Using useId ensures that every instance of a collapsible element has a unique ID, creating a direct and accurate relationship between the toggle button and its content container.
📸 Before/After:
No visual change, but structural accessibility is improved.
♿ Accessibility:
PR created automatically by Jules for task 7882188171366172839 started by @aicoder2009