Screen Readers (VoiceOver, NVDA, JAWS) & Cookie Banners

/**
 * Compliant Native Dialog CMP Focus Controller
 * Demonstrates APG Modal Dialog pattern with keyboard containment and accessible switches.
 */
class AccessibleConsentDialog {
  constructor(modalElement) {
    this.modal = modalElement;
    this.focusableElementsSelector = 'button, [role="switch"], [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    this.previouslyFocusedElement = null;
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  open() {
    this.previouslyFocusedElement = document.activeElement;
    this.modal.setAttribute('role', 'dialog');
    this.modal.setAttribute('aria-modal', 'true');
    this.modal.setAttribute('aria-labelledby', 'cmp-title');
    this.modal.setAttribute('aria-describedby', 'cmp-desc');
    this.modal.classList.remove('hidden');

    const focusables = this.getFocusableElements();
    if (focusables.length > 0) {
      focusables[0].focus();
    }

    document.addEventListener('keydown', this.handleKeyDown);
  }

  close() {
    document.removeEventListener('keydown', this.handleKeyDown);
    this.modal.classList.add('hidden');
    if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
      this.previouslyFocusedElement.focus();
    }
  }

  getFocusableElements() {
    return Array.from(this.modal.querySelectorAll(this.focusableElementsSelector))
      .filter(el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
  }

  handleKeyDown(e) {
    if (e.key === 'Escape') {
      // Mandatory per WCAG 2.1.2 - Rejection or secondary dismissal
      e.preventDefault();
      this.close();
      return;
    }

    if (e.key === 'Tab') {
      const focusables = this.getFocusableElements();
      if (focusables.length === 0) return;

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

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

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

test.describe('CMP Assistive Technology Verification Suite', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('CMP container satisfies WCAG 2.2 Dialog and ARIA specifications', async ({ page }) => {
    const dialog = page.locator('#cmp-dialog-root');
    await expect(dialog).toBeVisible();

    // Verify ARIA dialog contract
    await expect(dialog).toHaveAttribute('role', 'dialog');
    await expect(dialog).toHaveAttribute('aria-modal', 'true');

    // Verify Accessible Name Computation
    const labelledBy = await dialog.getAttribute('aria-labelledby');
    expect(labelledBy).toBeTruthy();
    const heading = page.locator(`#${labelledBy}`);
    await expect(heading).toBeVisible();
    await expect(heading).not.toBeEmpty();

    // Run Axe automated accessibility engine scoped to banner
    const accessibilityScanResults = await new AxeBuilder({ page })
      .include('#cmp-dialog-root')
      .withRules(['aria-roles', 'aria-valid-attr-value', 'aria-valid-attr', 'button-name', 'color-contrast'])
      .analyze();

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

  test('Keyboard navigation retains strict focus trap within CMP', async ({ page }) => {
    const dialog = page.locator('#cmp-dialog-root');
    await expect(dialog).toBeVisible();

    // Verify initial focus landed inside the CMP
    const focusedElement = page.locator(':focus');
    const isContained = await dialog.evaluate((node, active) => node.contains(active), await focusedElement.elementHandle());
    expect(isContained).toBe(true);

    // Tab cycle verification: Loop 10 times to assert focus never leaks to background
    for (let i = 0; i < 10; i++) {
      await page.keyboard.press('Tab');
      const currentFocus = page.locator(':focus');
      const inside = await dialog.evaluate((node, active) => node.contains(active), await currentFocus.elementHandle());
      expect(inside).toBe(true);
    }
  });

  test('Category switch controls expose role and state to screen readers', async ({ page }) => {
    // Open customization panel
    await page.locator('#cmp-btn-customize').click();
    const switches = page.locator('#cmp-dialog-root [role="switch"]');
    const count = await switches.count();
    expect(count).toBeGreaterThan(0);

    for (let i = 0; i < count; i++) {
      const toggle = switches.nth(i);
      
      // Assert accessible name calculation
      const name = await toggle.evaluate((el) => window.getComputedAccessibleName?.(el) || el.getAttribute('aria-label'));
      expect(name).toBeTruthy();

      // Verify initial state is valid boolean string
      const initialState = await toggle.getAttribute('aria-checked');
      expect(['true', 'false']).toContain(initialState);

      // Test Spacebar interaction
      await toggle.focus();
      await page.keyboard.press('Space');
      const newState = await toggle.getAttribute('aria-checked');
      expect(newState).toBe(initialState === 'true' ? 'false' : 'true');
    }
  });
});