๐จ Palette: Improve accessibility of table collapsible groups#24
๐จ Palette: Improve accessibility of table collapsible groups#24seonghobae wants to merge 6 commits into
Conversation
Added `aria-controls` to the toggle buttons in `UsecaseTable` and `ActorTable` to properly associate them with the collapsible content. Refactored the table body structure to use multiple `<tbody>` tags wrapped in a React Fragment, and used CSS `hidden` instead of conditional unmounting to ensure the `aria-controls` target ID remains in the DOM when collapsed.
|
๐ 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. |
|
No actionable comments were generated in the recent review. ๐ โน๏ธ Recent review infoโ๏ธ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ๐ Files selected for processing (1)
๐ WalkthroughSummary by CodeRabbit๋ฆด๋ฆฌ์ค ๋ ธํธ
์ํฌ์ค๋ฃจ
๋ณ๊ฒฝ ์ฌํญํ ์ด๋ธ ์ ๊ทผ์ฑ ๊ฐ์
์ฝ๋ ๋ฆฌ๋ทฐ ์์ ๋ ธ๋ ฅ๐ฏ 2 (Simple) | โฑ๏ธ ~12๋ถ ์
Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
โ Failed checks (1 error)
โ Passed checks (4 passed)
โจ Finishing Touches๐ Generate docstrings
๐งช Generate unit tests (beta)
โจ Simplify code
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. ๐ง ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Warning Billing warning: we have not been able to collect payment for this subscription for more than 72 hours. Please update the payment method or pay any pending invoices in Billing to avoid service interruption. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
โฆLI test Added `aria-controls` to the toggle buttons in `UsecaseTable` and `ActorTable` to properly associate them with the collapsible content. Refactored the table body structure to use multiple `<tbody>` tags wrapped in a React Fragment, and used CSS `hidden` instead of conditional unmounting to ensure the `aria-controls` target ID remains in the DOM when collapsed. Fixed a failing unit test in CLI (`UC-033.test.ts`) that checked for the exact old wording of the AI guide, bringing it up to date with the latest content.
The `UC-033.test.ts` test was failing because it asserted the presence of the string "`vspec step add` appends" which was removed from the AI guide in a recent update. It now asserts the presence of "Use `vspec step add --at <n>` to insert" instead.
The `UC-033.test.ts` test was failing because it asserted the presence of the string "`vspec step add` appends" which was removed from the AI guide in a recent update. It now asserts the presence of "Use `vspec step add --at <n>` to insert" instead.
The `UC-033.test.ts` test was failing because it asserted the presence of the string "`vspec step add` appends" which was removed from the AI guide in a recent update. It now asserts the presence of "Use `vspec step add --at <n>` to insert" instead.
The `UC-033.test.ts` test was failing because it asserted the presence of the string "`vspec step add` appends" which was removed from the AI guide in a recent update. It now asserts the presence of "Use `vspec step add --at <n>` to insert" instead.
1 participant
๐ก What: Added
aria-controlsattributes to the collapsible group toggle buttons in theUsecaseTableandActorTablecomponents. To support this properly, the conditional unmounting logic was refactored to use a CSShiddenclass on a dedicated<tbody>so the target ID is always present in the DOM.๐ฏ Why: When a collapsible section hides its content by completely removing it from the DOM, the
aria-controlsattribute points to an invalid ID, which can confuse screen readers. Keeping the element in the DOM withhiddenensures a consistent and accessible relationship between the toggle button and its content.๐ธ Before/After: Visually identical. Verified with Playwright screenshots.
โฟ Accessibility: Fixes broken
aria-controlsreferences and improves screen reader context for grouped table rows.PR created automatically by Jules for task 11417230484446285947 started by @seonghobae