Product guide · Accessibility
Accessibility
Monoline supplies accessible component mechanics where the library owns them. Your product still owns names, content, page structure, contrast after customization, and end-to-end testing.
Behavior built into the library
The component determines the interaction model; the application supplies context-specific copy and wiring.
Dialog contains focus and makes the page inert; both primitives handle Escape, outside interaction, portals, and focus restoration.
Loading sets aria-busy and an unavailable state. Icon-only buttons still need an aria-label from the caller.
Exposes role=switch and aria-checked while retaining keyboard activation through a native button.
Uses a radiogroup with radio items and supports arrow-key movement between enabled options.
The controls expose their expanded state, active choice, arrow-key movement, typeahead, selection, dismissal, and focus return.
Checked and selected state stays available to assistive technology while labels remain clickable and keyboard navigation follows the expected pattern.
Toast uses a status region. Progress publishes its range and current value when progress is determinate.
Shared accessibility defaults
Focus
Visible keyboard focus
The theme applies one token-backed focus ring to links, buttons, inputs, selects, textareas, and explicit tabindex targets.
Motion
Reduced-motion fallback
When reduced motion is requested, theme utilities shorten animations and transitions and remove card image transforms.
What your application must provide
A reusable component cannot infer the meaning of an icon or validate the quality of your content.
- Give icon-only controls a concise accessible name.
- Associate every form control with a visible label or aria-label.
- Keep headings in document order and use landmarks for page regions.
- Recheck contrast after overriding semantic color tokens.
- Test real flows with a keyboard and at least one screen reader.
import { Button } from "@chitrank2050/monoline-ui/button"
export function CopyLinkButton() {
return (
<Button variant="secondary" icon aria-label="Copy page link">
<CopyIcon aria-hidden="true" />
</Button>
)
}