Components

Browse all accessibility patterns available for Web / React.

Component	Summary
Accordion	A set of show/hide sections with heading-wrapped buttons controlling associated panels via aria-expanded (and optionally aria-controls / region).
Avatar	Image, initials, or glyph standing for a person or entity, where the accessible name identifies who is represented and stays the same whichever branch of the fallback chain renders.
Badge	Small non-interactive indicator annotating a host element with a count or a status, where the meaning is folded into an accessible name and read on arrival rather than announced on change.
Button (Basic)	Native button that triggers an action. Supports text-only, icon+text, and icon-only labeling patterns.
Button (Toggle)	Two- or three-state button that toggles between pressed and not pressed using aria-pressed.
Carousel (Dots)	Horizontally-advancing carousel (aka hero or marquee carousel) with 'dot' navigation, prev/next buttons, and pause behavior.
Carousel (Thumbnails)	Horizontally-advancing carousel (aka hero or marquee carousel) with thumbnail navigation, prev/next buttons, and pause behavior.
Checkbox	A single binary checkbox for an independent on/off choice submitted with a form. Uses a native <input type="checkbox"> with an associated <label>, or role="checkbox" with aria-checked when a native input cannot be used.
Checkbox Group	A set of related checkboxes that together answer one question. The group is named with <fieldset> and <legend>, or role="group" with aria-labelledby, and each option is an independent native <input type="checkbox">.
Collection Row	Horizontal product shelf with a heading, list semantics, and Prev/Next paging that moves focus to newly revealed items.
Combobox (Autocomplete)	An editable text input that filters a listbox of options as the user types; uses role="combobox" with aria-autocomplete, aria-expanded, aria-controls, and aria-activedescendant while DOM focus stays on the input.
Dialog (Basic)	User-initiated blocking dialog. Uses the native <dialog> element with .showModal() so the browser handles focus trap, background inertness, Escape dismissal, focus restoration, and top-layer rendering.
Disclosure	A button that shows and hides an associated content region; uses aria-expanded on the trigger and aria-controls to the region, with DOM show/hide.
Grid (Channel Guide)	Interactive channel guide grid with one Tab stop and arrow-key navigation across channels and time slots.
Link	Native link for navigation using <a href>. Supports optional context in the accessible name, including "opens in new tab/window/dialog".
Listbox	An always-visible list of selectable options using role="listbox" and role="option", supporting single or multiple selection with roving tabindex or aria-activedescendant.
Menu	A button that opens a menu of commands using role='menu' and role='menuitem', with roving tabindex focus management and the full menu keyboard contract.
Menubar	A persistent horizontal bar of application command menus using role="menubar", role="menu", and role="menuitem", for desktop-application command surfaces only, never site navigation.
Navigation (Flat List)	A non-modal header navigation pattern that supports top-level links and optional sub-menus. Uses disclosure-style toggles (buttons) with aria-expanded/controls and Tab-based navigation (no roving focus / no role=menu).
Navigation (Disclosure)	A single-trigger, non-modal dropdown that reveals a short list of navigation links and optional actions, using a native button with aria-expanded plus DOM show/hide, and never role="menu".
PIN Input	A fixed-length numeric code entered across segmented boxes, implemented as a single <input> whose expected length is carried in a description rather than by the box count, with the boxes and any group separator rendered as aria-hidden presentation.
Popover	A non-modal overlay anchored to its trigger; uses role="dialog" with an accessible name, moves focus in on open and restores it on close, but does not trap focus or inert the background.
Progress Bar	Non-interactive indicator of a process advancing toward completion, using the native <progress> element or role="progressbar" with aria-valuenow, and announcing completion through a separate live region rather than on every value change.
Select (Basic)	A native select element styled with CSS, the default single-value form control; retains native keyboard, mobile, dismissal, and assistive-technology behavior.
Select (Custom Style)	A custom-styled form select that matches native <select> behavior using a button trigger + listbox popup, and a visually hidden native <select> for form submission and browser autofill.
Separator	Static line separating sections of content, rendered as an hr and hidden from assistive technology unless the line itself is the only thing marking the boundary.
Spinner	Indeterminate loading glyph that carries no semantics of its own, where the graphic is decorative and the control or region hosting it reports the wait through aria-busy and a separate live region.
Splitter	Moveable divider between two panes that changes their relative size, using a focusable role="separator" with aria-valuenow, aria-controls, and arrow-key movement.
Switch	Two-state on/off control representing a persistent setting. Uses role="switch" with aria-checked, or native checkbox semantics when applicable.
Tabs	Same-page sections where one panel is visible at a time, using role="tablist", role="tab", and role="tabpanel" with aria-selected, a roving tabindex, and arrow-key traversal.
Toast	Temporary, non-blocking status message announced via live region. May include optional dismiss control. Disappears automatically.
Tooltip	A brief supplementary text label shown on hover and focus of its trigger; uses role="tooltip" referenced by aria-describedby, and is hoverable, dismissible, and persistent.