Skip to content

docs(a11y): tabs a11y migration#6163

Merged
nikkimk merged 6 commits intomainfrom
nikkimk/tabs-a11y-migration
Apr 22, 2026
Merged

docs(a11y): tabs a11y migration#6163
nikkimk merged 6 commits intomainfrom
nikkimk/tabs-a11y-migration

Conversation

@nikkimk
Copy link
Copy Markdown
Contributor

@nikkimk nikkimk commented Apr 9, 2026 •
edited
Loading

Description

In spectrum-web-components/CONTRIBUTOR-DOCS/03_project-planning/03_components/tabs/accessibility-migration-analysis.md:

  • Documented recommendations for ARIA roles, states, and properties for the 2nd-gen tabs
  • Shadow DOM and cross-root ARIA considerations documented, including any limitations or required workarounds (e.g., ElementInternals, cross-root ARIA delegation)
  • Accessibility tree expectations documented, including expected node roles, names, states, and hierarchy
  • Keyboard interaction model fully specified, covering focus management, key bindings, roving tabindex or active-descendant patterns, and focus trapping where applicable
  • Testing requirements defined, including unit tests, integration tests, and manual screen reader testing matrix (JAWS, NVDA, VoiceOver)
  • Known 1st-gen accessibility issues cataloged with disposition (fix in 2nd-gen, defer, or won't fix) and linked to any open GitHub issues or bugs
  • Applicable WAI-ARIA design pattern identified with relevant ARIA roles documented
  • 1st-gen component analysis completed, covering current ARIA implementation, keyboard handling, existing test coverage, and known issues with dispositions

Motivation and context

The ticket requests accessibility recommendations for tabs as part of its migration from 1st-gen to 2nd-gen. The recommendations should produce a comprehensive set of accessibility requirements that the engineering team will use as the specification for the 2nd-gen implementation.

The 2nd-gen migration is an opportunity to address known accessibility gaps, align with the latest WAI-ARIA Authoring Practices, and ensure the component meets WCAG 2.2 AA compliance.

Related issue(s)

  • fixes SWC-1898

Screenshots (if appropriate)

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

Review the Tabs accessibility migration analysis

  • ARIA roles, states, and properties covered
  • Shadow DOM and cross-root ARIA considerations covered
  • Accessibility tree documented
  • Keyboard interaction fully specified
  • Testing requirements defined
  • Known 1st-gen issues cataloged with dispositions

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 9, 2026 •
edited
Loading

⚠️ No Changeset found

Latest commit: 80028d1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@nikkimk nikkimk self-assigned this Apr 9, 2026
@nikkimk nikkimk marked this pull request as ready for review April 9, 2026 20:47
@nikkimk nikkimk requested a review from a team as a code owner April 9, 2026 20:47
@nikkimk nikkimk requested a review from Rajdeepc April 9, 2026 20:47
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 9, 2026 •
edited
Loading

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6163

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Rajdeepc

This comment was marked as off-topic.

Sign in to view

rubencarvalho
rubencarvalho requested changes Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@rubencarvalho rubencarvalho left a comment

Choose a reason for hiding this comment

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

Everything looks great, I think we just need a little bit of guidance for the Picker situation 😄

Comment thread CONTRIBUTOR-DOCS/03_project-planning/03_components/tabs/accessibility-migration-analysis.md

`aria-controls` and `aria-labelledby` rely on **ID references** that must resolve in the document tree. If tabs and panels split across shadow roots without a supported cross-root strategy, IDs may not resolve as expected. Prefer a composition where references resolve in the same document subtree as the referencing node, or document the 2nd-gen plan (ElementInternals, explicit light DOM slots, synchronized ids on light children, etc.) once implementation exists. Until then, treat cross-root IDREF as a design constraint to solve in the rendering migration.

### Accessibility tree expectations
Copy link
Copy Markdown
Contributor

@rubencarvalho rubencarvalho Apr 17, 2026

Choose a reason for hiding this comment

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

When there is not enough space for the tabs (i.e. they overflow), they turn into a Picker. Are there any particular A11Y considerations we need to have in that case? I'm assuming that given the UI is no longer a visible tablist with tab/tabpanel behavior, then the semantics should also switch to the semantics of the new control? cc: @nikkimk

@caseyisonit caseyisonit added Status:Ready for review PR ready for review or re-review. 2nd gen These issues or PRs map to our 2nd generation work to modernizing infrastructure. High priority PR review PR is a high priority and should be reviewed ASAP labels Apr 20, 2026
rubencarvalho
rubencarvalho approved these changes Apr 21, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@rubencarvalho rubencarvalho left a comment

Choose a reason for hiding this comment

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

Approving as we'll leave the Picker as a follow-up!

@nikkimk nikkimk enabled auto-merge (squash) April 22, 2026 18:52
@nikkimk nikkimk merged commit b15f149 into main Apr 22, 2026
26 of 28 checks passed
@nikkimk nikkimk deleted the nikkimk/tabs-a11y-migration branch April 22, 2026 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Rajdeepc Rajdeepc Rajdeepc approved these changes

@rubencarvalho rubencarvalho rubencarvalho approved these changes

@miwha-adobe miwha-adobe miwha-adobe approved these changes

Assignees

@nikkimk nikkimk

Labels

2nd gen These issues or PRs map to our 2nd generation work to modernizing infrastructure. High priority PR review PR is a high priority and should be reviewed ASAP Status:Ready for review PR ready for review or re-review.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@nikkimk @Rajdeepc @rubencarvalho @miwha-adobe @caseyisonit