Skip to content

Carousel Arrows Accessibility Updates to Support Label Props #174

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

Merged

Conversation

NRohrer
Copy link
Contributor

@NRohrer NRohrer commented Mar 30, 2021

Currently the arrow buttons of the Carousel component are causing accessibility issues because the buttons are considered empty. There is no text or description that would allow a user without sight to understand the context and purpose of the button.

This update adds the ability to pass in 2 new props to the CarouselArrows component, specifically a "leftArrowLabel" and a "rightArrowLabel" prop and sets them as the aria-label attribute of the left and right arrows, respectively.

If no values are passed for these props, they will simply have the default values of "Previous" and "Next", giving the end user a better understanding of what the buttons do and ensuring that the buttons are never empty.

@dijs dijs merged commit 4d6d769 into storefront-foundation:master Apr 1, 2021
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.

2 participants