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

Keyboard navigation is not working properly, Also position of arrow changes/becomes hidden on keyboard navigation using tab key. #430

Open gautam1109 opened 2 months ago

gautam1109 commented 2 months ago

Describe the bug Keyboard navigation is not working properly. Also arrow moves while doing keyboard navigation and finally becomes invisible. To Reproduce Steps to reproduce the behavior: You can replicate the bug in this link: https://react-multi-carousel.surge.sh/?selectedKind=Carousel&selectedStory=With%20partially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel Steps:

  1. Use the keyboard to navigate to Carousel.
  2. As soon as navigation moves to the next page, Arrow position change. (This is a bug)
  3. Also while navigating to the last element in the page. Then item does not come in focus and move to the left.
  4. Dots also do not move properly when we move the items using keyboard.
  5. Shift tab does not work to move the dots to previous page.

Expected behavior

  1. Tab should work properly with Carousel item
  2. Shift tab should work properly on Carousel item
  3. If dots are being used. It should shift the page when we move item using keyboard.
  4. Position of Arrow should not change.

Screenshots CHeck the position of arrow. (https://react-multi-carousel.surge.sh/?selectedKind=Carousel&selectedStory=With%20partially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) Keep moving Carousel item: Now arrow become invisible. https://react-multi-carousel.surge.sh/?selectedKind=Carousel&selectedStory=With%20partially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Additional context Add any other context about the problem here.

Reproduction (https://react-multi-carousel.surge.sh/?selectedKind=Carousel&selectedStory=With%20partially%20visibie%20on%20next%20items&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)