Accessibility Guide

/* Focus styles in globals.css */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

<button
  onClick={onClick}
  aria-label={`Incident at ${incident.location?.name}, ${incident.temporal?.date}`}
  className="..."
>
  {/* Marker visual */}
</button>

<div
  role="dialog"
  aria-labelledby="popup-title"
  aria-describedby="popup-description"
  aria-modal="true"
>
  <h2 id="popup-title">{incident.location?.name}</h2>
  <p id="popup-description">{incident.summary}</p>
  <button aria-label="Close popup" onClick={onClose}>
    <X aria-hidden="true" />
  </button>
</div>

<button
  onClick={onClick}
  aria-selected={isSelected}
  aria-label={`${incident.location?.name}, ${incident.temporal?.date}`}
>
  {/* Feed item content */}
</button>

<fieldset>
  <legend className="sr-only">Filter by incident type</legend>
  {options.map((option) => (
    <label key={option.value}>
      <input
        type="checkbox"
        checked={selected.includes(option.value)}
        onChange={() => toggle(option.value)}
        aria-describedby={`${option.value}-description`}
      />
      <span>{option.label}</span>
      <span id={`${option.value}-description`} className="sr-only">
        {option.description}
      </span>
    </label>
  ))}
</fieldset>

map: {
  // Enable keyboard navigation
  keyboardShortcuts: true,
}

<div
  role="application"
  aria-label="Interactive incident map"
  aria-describedby="map-instructions"
>
  <Map ... />
  <div id="map-instructions" className="sr-only">
    Use arrow keys to pan, plus and minus to zoom.
    Tab to navigate to incident markers.
  </div>
</div>

{/* Toggle between map and list view */}
<div role="tablist">
  <button role="tab" aria-selected={view === 'map'}>Map View</button>
  <button role="tab" aria-selected={view === 'list'}>List View</button>
</div>

{view === 'list' && (
  <table aria-label="Incident list">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Location</th>
        <th scope="col">Type</th>
      </tr>
    </thead>
    <tbody>
      {incidents.map((incident) => (
        <tr key={incident.id}>
          <td>{incident.temporal?.date}</td>
          <td>{incident.location?.name}</td>
          <td>{incident.classification?.incidentType}</td>
        </tr>
      ))}
    </tbody>
  </table>
)}

theme: {
  defaultTheme: 'system', // Respects prefers-color-scheme
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

<motion.div
  animate={{ scale: 1.1 }}
  transition={{ 
    duration: prefersReducedMotion ? 0 : 0.3 
  }}
/>

@media (forced-colors: active) {
  .incident-marker {
    forced-color-adjust: none;
    border: 2px solid CanvasText;
  }
  
  .button {
    border: 1px solid ButtonText;
  }
}

{/* Explicit label */}
<label htmlFor="search-input">Search incidents</label>
<input id="search-input" type="search" />

{/* Implicit label */}
<label>
  Search incidents
  <input type="search" />
</label>

{/* Visually hidden but accessible */}
<label htmlFor="search" className="sr-only">Search incidents</label>
<input id="search" type="search" placeholder="Search..." />

<div>
  <label htmlFor="date">Date</label>
  <input
    id="date"
    type="date"
    aria-invalid={!!error}
    aria-describedby={error ? 'date-error' : undefined}
  />
  {error && (
    <p id="date-error" role="alert" className="text-red-500">
      {error}
    </p>
  )}
</div>

<label htmlFor="location">
  Location
  <span aria-hidden="true" className="text-red-500">*</span>
  <span className="sr-only">(required)</span>
</label>
<input id="location" required aria-required="true" />

// Stats updates
<div aria-live="polite" aria-atomic="true">
  Showing {filteredCount} of {totalCount} incidents
</div>

// Unified loading states (data + map ready)
const [mapReady, setMapReady] = useState(false);
const appReady = !isLoading && mapReady;

<div aria-live="assertive" aria-busy={!appReady}>
  {!appReady ? 'Initializing...' : 'Application ready'}
</div>

// Filter changes
useEffect(() => {
  announceToScreenReader(`Filtered to ${filteredCount} incidents`);
}, [filteredCount]);

function announceToScreenReader(message: string) {
  const announcement = document.createElement('div');
  announcement.setAttribute('aria-live', 'polite');
  announcement.setAttribute('aria-atomic', 'true');
  announcement.className = 'sr-only';
  announcement.textContent = message;
  document.body.appendChild(announcement);
  setTimeout(() => announcement.remove(), 1000);
}

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test.describe('Accessibility', () => {
  test('should not have any automatically detectable accessibility issues', async ({ page }) => {
    await page.goto('/');
    await page.waitForSelector('.mapboxgl-map');

    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();

    expect(accessibilityScanResults.violations).toEqual([]);
  });
});

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

<body>
  <a
    href="#main-content"
    className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded"
  >
    Skip to main content
  </a>
  
  {/* ... */}
  
  <main id="main-content" tabIndex={-1}>
    {children}
  </main>
</body>