react-multi-carousel icon indicating copy to clipboard operation
react-multi-carousel copied to clipboard

Fix 233 accessibility tab key fast follow

Open tegaadigu opened this issue 3 years ago • 7 comments

This PR is a fast follow to https://github.com/YIZHUANG/react-multi-carousel/pull/252

Bug Fixes:

  1. Prevent KeyboardControl when inifinity props is set to avoid getting stuck in the carousel component (Accessibility)
  2. Replaced HTMLInputElement to HTMLElement as this prevented none-inputed elements from firing the goNext function when using tab
  3. Replaced e.keyCode with e.code as e.keyCode is deprecated.
  4. 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.
  5. 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)
  6. Added support for previous tab (Tab + Shift)

DEMO

ezgif-7-69bc013deb32

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

tegaadigu avatar May 26 '21 20:05 tegaadigu

@YIZHUANG Please review when you have the chance.

tegaadigu avatar Jun 02 '21 22:06 tegaadigu

@YIZHUANG ready for review

tegaadigu avatar Jun 08 '21 03:06 tegaadigu

@YIZHUANG awaiting feedback

tegaadigu avatar Jun 09 '21 18:06 tegaadigu

@YIZHUANG please review

tegaadigu avatar Jun 10 '21 22:06 tegaadigu

@YIZHUANG Please review

tegaadigu avatar Jun 11 '21 14:06 tegaadigu

@YIZHUANG please review - would like to get this fix in ASAP

tegaadigu avatar Jun 14 '21 17:06 tegaadigu

@YIZHUANG please review

tegaadigu avatar Jun 15 '21 21:06 tegaadigu