Skip to content

Conversation

@abduelmorsi
Copy link
Contributor

Title
Exclude invisible slides from keyboard focus (fix #521)

Summary

  • add tabindex="-1" to any Carousel slide that’s either cloned or outside the current visibleRange so hidden items can’t be tabbed
  • keep the existing aria-hidden behavior for clones and reuse the new tab logic for all hidden slides
  • extend integration coverage with two keyboard-accessibility specs (invisible slides + cloned slides) and refresh snapshots

Related Issues

pnpm test
pnpm build

…9k#521)

Prevent invisible carousel slides from receiving keyboard focus via tab
navigation by setting tabindex="-1". This addresses an accessibility issue
where aria-hidden slides could still be focused, causing confusion for
keyboard and assistive technology users.

Changes:
- Add tabindex="-1" to all non-visible slides (those outside visibleRange)
- Add tabindex="-1" to all cloned slides (used in wrapAround mode)
- Add test cases to verify invisible and cloned slides cannot be tabbed to
- Update snapshots to reflect new tabindex attribute

This ensures that only visible carousel items are reachable via keyboard
navigation, providing a better experience for keyboard and screen reader users.

Fixes ismail9k#521
@ismail9k
Copy link
Owner

Thank you for your contribution 👍

@ismail9k ismail9k merged commit c8c31a9 into ismail9k:master Oct 22, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Exclude invisible slider items from tab navigation

2 participants