react-multi-carousel
react-multi-carousel copied to clipboard
Fix 233 accessibility tab key fast follow
This PR is a fast follow to https://github.com/YIZHUANG/react-multi-carousel/pull/252
Bug Fixes:
- Prevent KeyboardControl when inifinity props is set to avoid getting stuck in the carousel component (Accessibility)
- Replaced HTMLInputElement to HTMLElement as this prevented none-inputed elements from firing the goNext function when using tab
- Replaced e.keyCode with e.code as e.keyCode is deprecated.
- Removed the need to check if Tabbed element is child of carouselItem as the eventListener is now bound to the listRef itself rather than the window.
- Reworked how to determine when moving next on tab (checked if tabbed target has any tab-able child element before proceeding to next carousel list)
- Added support for previous tab (Tab + Shift)
DEMO
Note: In Firefox, the Material UI card component trabs focus within the Card component. For testing modify the Card.tsx or HomePage.tsx to include tab-able elements without Material UI Card.
PR addresses the below issue:
https://github.com/YIZHUANG/react-multi-carousel/issues/233
https://github.com/YIZHUANG/react-multi-carousel/issues/242
@YIZHUANG Please review when you have the chance.
@YIZHUANG ready for review
@YIZHUANG awaiting feedback
@YIZHUANG please review
@YIZHUANG Please review
@YIZHUANG please review - would like to get this fix in ASAP
@YIZHUANG please review