Nuka Carousel Gets Accessibility Updates, New Features

December 12, 2018

Over the past couple of months, we have made some exciting new changes to Nuka Carousel. Along with fixing several overdue issues, we are most excited about fixing accessibility issues with the carousel component. You can now use your keyboard to control the slides and toggle autoplay. Screen readers will also let you know which slide you are currently viewing. In rare cases, the accessible keyboard controls could interfere with existing functionality, such as when Nuka resides alongside forms or other input fields. We have added the disableKeyboardControls prop as a stop-gap measure for these scenarios.

As for new features and bug fixes, there is now a slide-visible class added to all currently visible slides. This can be helpful when adding custom CSS effects to slides. We have started work on removing lifecycle methods that have been deprecated in React, with more updates coming soon. The pauseOnHover prop now works when dragging is disabled, and while it wasn’t possible to click with a modifier present before, now it is. A withoutControls prop has been added which allows you to disable all eight of Nuka’s positional render control props at once.

While there is still much in progress for Nuka, we are happy to have closed some long-standing issues and requests to make the carousel more useful and effective for our community.

If you would like more information about any of these features, you can read about the most recent releases in the Nuka changelog.md, and of course, if you have feedback or would like to contribute to the next phase of Nuka Carousel, please visit the repo here!

Related Posts

Ranked Choice Voting: The Mobile Challenge

November 19, 2024
While working on VoteHub, a mobile absentee ballot solution for U.S. elections, I was tasked with designing and prototyping an interface for a relatively new election contest type, rapidly gaining attention and adoption, called Ranked Choice Voting (RCV).

Empowering Users: Developing Accessible Mobile Apps using React Native

July 2, 2024
Robust technical accessibility strategies and best practices we implemented for a mobile voting application using React Native.

Seamless Transitions: From Native to React Native

June 4, 2024
React Native, developed by Meta, allows developers to use a single codebase to create apps that run on both iOS and Android