Nuka Carousel Gets Accessibility Updates, New Features
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!