These shortcuts hide content visually or make keyboard focus visible. They do not add an accessible name to a control: its text, label, or ARIA attributes still come from the application.
| Class | Effect |
|---|---|
sr-only |
Visually clips an element while leaving it in the accessibility tree |
sr-visible |
Restores normal positioning, size, clipping, and wrapping |
focus-ring |
Native-style outline on :focus-visible, 2px wide with 2px offset |
focus-ring--flat |
Use with focus-ring for zero outline offset |
focus-ring--inset |
Use with focus-ring for a -2px inset offset |
focus-proxy |
Outline the wrapper when its direct input, textarea, or select has :focus-visible |
focus-shadow |
Opt-in 2px focus shadow with a 1px gap, preserving elevation |
focus-shadow-flat |
Opt-in 2px focus shadow without a gap |
<label class="focus-proxy">
<input class="sr-only" type="checkbox" />
<span>Receive release notes</span>
</label>
<button class="focus-ring focus-ring--inset" type="button">Open settings</button>focus-proxy uses :has(> :is(input, textarea, select):focus-visible).
Keep the native field inside the wrapper as a direct child; a nested input
does not trigger it. focus-ring and its modifiers do not suppress native
focus behavior, and Official does not choose an outline color. Supply a color
with outline-color:focused-700@focus-visible where the default would lack
contrast, then test both themes and forced-colors mode. Avoid clipping the
outline with an ancestor; focus-ring--inset can help when the box must clip.
Use sr-only for useful words, such as an icon button’s name, rather than for
content that should be unavailable to assistive technology. sr-visible is
an explicit reversal on an element, not a focus-triggered reveal mechanism.
Opt-in focus shadows
Choose exactly one of focus-shadow and focus-shadow-flat on the element
that owns keyboard focus. They supply their own :focus-visible state and
replace the normal outline with a shadow. They restore a solid Highlight
outline in forced colors, where shadows may disappear.
<button class="btn focus-shadow bg-color:neutral-100 text-color:neutral-950 border-color:neutral-500 shadow-outline-color:focused-700 shadow-outline-offset-color:neutral-100" type="button">
Save changes
</button>The shadow color otherwise defaults to currentColor, and its gap defaults
to white. Set the gap color on the same element to match its surface;
focus-shadow-flat does not need a gap color. Keep enough surrounding room
for the ring and test focus in light, dark, and forced colors. Do not add
focus-ring or another focus owner to the same control. The two shadow
modes are separate classes; cn retains both, so choose between them in
the component’s variants.