Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Metric Card
  5. Accessibility

Metric Card

Accessibility

MetricCard presents one metric. The value is not a heading. Threshold meaning lives on the delta: the arrow glyph plus the delta text, not color alone.
What the component handles
  • Loading exposes exactly one visible role="status" and aria-busy. Skeleton geometry sits in one aria-hidden cluster.
  • Trailing content is aria-hidden.
  • The header title uses CardHeader semantics. Override rank with headingLevel; default is HeadingLevel.H3.
  • The value renders as NumericDisplay in a span, not a heading element.
  • Tone never colors the large value. Only the delta label and arrow fill take tone.
  • Numeric values roll through Text: reel motion is hidden; announcement is the polite copy, and only on the value.
  • Clickable tiles expose one stretched button with aria-label and optional aria-pressed. Selected clickable tiles expose aria-pressed; header controls stay outside the action target.
  • Header controls render outside the action target radiogroup.
What you must provide
  • Localized label.
  • Localized loadingLabel whenever loading is true.
  • Localized label on introduced and unavailable deltas.
  • Localized directionLabel on increase, decrease, and unchanged magnitude deltas. The delta region exposes this text to assistive technology; the arrow stays decorative (aria-hidden).
  • Localized aria-label whenever onClick is set.
  • Localized announcement when a numeric value should be spoken after it changes.
Keyboard behavior
  • Static tiles have no tab stop.
  • Clickable tiles expose one tab stop on the stretched action target. Activation follows native button behavior.
  • Header controls follow CardControls and SegmentedControl keyboard contracts.
Related Components
  • Card
  • Animated Number (Text value mode)
  • Text
  • Skeleton
Previous
Metric Card / API and Development
Next
Modal / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Related Components