:focus-visible on interactive elements

What TestSprite reads

The testing agent reads this JSON, opens the deployed URL in headless Chromium, executes each action step, evaluates each assertion. Verdict: passed / failed / blocked / inconclusive.

{
  "projectId": "1ad26753-ee03-4689-8f0f-6fa5d67c5c72",
  "type": "frontend",
  "name": "Accessibility — keyboard focus is visually distinguishable on every interactive element",
  "description": "Every link, button, and input on the bracket page must show a visible focus indicator (outline, ring, underline change, etc.) when tabbed to. Headless-browser axe-core sweep catches missing focus-visible styles, which break keyboard navigation entirely.",
  "priority": "p0",
  "metadata": {
    "category": "accessibility",
    "stage": "all"
  },
  "planSteps": [
    {
      "type": "action",
      "description": "Navigate to the homepage"
    },
    {
      "type": "action",
      "description": "Press the Tab key once to move focus to the first interactive element"
    },
    {
      "type": "assertion",
      "description": "Verify the currently-focused element shows a visually distinct focus indicator that differs from its non-focused state (a visible outline, ring, color change, or underline — not just the default browser ring that some sites suppress)"
    },
    {
      "type": "action",
      "description": "Press Tab three more times to step through additional interactive elements"
    },
    {
      "type": "assertion",
      "description": "Verify each of the three subsequently focused elements also shows a visually distinct focus indicator"
    }
  ]
}