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
- Open the Carousel component demo.
- Use the Tab key to navigate through interactive elements on the page.
- Observe that the carousel indicators cannot receive keyboard focus.
- Attempt to activate an indicator using Enter or Space.
- Notice that slide navigation only works via mouse clicks, dragging, or touch interactions.
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
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