Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix carousel a11y #1626

Merged
merged 5 commits into from
Oct 16, 2023
Merged

fix carousel a11y #1626

merged 5 commits into from
Oct 16, 2023

Conversation

mayank99
Copy link
Contributor

@mayank99 mayank99 commented Oct 11, 2023 •
edited

Changes

Few different a11y improvements to Carousel:

  • Carousel now only adds two Tab stops the dots (tab) and the active slide (tabpanel), essentially following the tabs pattern.
  • To make the above more intuitive, the DOM order has been changed so the tablist comes before the tabpanel. Visual order is unchanged.
  • Extra roles (nav/ol/li) have all been changed to divs because they introduce other issues. (nav needs to be labeled and role=tabpanel is not allowed on li).

Testing

Docs

added changeset and updated jsdoc.

@mayank99 mayank99 added this to the React 3.0 milestone Oct 11, 2023
@mayank99 mayank99 self-assigned this Oct 11, 2023
@mayank99 mayank99 force-pushed the mayank/carousel-a11y branch 6 times, most recently from 283af79 to b54e7a8 Compare October 11, 2023 20:52
@mayank99 mayank99 marked this pull request as ready for review October 11, 2023 20:58
@mayank99 mayank99 requested review from a team as code owners October 11, 2023 20:58
@mayank99 mayank99 requested review from gretanausedaite and r100-stack and removed request for a team October 11, 2023 20:58
@mayank99 mayank99 added the a11y Accessibility issues (keyboard navigation, color contrast, assistive technologies, semantics, etc) label Oct 11, 2023
@mayank99 mayank99 mentioned this pull request Oct 12, 2023
Open
23 tasks
@mayank99 mayank99 enabled auto-merge (squash) October 16, 2023 13:20
@mayank99 mayank99 merged commit 7d6eb2c into dev Oct 16, 2023
15 of 16 checks passed
@mayank99 mayank99 deleted the mayank/carousel-a11y branch October 16, 2023 13:30
@imodeljs-admin imodeljs-admin mentioned this pull request Oct 16, 2023
Merged
@imodeljs-admin imodeljs-admin mentioned this pull request Oct 23, 2023
Merged
@r100-stack r100-stack mentioned this pull request Nov 8, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@r100-stack r100-stack r100-stack approved these changes

@gretanausedaite gretanausedaite gretanausedaite approved these changes

Assignees

@mayank99 mayank99

Labels
a11y Accessibility issues (keyboard navigation, color contrast, assistive technologies, semantics, etc)
Projects
None yet
Milestone
React 3.0
Development

Successfully merging this pull request may close these issues.

Carousel: tab navigation breaks when slides have focusable elements
3 participants
@mayank99 @r100-stack @gretanausedaite