React Code Review

# React Accessibility Checklist and ARIA Patterns

## Semantic HTML First

Always use the correct semantic element before reaching for ARIA attributes.

| Need | Use | Not |
|------|-----|-----|
| Button | `<button>` | `<div onClick>` |
| Link/navigation | `<a href>` | `<span onClick>` |
| List | `<ul>` / `<ol>` | `<div>` with items |
| Heading | `<h1>`–`<h6>` | `<div className="title">` |
| Navigation | `<nav>` | `<div className="nav">` |
| Main content | `<main>` | `<div className="content">` |
| Form input label | `<label htmlFor>` | Placeholder text only |
| Table data | `<table>` | `<div>` grid layout |

## Interactive Elements

### Buttons vs Links
- **Button**: Triggers an action (submit, toggle, open modal)
- **Link**: Navigates to a URL or page section

```tsx
// ✅ Correct: Button for action
<button onClick={handleSave} type="button">Save</button>

// ✅ Correct: Link for navigation
<a href="/settings">Go to Settings</a>

// ❌ Wrong: Div as button
<div onClick={handleSave} className="btn">Save</div>

// ❌ Wrong: Button for navigation
<button onClick={() => router.push('/settings')}>Go to Settings</button>
```

### Keyboard Navigation
All interactive elements must be keyboard accessible.

```tsx
// ✅ Custom interactive element with keyboard support
function ToggleSwitch({ checked, onChange }: ToggleSwitchProps) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      onKeyDown={(e) => {
        if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault();
          onChange(!checked);
        }
      }}
    >
      {checked ? 'On' : 'Off'}
    </button>
  );
}
```

## Focus Management

### Modal Focus Trap

```tsx
'use client';

import { useEffect, useRef } from 'react';

function Modal({ isOpen, onClose, children }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement as HTMLElement;
      modalRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      tabIndex={-1}
      onKeyDown={(e) => {
        if (e.key === 'Escape') onClose();
      }}
    >
      <h2 id="modal-title">Modal Title</h2>
      {children}
      <button onClick={onClose}>Close</button>
    </div>
  );
}
```

### Skip Navigation Link
Allow keyboard users to skip repetitive navigation.

```tsx
function SkipToMain() {
  return (
    <a
      href="#main-content"
      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:p-4 focus:bg-white"
    >
      Skip to main content
    </a>
  );
}

function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <SkipToMain />
      <Header />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
    </>
  );
}
```

## ARIA Patterns

### Live Regions
Announce dynamic content changes to screen readers.

```tsx
// ✅ Announce form submission status
function ContactForm() {
  const [status, setStatus] = useState('');

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Send</button>
      <div role="status" aria-live="polite" aria-atomic="true">
        {status}
      </div>
    </form>
  );
}
```

### Expandable Sections

```tsx
function Accordion({ title, children }: AccordionProps) {
  const [expanded, setExpanded] = useState(false);
  const contentId = useId();

  return (
    <div>
      <button
        aria-expanded={expanded}
        aria-controls={contentId}
        onClick={() => setExpanded(!expanded)}
      >
        {title}
      </button>
      <div
        id={contentId}
        role="region"
        hidden={!expanded}
      >
        {children}
      </div>