Skip to content

Fails to maintain accessibility consistency for keyboard and screen reader users. #858

@PeeyushAgrawal

Description

@PeeyushAgrawal

When navigating through slides using keyboard tabbing, the Tiny‑Slider does not properly update the slider state (dots, next/prev button enable/disable state). The slider appears to function correctly visually when clicked via mouse, but fails to maintain accessibility consistency for keyboard and screen reader users.

Steps to Reproduce

  1. Initialize a basic Tiny‑Slider with multiple slides (e.g., 5 slides visible 1 at a time).
  2. Use keyboard navigation (Tab key) to move focus through slides: Start from the first slide and keep pressing Tab to move focus sequentially across all slides.
  3. Observe the following issues:

Actual Behavior (Issues Observed)

Issue 1 – Dot Navigation Not Updating

  • As you tab through slides, the dot indicator (pagination) remains stuck at the first dot.
  • Even if the focus is on the last slide, the active dot is still the first one.

Issue 2 – Next/Prev Button State Incorrect

  • Even when the focus is on the last slide, the Next button remains enabled and the Prev button remains disabled (initial state).
  • Slider state is not syncing with keyboard navigation.

Issue 3 – Focus Moves Out of Slider Instead of going to next/prev button

  • When focus reaches the last slide and you press Tab again, the focus moves out of the slider completely.
  • Expected Behavior: After the last slide, the focus should move to the prev button, and if again tab clicked then only exit from the slider

Issue 4 – No Proper Accessibility Handling

  • The slider does not update aria-selected, aria-hidden, or tabindex attributes dynamically when tabbing through slides.
  • This creates confusion for screen reader users as the visual slide and accessibility state are out of sync.

Expected Behavior

  • Dot indicator should update to reflect the currently focused slide.
  • Next/Prev buttons should enable/disable correctly based on the slide currently in focus.
  • Tabbing should follow natural focus order:
  • After the last slide → Next button
  • After Next button → Out of the slider (or loop back based on implementation choice)
  • ARIA attributes & tabindex should dynamically update to match the visible/active slide for better accessibility support.

Environment

  • Tiny‑Slider Version: 2.9.4
  • Browser(s): Chrome 138
  • OS: macOS
  • Assistive Technology: Keyboard only (tested with Tab key)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions