Accessibility
Accessibility sets the floor that components are built to, WCAG 2.2 Level AA, and names the mechanism behind each criterion.
No audit of Summit is recorded, so no page claims that a component conforms.
Focus
Keyboard focus is shown as a 1px solid outline in ring.
| Element | Usage |
|---|---|
| Outline on the edge | A control with a border or no fill |
| Outline off the edge | A filled or checked control |
| Red outline | An invalid control |
On a control with a border or no fill, the outline replaces the edge. On a filled control, such as a default Button, a checked Checkbox, or a Switch when it is on, the outline is 2px off the edge. On an invalid control, the outline is destructive and is 2px off the destructive border.
In a menu, a Select, a Combobox, and a Command list, the focused item is filled with secondary and has a 2px ring line at its start edge in place of an outline. See Elevation for the marks for hover, selection, and focus in a list.
The outline addresses WCAG 2.2 SC 2.4.7 Focus Visible. As the sign of a state, it also falls under WCAG 2.2 SC 1.4.11 Non-text Contrast, which requires 3 to 1 against the colors next to it. A production build fails if a ratio in this table falls below 3 to 1.
| Outline | Surface | Light | Dark | Floor |
|---|---|---|---|---|
| ring | background | 8.38 | 5.55 | 3 |
| ring | card | 8.38 | 5.44 | 3 |
| ring | popover | 8.38 | 5.44 | 3 |
| ring | muted | 7.55 | 4.58 | 3 |
| ring | secondary | 7.24 | 4.58 | 3 |
| sidebar-ring | sidebar | 7.55 | 5.77 | 3 |
| sidebar-ring | sidebar-accent | 5.92 | 4.58 | 3 |
| destructive | background | 6.30 | 8.33 | 3 |
| destructive | card | 6.30 | 8.17 | 3 |
| destructive | popover | 6.30 | 8.17 | 3 |
The outline is 1px wide, so it doesn’t meet WCAG 2.2 SC 2.4.13 Focus Appearance, a Level AAA criterion that requires an indicator with the area of a 2px perimeter.
Target Size
A pointer target is at least 24 by 24 CSS pixels, the floor of WCAG 2.2 SC 2.5.8 Target Size (Minimum). See Sizing for the hit area of a control that is drawn smaller.
If an icon Button is drawn smaller than 24px, extend its hit area to 24px, as WCAG 2.2 SC 2.5.8 Target Size (Minimum) requires. On a
20px Button, relative after:absolute after:-inset-0.5 adds 2px on every side.
Contrast
Text needs a contrast of 4.5 to 1 on its surface, the floor of WCAG 2.2 SC 1.4.3 Contrast (Minimum). A mark that identifies a control or a state needs 3 to 1, the floor of WCAG 2.2 SC 1.4.11 Non-text Contrast. The edge of a text field’s box and a warning icon or dot on a light surface are below that floor. See Color for the pairs that are checked.
A disabled control is dimmed to 50%. Both criteria exempt an inactive control, so its contrast has no floor.
Under WCAG 2.2 SC 1.4.1 Use of Color, color can’t be the only sign of a state or a status. See Color for the label, icon, or message that also shows each status.
Motion
When users request reduced motion, a rule in tokens.css removes movement and scale from every transition and keeps fades. A Spinner and a Skeleton keep moving. See Motion for what changes.
The rule addresses WCAG 2.2 SC 2.3.3 Animation from Interactions, a Level AAA criterion, which requires that users can turn off motion that an interaction starts.
A Spinner must not rotate next to usable content for more than 5 seconds unless users can pause, stop, or hide it. WCAG 2.2 SC 2.2.2 Pause, Stop, Hide applies to movement that starts by itself, lasts more than 5 seconds, and is shown next to other content. It exempts a loading animation only while users can’t interact with the page.
Forced Colors
Forced-colors mode, which a Windows contrast theme turns on, repaints the page in a short palette of system colors and removes box shadows. A part that is shown only by its fill or its shadow would disappear, so Summit adds a mark that stays visible.
| Part | Loss | Mechanism |
|---|---|---|
| A floating surface: a Popover, a menu, a Select, a Dialog, or a Tooltip | Its ring and shadow | outline-hidden, which adds a 2px outline in this mode only |
| A checked Checkbox or radio, a Switch when it is on, a pressed Toggle, the selected option of a Segmented Control, and the active tab | Its fill | The system colors Highlight and HighlightText |
| The focused item in a menu | Its fill | The line at its start edge, in Highlight |
| A Separator, the thumb of a scroll bar, and the handle of a Drawer | Its fill | CanvasText |
| A Skeleton | Its fill | GrayText |
| The track of a Slider or a Progress bar | Its fill | A 1px outline |
| The focus outline | Its color | A 2px outline in a system color |
Requirements
Under Requirements, a component page lists what the product must provide, with the criterion that fails without it: for example, the aria-label of an icon-only Button or the title of a Dialog. Summit can’t write a label, a title, or an error message, so if a screen omits one, it fails the criterion named in the requirement. Whether a screen built with the components conforms also depends on the screen’s content and requires an audit.
In Code
To add the focus outline to a control built outside the registry, use these classes. On a filled control, replace -outline-offset-1 with outline-offset-2.
<button className="rounded-lg focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:duration-0 forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2" />Use outline-hidden on a floating surface, not outline-none, which also removes the outline in forced-colors mode. To visually hide a name and keep it for screen readers, use sr-only, as the close button of a Dialog does for its label.