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" (unlike loader, which only takes a role when labelled) with the label in .acrm-sr, so a screen reader hears Načí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