♿ Restore focus rings and wire tab ARIA relationships#283
Merged
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. 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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
1bcfb25 to
79a3a17
Compare
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>
79a3a17 to
dedf382
Compare
24 tasks
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.
Carries #230 (thanks @gabalafou!) forward onto the current Sass layout, and adds programmatic label→panel references for tabs.
Changes
@usepartials, all six files)::focus-visiblerings 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.sd-tab-item-N-content, prepended so anchor ids from preceding hyperlink targets keep working), and each label emitsaria-controlspointing 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 foraria-controlsvaries).Verification
-contentid always wins theidattribute, soaria-controlsalways resolves and old anchors keep working.:focus-visibletrue,outline-style: auto); mouse click produces none; 24/24 labels'aria-controlsresolve to real panels. (axe-cli was unavailable in the sandbox — its chromedriver download is blocked; manual steps documented in the test file.)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)