storefront-foundation / react-storefront

React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor (contributors@reactstorefront.io).
https://www.reactstorefront.io
Other
796 stars 190 forks source link

Carousel Arrows Accessibility Updates to Support Label Props #174

Closed NRohrer closed 3 years ago

NRohrer commented 3 years ago

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.