List loader — accessibility
Keyboard
- Not focusable and not interactive.
- It replaces the "load more" button while the fetch runs, so a tab stop disappears and comes back. Focus that was on that button is lost — a host that pages from the keyboard should move focus to the first new row when the batch lands.
ARIA
- The wrapper is always
role="status"(unlikeloader, which only takes a role when labelled) with the label in.acrm-sr, so a screen reader hearsNačítám…politely when it appears. - The hand itself is
aria-hidden— four fingers and a thumb have nothing to say. - Because
role="status"is a live region, do not mount more than one on a screen at a time; two listings paging together would talk over each other. - Nothing announces the arrival of the new rows, only the start of the fetch.
Focus
- Nothing focusable, so no focus ring.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- The hand is drawn in
--fg-muted— 2.85:1 light, 3.63:1 dark against the canvas, i.e. under the 3:1 non-text threshold in light theme. - The knuckles and nails are punched out in
--lh-bg; when that does not match the actual ground, the shape loses its readability entirely rather than just its contrast.
Known limits
- The drumming is a continuous animation and does not honour
prefers-reduced-motion— and it is livelier than a spinner, so it is more disturbing to a motion-sensitive user. - Under 3:1 on the page ground in the light theme.
- The end of the fetch is silent.
- Both knobs fail quietly when set on a parent, which produces a loader that is the wrong size or has visible seams with nothing reporting it.
Source: docs/loading/list-loader.a11y.md · GitLab