Pause carousel movement using keyboard for accessibility

Learus / react-material-ui-carousel

A Generic carousel UI component for React using Material UI.

MIT License

552 stars 220 forks source link

Pause carousel movement using keyboard for accessibility #137

Closed ychoi0822 closed 2 years ago

ychoi0822 commented 2 years ago

Hi :)

For the carousel to be accessible:

Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.
All functionality, including navigating between carousel items, must be operable by keyboard. https://www.w3.org/WAI/tutorials/carousels/

We can pause the carousel movement on mouse hover over but not when the keyboard focus is on the content inside the carousel.

Is this something that can be enhanced for better accessibility? Thanks.

Learus commented 2 years ago

That is a great idea. What I could do is figure out a way to track focus on any of the buttons, wrappers, or indicators of the carousel and pause auto-play accordingly. Will try to pop some changes on the next update.

Learus commented 2 years ago

Feature implemented in all releases.

^2.3.11
^2.3.10-mui5
^3.2.0