Focus indicator is visible with sufficient contrast

A focus indicator removed by outline: none in a CSS reset — one of the most ubiquitous accessibility mistakes — means that a sighted keyboard user cannot determine which element is active. Without knowing where focus is, they cannot predict what Enter or Space will do. WCAG 2.2 SC 2.4.7 (Focus Visible) is a long-standing Level AA requirement; SC 2.4.11 (Focus Appearance) in WCAG 2.2 adds minimum geometric constraints: the focus indicator must have a contrast ratio of at least 3:1 against adjacent colors and must enclose a perimeter of at least the CSS outline equivalent. SC 1.4.11 (Non-text Contrast) governs UI component contrast. Section 508 2018 Refresh 302.7 requires visual accessibility. The specific failure: Tailwind's ring utility defaults to a ring-offset that is invisible on dark backgrounds, creating a technically-present but practically-invisible focus indicator.

Audit your globals.css and component files for outline: none without a replacement focus style. Add a global focus-visible style as a safety net, then override per component as needed.

/* globals.css — safety net */
*:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}

/* If using Tailwind, add to base layer in globals.css */
@layer base {
  *:focus-visible {
    @apply outline-none ring-2 ring-blue-600 ring-offset-2;
  }
}

/* For dark backgrounds, ensure ring is visible */
.dark *:focus-visible {
  @apply ring-blue-400 ring-offset-gray-900;
}

/* Never do this without a replacement: */
/* button:focus { outline: none; } */

Verify using browser DevTools: tab to each interactive element and use the computed styles inspector to confirm a visible outline or ring is applied. The contrast ratio between the focus indicator color and the background must be at least 3:1 per WCAG 2.2 SC 2.4.11.