{
  "componentId": "avatar",
  "componentName": "Avatar",
  "lastReviewed": "2026-05-05",
  "keyboardWalk": [
    {
      "keys": "Tab (decorative avatar)",
      "expected": "Decorative avatars are not in the tab order. Focus moves through the host element (button, link, list-item)."
    },
    {
      "keys": "Tab (interactive avatar, rare)",
      "expected": "Interactive avatars (used as a profile-link) participate as a single tab stop. Focus ring renders on the container. Hit target ≥ 24×24 px (WCAG 2.5.8) — small avatar sizes (xs / sm) need explicit padding to meet the threshold when clickable."
    }
  ],
  "announcements": [
    {
      "trigger": "SR encounters an avatar with image variant",
      "expected": "SR announces the `<img>` alt text. For decorative avatars with `alt=\"\"`, SR is silent and the host's name reads."
    },
    {
      "trigger": "SR encounters an avatar with initials / icon variant",
      "expected": "SR announces the container's `role=\"img\"` accessible name (\"Alex Black\"). The initials letters or icon glyph are decorative; AT reads the entity-name only."
    },
    {
      "trigger": "SR encounters an avatar with status indicator",
      "expected": "SR announces avatar name plus status word (\"Alex Black, online\"). Status follows the avatar in DOM and reading order."
    }
  ],
  "axeRules": [
    "image-alt",
    "aria-allowed-attr",
    "aria-required-attr",
    "role-img-alt",
    "color-contrast"
  ],
  "_about": "Per-component a11y-acceptance data shaped for direct ingestion into Playwright + @axe-core/playwright or Jest + jest-axe.\n\nSuggested wiring:\n- axeRules → pass to AxeBuilder.options({ runOnly: { type: \"rule\", values: axeRules } }) so the run targets only the rules the canon has pinned for this component (other rules can run in your global pass).\n- keyboardWalk → iterate the entries; each `keys` is a human-readable sequence (e.g. \"Tab → Tab → Esc\"). Translate to page.keyboard.press calls and assert `expected` against the result (focused element, aria-state, visible text, etc.).\n- announcements → assert text content of any aria-live region or capture the accessibility tree at the trigger moment and match against `expected`.\n\nEmpty sub-arrays mean the canon does not yet pin behaviour for that axis on this component, not that none is required."
}