Extension Accessibility Checklist

// Toggle button with proper ARIA state
function createToggle(label: string, initialState: boolean): HTMLButtonElement {
  const button = document.createElement("button");
  button.setAttribute("role", "switch");
  button.setAttribute("aria-checked", String(initialState));
  button.setAttribute("aria-label", label);
  button.textContent = initialState ? "On" : "Off";
 
  button.addEventListener("click", () => {
    const current = button.getAttribute("aria-checked") === "true";
    const next = !current;
    button.setAttribute("aria-checked", String(next));
    button.textContent = next ? "On" : "Off";
  });
 
  // Keyboard: Space and Enter both toggle
  button.addEventListener("keydown", (e) => {
    if (e.key === " " || e.key === "Enter") {
      e.preventDefault();
      button.click();
    }
  });
 
  return button;
}

<!-- Announce dynamic status changes to screen readers -->
<div id="status" role="status" aria-live="polite" aria-atomic="true">
  <!-- Content updated dynamically -->
</div>
 
<script>
  function updateStatus(message: string): void {
    const status = document.getElementById("status")!;
    // Clear first, then set — ensures re-announcement of same message
    status.textContent = "";
    requestAnimationFrame(() => {
      status.textContent = message;
    });
  }
 
  // Usage:
  updateStatus("Settings saved successfully");
  updateStatus("3 items selected");
  updateStatus("Loading complete — 42 results found");
</script>

function trapFocus(container: HTMLElement): () => void {
  const focusable = container.querySelectorAll<HTMLElement>(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
 
  function handler(e: KeyboardEvent): void {
    if (e.key !== "Tab") return;
 
    if (e.shiftKey) {
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } else {
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }
 
  container.addEventListener("keydown", handler);
  first.focus();
 
  // Return cleanup function
  return () => container.removeEventListener("keydown", handler);
}

// playwright.config.ts — add accessibility tests to E2E suite
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
 
test("popup meets WCAG 2.1 AA", async ({ page }) => {
  // Load the popup page
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
 
  // Run axe accessibility scan
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
    .analyze();
 
  // Fail the test if any violations are found
  expect(results.violations).toEqual([]);
});
 
test("options page keyboard navigation", async ({ page }) => {
  await page.goto(`chrome-extension://${EXTENSION_ID}/options.html`);
 
  // Tab through all interactive elements
  const focusOrder: string[] = [];
  for (let i = 0; i < 20; i++) {
    await page.keyboard.press("Tab");
    const focused = await page.evaluate(() => {
      const el = document.activeElement;
      return el ? `${el.tagName.toLowerCase()}${el.id ? "#" + el.id : ""}` : "none";
    });
    focusOrder.push(focused);
    if (focused === "none" || focused === "body") break;
  }
 
  // Verify logical focus order (customize for your UI)
  expect(focusOrder[0]).toContain("input"); // Search field first
  expect(focusOrder).not.toContain("none"); // No focus traps
});