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

Data list

Accessibility

DataList from @prepared911/ui renders label-value pairs in a consistent column layout using a Radix primitive. The component wires label-to-value association and exposes copy affordances; your job is to keep labels precise, provide fallback text for empty cells, and surface copy confirmations.
What the component handles
  • Description list semantics. Items render as <dt> / <dd> pairs so assistive tech groups label and value correctly.
  • Empty-cell fallback. emptyLabel renders placeholder text when a value is missing.
  • Copy affordance. The built-in copy button exposes a descriptive aria-label and fires an onCopySuccess callback.
What you must provide
  • Precise labels. Prefer "Incident ID" over "ID"; prefer "Created at" over "Date". Labels announced in isolation must still make sense.
  • Meaningful empty text. Set emptyLabel to "Not set", "Unknown", or a contextual equivalent so the rotor doesn't announce an empty cell as nothing.
  • Copy confirmation. Wire onCopySuccess to a Snackbar or to a polite live region so assistive-tech users know the copy succeeded.
Keyboard behavior
  • Tab / Shift+Tab move between interactive elements inside the list (copy buttons, links).
  • Enter / Space activate the focused button.
Semantics and roles
  • <dl> wrapping <dt> (label) and <dd> (value) pairs.
  • Copy buttons render as native <button> elements with accessible labels.
Known caveats
  • Long values that truncate. Pair truncated values with title attributes or expose the full value via a copy affordance or tooltip so assistive tech can access the text.
  • Sensitive data. Use Secret for tokens and masked values; DataList is for readable metadata.
Previous
Data list / API and Development
Next
Drawer / Usage
On this page
What the component handles
What you must provide
Keyboard behavior
Semantics and roles
Known caveats