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

Victory Native Turns 40

November 17, 2023
Victory Native XL is a ground-up rewrite of Victory Native that diverges from the Victory Web API to leverage modern tooling in the React Native space to offer peak performance and flexibility.

Empowering Users: Developing Accessible Mobile Apps using React Native

June 26, 2023
Robust technical accessibility strategies and best practices we implemented for a mobile voting application using React Native.

Build a Text Summarizer in 100 Lines of Code with Vercel AI SDK

June 16, 2023
Vercel recently announced their AI SDK. I wanted to see just how easy it was to get up and running with this Vercel AI SDK and build something simple, but with some potential usefulness.