search

YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

Fix 233 accessibility tab key fast follow #260

Open tegaadigu opened 3 years ago

tegaadigu commented 3 years ago

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 commented 3 years ago

@YIZHUANG Please review when you have the chance.

tegaadigu commented 3 years ago

@YIZHUANG ready for review

tegaadigu commented 3 years ago

@YIZHUANG awaiting feedback

tegaadigu commented 3 years ago

@YIZHUANG please review

tegaadigu commented 3 years ago

@YIZHUANG Please review

tegaadigu commented 3 years ago

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

tegaadigu commented 3 years ago

@YIZHUANG please review