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

Artifact

Accessibility

Import Artifact, ArtifactStatus from @prepared911/ui/artifact.
Structure
  • The title is a heading whose level the caller picks with headingLevel, so the artifact fits the outline of the conversation.
  • The card is a group of plain content. It adds no role and no landmark.
  • ArtifactStatus is plain text with a decorative glyph. It carries no status role and no live region: the conversation that holds the artifact owns announcements, and a second live region would announce the same event twice.
Not by color alone
The success color is never the only signal. The glyph and the text say it too, and the glyph is aria-hidden because the text carries the meaning.
Contrast and forced colors
The status uses the success foreground, which clears AA on the card surface in light and dark; the browser tests run axe over the card. Under forced-colors: active the card keeps Card's edge and the status takes the system text color.
Right to left
The status sits at the inline end of the footer in both directions, and its glyph comes before its label in reading order.
Previous
Artifact / API and Development
Next
Attachment / Usage
On this page
Structure
Not by color alone
Contrast and forced colors
Right to left