Address review follow-ups for slider and tabs accessibility semantics#12
Merged
Address review follow-ups for slider and tabs accessibility semantics#12
Conversation
Merged
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com> Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com> Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility-related behavior in core UI components and aligns documentation around required radios, as a follow-up to feedback in #11.
Changes:
- Update
bq-tabsARIA id generation to avoid invalid ids when tab ids are missing and to encode ids containing spaces. - Update
bq-sliderto keeparia-valuenow/aria-valuetextin sync during live input without re-rendering. - Adjust
bq-radiodocs to reflect thatrequiredis conveyed via the native internalrequiredattribute (notaria-required).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/tabs-tooltip.test.ts | Adds coverage for missing tab ids and space-containing tab ids to validate ARIA linking behavior. |
| tests/slider-pagination.test.ts | Adds coverage ensuring slider live input updates value text + ARIA attributes without committing value attr. |
| src/components/tabs/BqTabs.ts | Encodes/guards generated tab & panel ids and conditionally applies ARIA attributes. |
| src/components/slider/BqSlider.ts | Adds helper to sync ARIA value attributes during input/change handlers. |
| docs/components/radio.md | Corrects required/accessibility guidance to match implementation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Copilot
AI
changed the title
[WIP] Update documentation for UI components to improve accessibility
Address review follow-ups for slider and tabs accessibility semantics
Mar 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This follow-up addresses review comments on the 1.0.0 branch where ARIA state could drift from runtime state in
bq-slider, andbq-tabscould generate broken tab/panel relationships from missing or unsafe tab IDs. It also corrects the radio documentation to match the actual required-field implementation.Slider: keep ARIA state live during drag
aria-valuenowandaria-valuetexton the internal range input duringinput, not only after the committedchangeTabs: make generated ARIA links safe
id/aria-controls/aria-labelledbyrelationshipsDocs: align radio accessibility wording with implementation
aria-requiredwording indocs/components/radio.mdrequiredattribute on the internal radio inputCoverage
This now renders a safe linked pair such as
tab-needs%20space↔panel-needs%20spaceinstead of relying on raw user-provided ID text.⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.