Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Shimmer
  3. Accessibility

Shimmer

Accessibility

Import Shimmer, ShimmerBase from @prepared911/ui/shimmer.
Structure
  • The label is ordinary text in the reading order. Shimmer adds no role, no aria-live, and no name.
  • The glyph is decorative: aria-hidden, no name.
  • The sweep is paint only. It does not change the text, so a screen reader reads the same label whether the sweep runs or not.
Pending state
Shimmer does not announce that work started. Pair it with the owner of the announcement: a Loader, a status region, or the log that holds the message.
Contrast
Shimmer is a loading placeholder: while it sweeps, the label rests at --color-fg-disabled and a band lifts it to --color-fg-default. The band is 1.2 label widths wide and the two colors differ by more than 2.5:1 in both themes (7.05:1 in light and 5.24:1 in dark on the canvas). The resting dip is not held to the text floor: it measures 2.61:1 in light and 3.71:1 in dark against the canvas, under the 4.5:1 AA text floor. The color property stays --color-fg-default, so the contrast gates and axe read the readable color, and every stopped state below paints it. Do not use the Dim base for text that someone must read while it sweeps; use it for a label whose meaning the surrounding UI already carries. For read text, pass base={ShimmerBase.Readable}: the label rests at --color-fg-subtle, the tier a resting label uses, and the glyph at --color-icon-subtle, so the painted text is at or above AA at every point of the sweep. The glyph follows the same pair in its icon tokens.
Reduced motion, increased contrast, forced colors
  • Reduced motion (the system setting or data-motion="reduced"): the sweep stops and the label paints the default foreground. The glyph is the default icon color.
  • prefers-contrast: more: the sweep stops and the label paints the default foreground, the strongest tier; there is no gradient.
  • forced-colors: active: backgrounds are removed, so clipped text would vanish. No gradient is applied and the label is the system text color (CanvasText).
Right to left
The sweep travels along the inline axis, starting at the inline start in both directions.
Previous
Shimmer / API and Development
Next
Sidebar / Usage
On this page
Structure
Pending state
Contrast
Reduced motion, increased contrast, forced colors
Right to left