# Find small touch targets
grep -rn "width:\s*[0-3][0-9]px\|height:\s*[0-3][0-9]px" --include="*.css" src/

# Find images without alt text
grep -rn "<img" --include="*.tsx" --include="*.jsx" src/ | grep -v "alt="

# Find buttons without accessible labels
grep -rn "<button" --include="*.tsx" src/ | grep -v "aria-label\|>.*</"

# Find inputs without labels
grep -rn "<input" --include="*.tsx" src/ | grep -v "aria-label\|id="

<!-- Header with navigation -->
<header role="banner">
  <nav role="navigation" aria-label="Main navigation">
    <!-- Nav items -->
  </nav>
</header>

<!-- Main content -->
<main role="main">
  <h1>Page Title</h1>
  <!-- Content -->
</main>

<!-- Search -->
<div role="search">
  <label for="search">Search</label>
  <input type="search" id="search" />
</div>

<!-- Footer -->
<footer role="contentinfo">
  <!-- Footer content -->
</footer>

<!-- ❌ Bad - no label for icon-only button -->
<button>
  <svg><!-- icon --></svg>
</button>

<!-- ✅ Good - aria-label for screen readers -->
<button aria-label="Close dialog">
  <svg aria-hidden="true"><!-- icon --></svg>
</button>

<!-- ✅ Good - visually hidden text -->
<button>
  <svg aria-hidden="true"><!-- icon --></svg>
  <span class="visuallyHidden">Close dialog</span>
</button>

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

<!-- ❌ Bad - placeholder is not a label -->
<input type="email" placeholder="Email address" />

<!-- ✅ Good - proper label association -->
<label for="email">Email address</label>
<input type="email" id="email" autocomplete="email" />

<!-- ✅ Good - error announcement -->
<label for="password">Password</label>
<input
  type="password"
  id="password"
  aria-invalid="true"
  aria-describedby="password-error"
/>
<div id="password-error" role="alert">
  Password must be at least 8 characters
</div>

class AccessibleModal {
  constructor(modalElement) {
    this.modal = modalElement;
    this.focusableElements = null;
    this.previousFocus = null;
  }

  open() {
    // Store current focus
    this.previousFocus = document.activeElement;

    // Get all focusable elements in modal
    this.focusableElements = this.modal.querySelectorAll(
      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
    );

    // Focus first element
    if (this.focusableElements.length > 0) {
      this.focusableElements[0].focus();
    }

    // Trap focus within modal
    this.modal.addEventListener('keydown', this.trapFocus.bind(this));

    // Announce modal to screen readers
    this.modal.setAttribute('aria-modal', 'true');
    this.modal.setAttribute('role', 'dialog');
  }

  trapFocus(e) {
    if (e.key !== 'Tab') return;

    const firstElement = this.focusableElements[0];
    const lastElement = this.focusableElements[this.focusableElements.length - 1];

    if (e.shiftKey && document.activeElement === firstElement) {
      e.preventDefault();
      lastElement.focus();
    } else if (!e.shiftKey && document.activeElement === lastElement) {
      e.preventDefault();
      firstElement.focus();
    }
  }

  close() {
    this.modal.removeEventListener('keydown', this.trapFocus);

    // Return focus to trigger element
    if (this.previousFocus) {
      this.previousFocus.focus();
    }
  }
}

.bottomSheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-radius: 16px 16px 0 0;
  padding: 24px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.bottomSheet.open {
  transform: translateY(0);
}

/* Focus indicator for keyboard users */
.bottomSheet *:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide focus outline for mouse users, show for keyboard */
.bottomSheet *:focus:not(:focus-visible) {
  outline: none;
}

.bottomSheet *:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

<!-- Polite announcement - doesn't interrupt -->
<div role="status" aria-live="polite" aria-atomic="true" class="visuallyHidden">
  <!-- Announcement text injected here -->
</div>

<!-- Assertive announcement - interrupts immediately -->
<div role="alert" aria-live="assertive" aria-atomic="true" class="visuallyHidden">
  <!-- Error messages injected here -->
</div>

