Skip to content

♿ Restore focus rings and wire tab ARIA relationships#283

Merged
chrisjsewell merged 1 commit into
mainfrom
brief/10-a11y-tabs
Jul 14, 2026
Merged

♿ Restore focus rings and wire tab ARIA relationships#283
chrisjsewell merged 1 commit into
mainfrom
brief/10-a11y-tabs

Conversation

@chrisjsewell

@chrisjsewell chrisjsewell commented Jul 14, 2026

Copy link
Copy Markdown
Member

Carries #230 (thanks @gabalafou!) forward onto the current Sass layout, and adds programmatic label→panel references for tabs.

Changes

  • Focus rings restored (from Restore focus rings #230, ported hunk-by-hunk onto the post-@use partials, all six files): :focus-visible rings on dropdown summaries, tab labels, buttons and stretched-link cards; 0.25rem ring offset; ring colors matching element colors; the tap-highlight typo fix (:not(.focus-visible) class → :not(:focus-visible) pseudo); tab-label top-padding evened out. Rings appear for keyboard focus only — mouse clicks show none.
  • Tab ARIA wiring (Include radio/label ID as part of tab-content div #30): each tab content panel gets a stable id (sd-tab-item-N-content, prepended so anchor ids from preceding hyperlink targets keep working), and each label emits aria-controls pointing at it. This establishes the relationship in the accessibility tree; it is deliberately not a full WAI-ARIA tabs pattern (the CSS-only radio mechanism is kept, and AT support for aria-controls varies).

Verification

  • Independent review verified the port faithful for all 11 source hunks, zero compiled-CSS drift against the SCSS, and that the HTML surface diff vs main is exactly the intended set. The multiple-ids case was force-tested through the docutils HTML5 writer: the -content id always wins the id attribute, so aria-controls always resolves and old anchors keep working.
  • Playwright keyboard smoke on built docs: Tab-focus produces a visible ring (:focus-visible true, outline-style: auto); mouse click produces none; 24/24 labels' aria-controls resolve to real panels. (axe-cli was unavailable in the sandbox — its chromedriver download is blocked; manual steps documented in the test file.)
  • Full suite on pinned Sphinx 7.2.6 / 7.4.7 / 8.2.3 (173 passed each); new tests/test_tabs_a11y.py; 5 regression fixtures regenerated with only the expected id/aria attribute changes.

Closes #30
Closes #230 (carried, with author credit)

@codecov

codecov Bot commented Jul 14, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.84%. Comparing base (3adada6) to head (dedf382).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #283      +/-   ##
==========================================
+ Coverage   90.81%   90.84%   +0.03%     
==========================================
  Files          13       13              
  Lines        1219     1224       +5     
==========================================
+ Hits         1107     1112       +5     
  Misses        112      112              
Flag Coverage Δ
pytests 90.84% <100.00%> (+0.03%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Port PR #230 onto the @use-based SCSS partials: :focus-visible rings on
tab labels, dropdown summaries, buttons and stretched-link cards (shown
for keyboard focus, not on mouse click), plus the tab label padding tweak.

Give each tab content panel a stable, unique id and point its label at it
via aria-controls, so assistive technologies can relate a tab to the
region it toggles (closes #30).

Co-authored-by: gabalafou <317883+gabalafou@users.noreply.github.com>
@chrisjsewell chrisjsewell merged commit 7236694 into main Jul 14, 2026
25 checks passed
@chrisjsewell chrisjsewell deleted the brief/10-a11y-tabs branch July 14, 2026 22:07
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.

Include radio/label ID as part of tab-content div

1 participant