Skip to content

Address review follow-ups for slider and tabs accessibility semantics#12

Merged
JosunLP merged 3 commits intodevfrom
copilot/sub-pr-11
Mar 24, 2026
Merged

Address review follow-ups for slider and tabs accessibility semantics#12
JosunLP merged 3 commits intodevfrom
copilot/sub-pr-11

Conversation

Copy link
Contributor

Copilot AI commented Mar 24, 2026

This follow-up addresses review comments on the 1.0.0 branch where ARIA state could drift from runtime state in bq-slider, and bq-tabs could 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

    • Update aria-valuenow and aria-valuetext on the internal range input during input, not only after the committed change
    • Keep the visible value display in sync without re-rendering the host
  • Tabs: make generated ARIA links safe

    • Generate tab/panel IDs only from non-empty tab IDs
    • Encode generated IDs so tabs with spaces still produce valid id / aria-controls / aria-labelledby relationships
    • Skip ARIA linking when there is no matching rendered tab button, avoiding orphaned references
  • Docs: align radio accessibility wording with implementation

    • Replace the aria-required wording in docs/components/radio.md
    • Document that required semantics are conveyed by the native required attribute on the internal radio input
  • Coverage

    • Add regression coverage for:
      • live slider ARIA updates during drag
      • tabs without IDs not producing invalid ARIA references
      • tabs with spaced IDs producing stable encoded tab/panel links
<bq-tabs active-tab="needs space">
  <div data-tab-item id="needs space" label="Needs Space"></div>
  <div data-tab="needs space">Panel</div>
</bq-tabs>

This now renders a safe linked pair such as tab-needs%20spacepanel-needs%20space instead 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.

Copilot AI and others added 2 commits March 24, 2026 21:25
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
@JosunLP JosunLP marked this pull request as ready for review March 24, 2026 21:39
Copilot AI review requested due to automatic review settings March 24, 2026 21:39
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-tabs ARIA id generation to avoid invalid ids when tab ids are missing and to encode ids containing spaces.
  • Update bq-slider to keep aria-valuenow/aria-valuetext in sync during live input without re-rendering.
  • Adjust bq-radio docs to reflect that required is conveyed via the native internal required attribute (not aria-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
Copilot AI requested a review from JosunLP March 24, 2026 21:44
@JosunLP JosunLP merged commit 9b05f2e into dev Mar 24, 2026
6 checks passed
@JosunLP JosunLP deleted the copilot/sub-pr-11 branch March 24, 2026 21:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants