Component library

Disclosure · aria-expanded

Stacked sections that expand and collapse independently. The foundational aria-expanded disclosure pattern that a dozen other widgets build on.

Tabs · roving tabindex + arrow keys

One panel visible at a time, chosen from a row of tabs. Teaches the roving-tabindex idea and arrow-key navigation that trip up most hand-rolled versions.

Dialog · focus trap + Escape + focus return

A dialog that takes over the page until dismissed. The pattern where a broken implementation strands keyboard users most visibly — focus trap, Escape, and returning focus are all things static markup cannot promise.

Tooltip · role=tooltip, aria-describedby, Escape to dismiss

A supplementary label revealed on hover and focus, dismissible with Escape, never the only place critical information lives. The pattern where showing it on hover alone is the single most common way tooltips break for keyboard users.

Combobox · aria-expanded + aria-activedescendant

A text input paired with a filterable listbox popup — the most intricate composite widget, and the one autocomplete UIs most often break. The pattern where the highlighted option is not really focused: DOM focus stays in the text field the whole time, and aria-activedescendant is what tells a screen reader where you are.

Menu · roving focus, type-ahead

A button that opens a menu of actions, navigable with the arrow keys and closable with Escape. The pattern where the highlighted item is only a CSS state: real DOM focus moves onto the menu items themselves (roving tabindex), the opposite arrangement from this library's Combobox.

Listbox · single-select, roving focus, type-ahead

A collapsible single-select listbox: a button that opens a popup role="listbox" for cases where the native <select> cannot be styled to requirements — the native element stays the honest first choice everywhere else.

Navigation landmark · aria-current, CSS separators

An ordered trail of ancestor links inside a named nav landmark, with the current page marked by aria-current and left unlinked. The pattern where typing the separator into the markup quietly makes every level noisier to listen to.

Navigation landmark · aria-current=“page”

Page-by-page navigation of a long list, with the current page marked and controls that read clearly out of context.

Live region · role=status / role=alert

A transient notification announced through a polite or assertive live region without stealing focus. The ARIA live-region pattern, where the hard part is invisible: the region has to exist before the message does.

Switch · role=switch, aria-checked

An on/off toggle distinct from a checkbox, reporting its state as “on” or “off”.

Table semantics · scope, sortable headers

A sortable, semantic table with proper header association and aria-sort, readable cell by cell.

Labelling · error text + aria-describedby

A labelled input with programmatically associated help and error messages, and errors announced without a focus jump.