Switch

Example (a11y tier)

Import

import Switch from 'abaabil/switch'         // structure only

import Switch from 'abaabil/switch/styled'  // + CSS

import Switch from 'abaabil/switch/a11y'    // + label/description

Switch or checkbox?

A switch takes effect the moment you flip it. A checkbox is a value you are choosing, which some later action submits. If the control sits in a form with a Save button, it is a checkbox even if a switch would look nicer.

Why the role is in the normal tier

Every other component keeps ARIA out of its normal tier. This one does not, and the exception is deliberate. There is no native switch element, so role="switch" is the only thing that makes a switch a switch: it is the component's identity, the same kind of choice as Dialog reaching for <dialog> and Accordion reaching for <details>. Held back for the a11y tier, the styled tier would look exactly like a switch while announcing itself to a screen reader as a checkbox, which is a worse failure than the tier rule was protecting against. The wiring that genuinely is wiring, the label and the description, still waits for a11y.

The library's architecture tests encode this as a named, tested exception rather than a relaxed rule: switch is asserted to carry exactly one role and no aria-* attributes at all, and every other component is still asserted to carry neither.

No aria-checked, and no visible on/off text

The native checked property already exposes the state, so adding aria-checked would be a second copy of it, and a second copy is something that can disagree with the first.

For the same reason the component renders no "On" or "Off" label beside the control. A switch announces its own state, so adjacent state text means a screen reader says it twice. If you want it visible, render it yourself and mark it aria-hidden.