Each component below is tested against the WCAG 2.2 success criteria that apply to it. The list comes from the configuration of our automated conformance suite, which runs on every change: it renders the component’s documented examples in Chromium, checks the criteria with axe-core where a rule exists, and some of the others with scripted keyboard and focus steps. A criterion the component meets fully or in part fails the build when it regresses, where axe-core or a scripted step checks it; the others are reviewed by hand.
Conformance is a property of a whole page. A component that meets a criterion keeps meeting it only with the markup and texts its documentation asks for, and criteria marked as your responsibility depend on how you use the component. See the overview for what the components take care of and what stays with your markup.
Statuses
| Status | Meaning |
|---|
| Built in | Handled by the component out of the box. |
| Partially handled | The component helps, but you must finish the job. |
| Your responsibility | Your app must satisfy this — the component can’t enforce it. |
Summary
Components missing from this list have not been added to the conformance suite yet. Their pages still describe their accessibility.
Components
Accordion
Accordion documentation
| Criterion | Level | Status | Notes |
|---|
| 2.1.1 Keyboard | A | Built in | Each header is a native summary element, so Enter and Space toggle its panel and Tab reaches every header. Arrow, Home and End keys do not move between headers. |
| 4.1.2 Name, Role, Value | A | Partially handled | The browser exposes each header and its expanded state from the native details and summary elements. Known gap: the header is not exposed as a button with aria-controls, and the panel is not a labelled region. |
| 1.3.1 Info and Relationships | A | Partially handled | A bare summary element is not a heading. Wrap the label in an h2–h6 inside the summary, as the examples do, so the sections stay reachable by heading navigation. |
| 2.4.7 Focus Visible | AA | Built in | The header draws a focus ring on :focus-visible, so keyboard focus is visible while a mouse click leaves it alone. |
| 1.4.3 Contrast (Minimum) | AA | Built in | Header text meets the contrast minimum in both the closed and the open state. |
Alert
Alert documentation
| Criterion | Level | Status | Notes |
|---|
| 1.4.3 Contrast (Minimum) | AA | Built in | Alert text meets the contrast minimum against each contextual background. |
| 4.1.3 Status Messages | AA | Your responsibility | The docs examples carry role=alert; dynamically injected alerts must add it (or an aria-live region) themselves. |
| 4.1.2 Name, Role, Value | A | Partially handled | The dismiss button gets its accessible name from the aria-label you give it, as in the examples. |
Autocomplete
Autocomplete documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The input gets role=combobox with aria-autocomplete, aria-expanded and aria-haspopup, plus aria-controls while the dropdown is open; the dropdown is a listbox of role=option items carrying aria-selected/aria-disabled. |
| 4.1.3 Status Messages | AA | Partially handled | When searchNoResultsLabel is set, the "no results" message is a role=status region inside the open list, so it is announced without moving focus. Without it, the list closes when nothing matches. |
| 2.1.1 Keyboard | A | Partially handled | Arrow keys move through the options, Enter picks one, Esc closes the list and Tab moves on, or accepts the inline hint when hints are shown. Home, End and Space stay with the text in the input. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Give the input a visible label, pointed at it through the id option, or an aria-label; a placeholder is not a label. |
Calendar
Calendar documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The calendar is a role=grid of role=gridcell cells, so a day, month, quarter or year can be marked selected. Each day cell carries an aria-label with its full date unless a custom renderDayCell is used, month, quarter and year cells are named by their text, today's cell carries aria-current="date", and a week row carries aria-selected when whole weeks are selectable. |
| 1.3.1 Info and Relationships | A | Built in | Rows and cells keep their grid roles in every panel, so the months, quarters and years views read as a grid rather than a bare table. |
| 2.1.1 Keyboard | A | Partially handled | Arrow keys walk the grid, Home and End jump to the edges of the row, Page Up and Page Down change the period, and Enter picks. |
Chip input documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The container carries no invalid ARIA (disabled/readonly semantics live on the native inner input); chip remove buttons are labelled via ariaRemoveLabel. |
| 3.3.2 Labels or Instructions | A | Built in | A .chip-input-label <label> is wired to the ghost input via a generated `for` when it lacks one. |
| 2.1.1 Keyboard | A | Partially handled | Enter adds a chip. Backspace or Delete in an empty input, or the arrow toward the chips with the caret at the start, moves to the last chip; arrow keys and Home/End move between chips, and Backspace or Delete removes the focused one. |
| 4.1.3 Status Messages | AA | Built in | Adding and removing chips is announced in a visually hidden polite live region. |
Chip set
Chip set documentation
| Criterion | Level | Status | Notes |
|---|
| 2.1.1 Keyboard | A | Partially handled | Arrow keys and Home/End move focus across chips, Enter or Space toggles selection, and Backspace or Delete removes a chip. |
| 4.1.2 Name, Role, Value | A | Built in | A selectable set is exposed as a horizontal listbox of role=option chips (aria-selected/aria-disabled valid there); a standalone selectable chip is a toggle button with aria-pressed; a non-selectable set is a role=group, which also legitimizes the documented aria-label. |
| 1.3.1 Info and Relationships | A | Built in | The listbox contains only option children; additions and removals are announced through the live region of the page, not from inside the set. |
| 4.1.3 Status Messages | AA | Built in | Adding and removing chips is announced in a visually hidden polite live region; the wording comes from ariaAddedAnnouncement and ariaRemovedAnnouncement. |
Combobox
Combobox documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The toggle is a button with aria-haspopup=listbox and aria-expanded that drives the list through aria-activedescendant; the list is a role=listbox of role=option items with aria-selected. The hidden select that submits the value is kept out of the accessibility tree. |
| 1.3.1 Info and Relationships | A | Built in | The opened listbox contains only option and group children — the caret and the hidden input sit outside it. |
| 2.1.1 Keyboard | A | Partially handled | Enter, Space, ArrowDown or ArrowUp opens the list. Arrow keys, Home/End and typing a letter move through it, Enter or Space picks, Esc closes it and Tab moves on. With a search field, Home, End and Space stay with the search text. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Name the toggle with a visible label or aria-label; a placeholder is not a label. |
Context Menu documentation
| Criterion | Level | Status | Notes |
|---|
| 2.1.1 Keyboard | A | Built in | Shift+F10 and the Menu key open the menu at the focused trigger and move focus into it; arrow keys, Enter (Space too on button items), Home/End, Esc and Tab operate it. |
| 2.1.2 No Keyboard Trap | A | Built in | Esc closes the menu and returns focus to the trigger; Tab leaves the menu and closes it. |
| 2.4.7 Focus Visible | AA | Built in | A focused menu item gets the same highlighted background as a hovered one. |
| 4.1.2 Name, Role, Value | A | Your responsibility | Give a non-interactive trigger tabindex="0" and a nearby hint that a context menu exists; add role='menu'/'menuitem' yourself for a true ARIA menu widget. |
Date Picker
Date Picker documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The toggle carries aria-haspopup=dialog and aria-expanded, plus aria-controls while the panel is open, and the panel is a role=dialog with aria-modal. With a time part, the dialog holds the calendar and the time controls together. |
| 1.3.1 Info and Relationships | A | Built in | The open panel is a grid of gridcells; the navigation buttons sit outside it. |
| 2.1.1 Keyboard | A | Partially handled | Alt+ArrowDown or F4 opens the panel, Esc closes it, and the arrow keys walk the calendar. |
| 2.4.3 Focus Order | A | Built in | The panel is a modal dialog, so Tab cycles inside it and never lands back on the field. Closing it with Esc, or by picking a day when there is no time part, returns focus to where it was when the panel opened: the field or its toggle. |
Date Range Picker
Date Range Picker documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | Both calendars open under one toggle that carries aria-haspopup=dialog and aria-expanded, plus aria-controls while the panel is open. The range is a group of two date fields whose parts are spinbuttons, and the separator icon is hidden from assistive technology. |
| 1.3.1 Info and Relationships | A | Built in | Each calendar in the open panel is a grid of gridcells. |
| 2.1.1 Keyboard | A | Partially handled | Alt+ArrowDown or F4 opens the panel, Esc closes it, and the arrow keys walk both calendars. |
List Box
List Box documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The list is a role=listbox with aria-multiselectable, aria-disabled and aria-busy following the options; every option is a role=option with aria-selected unless selection is off. A companion field gets aria-controls and aria-activedescendant while the list is on the page, and the search input is named by ariaSearchLabel. |
| 1.3.1 Info and Relationships | A | Your responsibility | Known gap: two kinds of children break the listbox's required-children rule: a group label made selectable with sectionsSelectable is a role=button inside the list, and the empty-state message stays inside the list when a filter hides every option. |
| 2.1.1 Keyboard | A | Partially handled | Arrow keys, Home/End, Space, Shift and Ctrl ranges and Ctrl+A operate the list, typing a letter jumps to a matching option, and the highlighted option is kept in view. |
Menu documentation
| Criterion | Level | Status | Notes |
|---|
| 2.1.1 Keyboard | A | Built in | Arrow keys move between items, Enter activates one (Space too when the item is a button, and both open a submenu), Home and End jump to the first and last item, Esc closes the menu and returns focus to the toggle, and Tab moves on. |
| 1.4.13 Content on Hover or Focus | AA | Built in | Submenus opened on hover stay open while hovered and dismiss with Esc, with a grace delay for diagonal movement. |
| 2.4.7 Focus Visible | AA | Built in | A focused menu item gets the same highlighted background as a hovered one. |
| 4.1.2 Name, Role, Value | A | Your responsibility | Menus are intentionally generic — add role='menu'/'menuitem' and aria-* yourself when building a true ARIA menu widget. |
Modal
Modal documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Partially handled | The modal is a native dialog element opened as a modal dialog unless the modal option is false, so the browser exposes its role and makes the rest of the page inert while it is open. Name it with aria-labelledby pointing at its title and give the dismiss button an accessible name. |
| 2.4.3 Focus Order | A | Built in | Opening moves focus into the dialog, and the rest of the page is inert while it is open, so Tab stays within the dialog. Closing a modal opened from a data-coreui-toggle trigger returns focus to that trigger. |
| 2.1.1 Keyboard | A | Built in | Esc closes the dialog unless the keyboard option is set to false. |
| 2.1.2 No Keyboard Trap | A | Built in | Esc and the dismiss button close the dialog and make the page interactive again, so focus is never trapped. |
Multi Select
Multi Select documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The toggler is a role=combobox named from its label, with aria-expanded and aria-haspopup=dialog, and aria-controls pointing at the role=dialog panel while it is open; the search input points at the list. The options are a role=listbox (multiselectable when multiple selection is on) of role=option items, and the native select is hidden from assistive technology. |
| 4.1.3 Status Messages | AA | Built in | Removing values from the field, with a chip's remove button, the clear button or Backspace, is announced in a visually hidden polite live region. Choosing options in the list is conveyed by each option's selected state. |
| 2.1.1 Keyboard | A | Partially handled | Enter or ArrowDown opens the panel; arrow keys and Home/End move through the options, Space or Enter selects, Esc closes the panel and Tab moves on. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Name the control with a label pointing at the select, or aria-label or aria-labelledby on the select; a placeholder is not a label. |
Offcanvas
Offcanvas documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Partially handled | The offcanvas is a native dialog element. With a backdrop, or with page scrolling off, it opens as a modal dialog and the rest of the page is inert; with backdrop: false and scroll: true it opens non-modally and the page stays interactive. Name it with aria-labelledby and give the dismiss button an accessible name. |
| 2.1.1 Keyboard | A | Built in | Esc closes the panel unless the keyboard option is set to false. |
| 2.1.2 No Keyboard Trap | A | Built in | Esc and the dismiss button close the panel and make the page interactive again, and focus returns to the data-coreui-toggle trigger that opened it, so focus is never trapped. |
One Time Password (OTP) Input documentation
| Criterion | Level | Status | Notes |
|---|
| 3.3.8 Accessible Authentication (Minimum) | AA | Built in | Pasting a full code, or receiving it from SMS autofill or a password manager, fills every field at once. The first field carries autocomplete="one-time-code", so autofill targets the code as one entry. |
| 1.3.5 Identify Input Purpose | AA | Built in | The first field carries autocomplete="one-time-code", and every field gets inputmode="numeric" when the code is numeric, so browsers and autofill know what the input is for. |
| 3.3.2 Labels or Instructions | A | Built in | Each digit input carries its own aria-label (default 'Digit N of M' via the ariaLabel config). |
| 4.1.2 Name, Role, Value | A | Built in | The container is a role=group and each field is a native input with its own name ("Digit N of M" by default), recomputed from the number of fields. Name the group with aria-label or aria-labelledby so it reads as one code entry. |
| 2.2.1 Timing Adjustable | A | Your responsibility | Give codes a generous expiry (≥ ~60s) for cognitive and motor needs. |
| 3.3.7 Redundant Entry | A | Your responsibility | Don't force re-entry of a code already provided in the same flow. |
Password Input documentation
Password Strength
Password Strength documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.3 Status Messages | AA | Built in | The label, warning and suggestions share one role=status/aria-live=polite region, so the verdict is announced as a single polite message. Debouncing keeps the region from updating on every keystroke. |
| 1.4.1 Use of Color | A | Built in | Strength is carried by the text label, not by the bar colour alone; the segmented bar is aria-hidden because it only restates that label. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Pair the password field with a <label for> (shown in the docs examples). |
Popover
Popover documentation
| Criterion | Level | Status | Notes |
|---|
| 1.4.3 Contrast (Minimum) | AA | Built in | Popover header and body text meet the contrast minimum against the popover surface. |
| 4.1.2 Name, Role, Value | A | Built in | The popover has role=tooltip, and the trigger points at it through aria-describedby while it is shown. |
| 2.1.1 Keyboard | A | Built in | Click/Enter toggles the popover on a focusable trigger; the default trigger is click, not hover-only. |
Range
Range documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The control is a native range input in both forms; the tooltip and the tick marks the plugin adds are aria-hidden decorations, so the value is announced once. |
| 2.1.1 Keyboard | A | Built in | Native range input, operable with the arrow keys; the plugin adds no focusable element. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Label the input; the tooltip is aria-hidden and not a substitute for a label. |
Range Slider
Range Slider documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | Each thumb is a native range input, which exposes its value, minimum and maximum, with aria-orientation when vertical; multi-thumb sliders get a per-thumb aria-label (ariaLabel), and aria-valuetext carries the tooltipsFormat text or the label of the tick a thumb sits on. |
| 2.1.1 Keyboard | A | Partially handled | Each thumb is a native range input operated with the arrow keys, and a thumb cannot be moved past its neighbour. |
| 3.3.2 Labels or Instructions | A | Your responsibility | Label the slider group; per-thumb labels default to Minimum/Maximum value only for two thumbs. |
Rating
Rating documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | Each item is a native radio input named via the ariaLabel config (default 'N of M'), so the group exposes name, role, and checked state. |
| 2.1.1 Keyboard | A | Partially handled | The stars are native radio buttons, so Tab reaches the group and the arrow keys change the value; in read-only mode the arrow keys do nothing. |
| 1.4.1 Use of Color | A | Your responsibility | Selected and unselected stars have the same shape and differ only in colour. The value is exposed through the checked radio; where sighted users must read the rating, show the value as text or use icons with distinct filled and outline shapes. |
Stepper
Stepper documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | With panes below the step list, the steps are a tablist of role=tab buttons with aria-selected, each linked to its role=tabpanel pane through aria-controls and aria-labelledby. When each step holds its own content, the step buttons are disclosure buttons with aria-expanded. Inactive panes carry aria-hidden. |
| 2.1.1 Keyboard | A | Partially handled | Arrow keys, Home and End move between step buttons; in linear mode the steps after the next one are disabled. |
| 4.1.3 Status Messages | AA | Built in | When a step form with novalidate fails validation, focus moves to the first invalid field and its error message is added to that field's aria-describedby, so it is read with the field; when focus cannot move there, the message is announced in a polite live region. Without novalidate the browser shows its own validation message. A step change made while focus is inside the stepper moves focus to the new step button. |
Tab
Tab documentation
| Criterion | Level | Status | Notes |
|---|
| 2.1.1 Keyboard | A | Built in | Arrow keys, Home and End move focus across the tabs with a roving tabindex and activate the focused tab. |
| 4.1.2 Name, Role, Value | A | Partially handled | The plugin adds role=tablist, tab and tabpanel, aria-selected, a roving tabindex and, when the tab has an id, aria-labelledby on its panel, where the markup lacks them. Known gap: it does not add aria-controls, so give each tab one that points at its panel. |
| 2.4.3 Focus Order | A | Partially handled | Known gap: switching tabs from script while the active tab has focus drops focus to the page, because the outgoing tab is blurred. |
Time Picker
Time Picker documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | The toggle carries aria-haspopup=dialog and aria-expanded, plus aria-controls while the panel is open, and the panel is a role=dialog. |
| 1.3.1 Info and Relationships | A | Built in | The open panel is a group named "Time" holding a labelled list for hours and minutes, for seconds when they are shown, and for AM/PM in 12-hour format. |
| 2.1.1 Keyboard | A | Partially handled | Alt+ArrowDown or F4 opens the panel, Esc closes it, the up and down arrows walk a time list and the left and right arrows move between lists. |
Toast
Toast documentation
| Criterion | Level | Status | Notes |
|---|
| 1.4.3 Contrast (Minimum) | AA | Built in | Toast text meets the contrast minimum against the toast surface. |
| 4.1.3 Status Messages | AA | Your responsibility | Put toasts in a live region so they are announced: role="alert" with aria-live="assertive" as in the examples, or role="status" with aria-live="polite" for less urgent messages. |
| 2.2.1 Timing Adjustable | A | Partially handled | Toasts auto-hide after 5s by default; set autohide: false (or a longer delay) for messages users must be able to finish reading. |
Tooltip documentation
| Criterion | Level | Status | Notes |
|---|
| 1.4.3 Contrast (Minimum) | AA | Built in | The tooltip text stays fully opaque; only the background is translucent, so the text keeps its contrast. |
| 4.1.2 Name, Role, Value | A | Built in | The tip has role=tooltip, and the trigger points at it through aria-describedby while it is shown. |
| 1.4.13 Content on Hover or Focus | AA | Built in | Shown on hover and focus. The tip stays open while the pointer moves onto it or focus moves into it, and closes once both leave; Esc dismisses it without moving focus. |
Transfer
Transfer documentation
| Criterion | Level | Status | Notes |
|---|
| 4.1.2 Name, Role, Value | A | Built in | Each move button is named by ariaMoveToTargetLabel, ariaMoveToSourceLabel, ariaMoveAllToTargetLabel or ariaMoveAllToSourceLabel unless it already has an aria-label, and points at the list it fills through aria-controls. Each side's options are a role=listbox named from the side title when they have no name of their own. |
| 1.3.1 Info and Relationships | A | Built in | Both sides are listboxes holding only option and group children; the select-all header and the move buttons sit outside them. |
| 2.1.1 Keyboard | A | Partially handled | Each list is operated like a standalone list box, and the move buttons sit between the lists in the tab order. |
| 4.1.3 Status Messages | AA | Built in | Every move is announced in a visually hidden polite live region, with the number of items and the destination list (ariaMovedAnnouncement). |