search

FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
https://commerce.nearform.com/open-source/nuka-carousel
Other
3k stars 596 forks source link

Slider frame tabIndex accessibility issues #982

Closed parkersweb closed 1 year ago

parkersweb commented 1 year ago

We've recently had an external accessibility audit on a site built with lots of nuka-carousel.

An issue they're currently failing us on is that the slider frame container has tabIndex=0 applied to it - which is considered a fail as it enables the element to receive focus without being interactive.

That sounds logical - but does anyone know why tabIndex was added to that element?

fritz-c commented 1 year ago

I'm assuming it was put there for the case where enableKeyboardControls is set to true. Maybe we should set tabIndex={-1} when enableKeyboardControls is not true.

For the time being, maybe you could enable keyboard controls to pass your audit? I'm not quite sure why the component doesn't have them on by default.

parkersweb commented 1 year ago

Ah - thanks @fritz-c - I did wonder if that was the original intent. Enabling keyboard controls is a good suggestion which we might use to pass the audit - in the meantime I've submitted a PR to make that attribute conditional on enableKeyboardControls.