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.

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

Improve Carousel Accessibility #1218

Merged
merged 5 commits into from
Mar 3, 2023
Merged

Improve Carousel Accessibility #1218

merged 5 commits into from
Mar 3, 2023

Conversation

claviska
Copy link
Member

@claviska claviska commented Mar 1, 2023

This PR improves the accessibility of the experimental <sl-carousel> component so it announces more like this one.

  • Added keyboard support for Left, Right, Up, Down, Home, and End
  • Removed aria-live because it interrupts the virtual cursor, making it harder to navigate (the slide is announce when the virtual cursor lands on it)
  • Removed the <nav> elements to prevent an extra start/end step for screen reader users
  • Added a localized "Carousel" label to the carousel
  • Added a localized "Slide {num}" label to slides

@claviska claviska added the a11y Anything relating to accessibility. label Mar 1, 2023
@claviska claviska self-assigned this Mar 1, 2023
@vercel
Copy link

vercel bot commented Mar 1, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
shoelace ✅ Ready (Inspect) Visit Preview Mar 2, 2023 at 2:42PM (UTC)

@claviska claviska mentioned this pull request Mar 1, 2023
6 tasks
@claviska
Copy link
Member Author

claviska commented Mar 3, 2023

Moving forward with this. We can continue to improve on this while it's experimental.

@xdev1
Copy link
Contributor

xdev1 commented Mar 27, 2023

@claviska May I ask whether it was intentional or just by accident that the translation key slide_num uses snake_case while all other translation keys use camelCase?

@claviska
Copy link
Member Author

May I ask whether it was intentional or just by accident that the translation key slide_num uses snake_case while all other translation keys use camelCase?

That seems to be an oversight. Fixed in 23a7f65.

@claviska claviska deleted the carousel-a11y branch June 6, 2023 13:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Anything relating to accessibility.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants