react-responsive-carousel

react-responsive-carousel copied to clipboard

Describe the bug When tabbing through my website, I am finding that I can tab into content that is inside slides that aren't visible. Meaning that I get a weird half and half view when I've tabbed into the button on the next slide.

To Reproduce Steps to reproduce the behavior:

1. Go to a page with a slider that has buttons within each slide.
2. Try to navigate the page with tabbing only.
3. Notice how the display looks wrong.

Expected behavior Should only be able to tab into content that is currently visible then use the keyboard nav or the visible pagination to change the slides.

Screenshots Had to cover a lot of the elements in the image due to NDA, but please note the blue border being around the 'slide selected' element and the red border around the not currently selected slide.

See how the browser has tried to tab into the next slide's button. (although the focus disappeared in the screenshot)

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

This problem can also be seen in this official example with Youtube videos. As you continue tabbing you end up controlling videos that aren't in the currently 'selected' slide, causing them to shift over and breaking the interaction. This makes the component inaccessible to keyboard users.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This is still happening and should not be closed.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Poor. This should not be stale. Bump!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.