function announce(message, priority = 'polite') {
  const liveRegion = document.querySelector(`[aria-live="${priority}"]`);

  // Clear and re-add to trigger announcement
  liveRegion.textContent = '';
  setTimeout(() => {
    liveRegion.textContent = message;
  }, 100);

  // Auto-clear after announcement
  setTimeout(() => {
    liveRegion.textContent = '';
  }, 5000);
}

// Usage
saveButton.addEventListener('click', async () => {
  await saveData();
  announce('Changes saved successfully', 'polite');
});

deleteButton.addEventListener('click', async () => {
  try {
    await deleteItem();
    announce('Item deleted', 'polite');
  } catch (error) {
    announce('Error: Could not delete item', 'assertive');
  }
});

<!-- Loading button with status -->
<button
  aria-label="Save changes"
  aria-busy="true"
  disabled
>
  <span aria-hidden="true">
    <!-- Spinner icon -->
  </span>
  <span>Saving...</span>
</button>

<!-- Completed state -->
<button aria-label="Save changes">
  Save
</button>

<!-- List that updates -->
<ul role="list" aria-live="polite" aria-relevant="additions removals">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- New items announced automatically -->
</ul>

<!-- Pagination -->
<nav aria-label="Pagination">
  <button aria-label="Previous page" disabled>Previous</button>
  <span aria-current="page" aria-label="Page 1 of 5">1</span>
  <button aria-label="Next page, Page 2">Next</button>
</nav>

### VoiceOver Testing (iOS)

- [ ] Can navigate through all interactive elements
- [ ] Button labels are descriptive ("Close" not "X")
- [ ] Form inputs announce their purpose and state
- [ ] Images have meaningful alt text (or aria-hidden if decorative)
- [ ] Modals trap focus and announce as dialogs
- [ ] Page title announces on navigation
- [ ] Headings create logical document outline
- [ ] Custom controls have appropriate ARIA roles
- [ ] Loading states announce to user
- [ ] Error messages are announced immediately
- [ ] Dynamic content updates are announced
- [ ] Can dismiss modals with swipe gestures
- [ ] Rotor navigation works (headings, links, form controls)

### TalkBack Testing (Android)

- [ ] All interactive elements are reachable
- [ ] Touch exploration works (drag finger to explore)
- [ ] Local context menu provides actions
- [ ] Swipe gestures navigate correctly
- [ ] Custom gestures have TalkBack equivalents
- [ ] Reading order matches visual order
- [ ] Lists announce item count
- [ ] Expandable sections announce state (expanded/collapsed)

### Switch Control Testing

- [ ] Can navigate with single switch
- [ ] All actions reachable via scanning
- [ ] Scanning speed is reasonable
- [ ] No focus traps for switch users

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .pullToRefresh .refreshIndicator,
  .swipeableItem .swipeContent {
    transition: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }

  .card {
    border: 1px solid var(--color-text);
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #ffffff;
  }
}

## Mobile Accessibility Audit Results

### Critical Issues (WCAG Level A)
- [ ] **Touch Target Too Small** - Button at `[selector]` is 32x32px (requires 44x44px)
- [ ] **Missing Label** - Input at `[selector]` has no associated label
- [ ] **Focus Trap** - Modal does not return focus on close

### Important Issues (WCAG Level AA)
- [ ] **Insufficient Contrast** - Text on background is 3.2:1 (requires 4.5:1)
- [ ] **Missing Landmark** - Page missing main landmark

### Enhancements (WCAG Level AAA)
- [ ] **Touch Target Enhancement** - Increase to 48x48px for better usability
- [ ] **Enhanced Announcements** - Add more descriptive loading states

### Files Modified
- `[filepath]` - Touch target fixes
- `[filepath]` - ARIA labels and landmarks
- `[filepath]` - Focus management
- `[filepath]` - Live region announcements

### Testing Notes
**VoiceOver (iOS):**
- Navigation works correctly through all elements
- Buttons announce purpose clearly
- Modal focus trapping works

**TalkBack (Android):**
- All elements reachable via swipe
- Local context menu provides expected actions
- Reading order matches visual layout

### Checklist Results
✅ Touch targets ≥ 44px
✅ Screen reader labels present
✅ Focus management implemented
✅ Live regions for dynamic content
✅ Reduced motion respected
⚠️ High contrast mode needs testing