List loader
canonThe drumming hand shown while a long listing loads or pages in (AD P93); listings only, never buttons.
Size via --lh-scale (default 0.4 ≈ 45 × 28 px), punch-out ground via --lh-bg (default --surface-100).
Used in 14 files · 11 areas · 22× — components/communication, components/kpi, components/segment, components/timeline, pages/AktivitaPage, pages/HovoryStatistikaPage …
@acrm/ui <ListLoader>.acrm-loadhand .lh-hand .lh-finger .lh-item +4SourceStoryLegacy card Loading (skeleton).htmlKeyboard
- 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