Context
In PR #49, the toggle switches in the stimulus-components-app example use <div> elements with click handlers, which blocks keyboard interaction for users who navigate without a mouse.
Requested by: @stofu1234
Original discussion: #49 (comment)
Goal
Convert the toggle switches to use semantic <button> elements with:
role="switch"aria-checked attribute that updates when toggled- Keyboard support (Enter/Space keys)
This enhancement will make the toggle components accessible to keyboard-only users and screen reader users.
Scope
Affects three toggle instances in examples/stimulus-components-app/index.html:
- Notifications toggle
- Dark Mode toggle
- Show Details toggle
The toggle controller (toggle_controller.rb) should be updated to maintain aria-checked state in sync with the visual state.
Context
In PR #49, the toggle switches in the stimulus-components-app example use
<div>elements with click handlers, which blocks keyboard interaction for users who navigate without a mouse.Requested by: @stofu1234
Original discussion: #49 (comment)
Goal
Convert the toggle switches to use semantic
<button>elements with:role="switch"aria-checkedattribute that updates when toggledThis enhancement will make the toggle components accessible to keyboard-only users and screen reader users.
Scope
Affects three toggle instances in
examples/stimulus-components-app/index.html:The toggle controller (
toggle_controller.rb) should be updated to maintainaria-checkedstate in sync with the visual state.