Skip to content

[BUG]: Carousel indicators are not keyboard accessible #976

@Sarthak-Bhagat2006

Description

@Sarthak-Bhagat2006

While testing the Carousel component locally, I noticed that the slide indicators are rendered as clickable div elements. They work correctly with mouse interactions, but they do not appear to be accessible through keyboard navigation.

Current behavior

  • Indicators can be clicked with a mouse.
  • Indicators cannot be focused using the Tab key.
  • Indicators cannot be activated using Enter or Space.
  • Carousel navigation appears to rely on mouse clicks, dragging, or touch gestures.

Expected behavior

Keyboard-only users should be able to navigate the carousel using the indicators and activate them through standard keyboard interactions.

Additional context
Inspecting the rendered DOM shows that the indicators are currently rendered as:

<div class="carousel-indicator active"></div>
<div class="carousel-indicator inactive"></div>

Would improving keyboard accessibility for the carousel indicators be considered within the scope of this component?

Steps to reproduce

  1. Open the Carousel component demo.
  2. Use the Tab key to navigate through interactive elements on the page.
  3. Observe that the carousel indicators cannot receive keyboard focus.
  4. Attempt to activate an indicator using Enter or Space.
  5. Notice that slide navigation only works via mouse clicks, dragging, or touch interactions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions