Accessibility

// Icon-only button with accessible label
<Button aria-label="Close dialog">
  ×
</Button>

// Button with description
<Button aria-describedby="save-description">
  Save
</Button>
<span id="save-description" className="sr-only">
  Save your changes to the document
</span>

// Automatic ARIA attributes
<Input
  label="Email"
  required
  error={hasError}
  errorMessage="Invalid email"
  helperText="We'll never share your email"
/>

// Generates:
// - aria-required="true"
// - aria-invalid="true" (when error)
// - aria-describedby="email-error email-helper"

/* Automatic focus styles */
.btn:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

// Button uses <button> element
<Button>Click me</Button>

// Input uses <input> with <label>
<Input label="Email" />

<Button>
  <TrashIcon />
  <span className="sr-only">Delete item</span>
</Button>

// Primary button (white on blue)
// Contrast ratio: 4.6:1 ✓

// Error text (red on white)
// Contrast ratio: 4.5:1 ✓

// ✅ Good
<Input label="Email" type="email" />

// ❌ Bad
<input type="email" placeholder="Email" />

<Input
  label="Email"
  error={true}
  errorMessage="Please enter a valid email"
  // Generates role="alert" for screen readers
/>

<Input
  label="Email"
  required
  // Adds asterisk (*) and aria-required="true"
/>