focus-states

Focus States Generator

Overview

Generate accessible, visible focus indicators for interactive elements. Creates focus styles that meet WCAG 2.4.7 (Focus Visible) and 2.4.11 (Focus Appearance) requirements while maintaining visual design consistency.

When to Use

• Setting up focus styles for a design system
• Ensuring keyboard navigation is visible
• Creating custom focus rings that match brand
• Fixing "invisible" focus states in existing UI

Quick Reference: WCAG Requirements

Criterion	Requirement	Level
2.4.7 Focus Visible	Focus indicator must be visible	AA
2.4.11 Focus Appearance	2px+ perimeter, 3:1 contrast	AAA
2.4.12 Focus Not Obscured	Focus not hidden by other content	AA

The Process

1. Get brand colors: Primary color and background colors
2. Ask style preference:
   • Ring (outline around element)
   • Glow (soft shadow-based)
   • Underline (for text links)
   • Hybrid (ring + offset)
3. Ask visibility approach: Always visible or focus-visible only?
4. Generate: Create focus tokens and utility classes
5. Test guidance: Provide keyboard testing checklist

Focus Style Options

Style	Character	Best For
Ring	Clean, defined	Buttons, inputs, cards
Glow	Soft, modern	Dark themes, premium UI
Underline	Minimal	Text links, nav items
Offset	High contrast	When ring blends with element
Inset	Subtle	Contained elements

Output Formats

CSS Custom Properties + Utilities:

:root {
  /* Focus tokens */
  --focus-ring-color: #2563eb;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: solid;

  /* Computed focus ring */
  --focus-ring: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  --focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset) var(--color-background);
  --focus-ring-shadow: 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

/* Base focus reset */
*:focus {
  outline: none;
}

/* Focus-visible for keyboard only */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Alternative: box-shadow approach (more styling control) */
.focus-ring:focus-visible {
  outline: none;
  box-shadow:
    var(--focus-ring-offset-shadow),
    var(--focus-ring-shadow);
}