♿ Accessibility Guidelines for Interactive Demos¶

// Keyboard navigation implementation
class AccessibleComponent {
  setupKeyboardNavigation() {
    this.element.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'Tab':
          this.handleTabNavigation(e);
          break;
        case 'Enter':
        case ' ': // Space
          this.handleActivation(e);
          break;
        case 'Escape':
          this.handleEscape(e);
          break;
        case 'ArrowUp':
        case 'ArrowDown':
        case 'ArrowLeft':
        case 'ArrowRight':
          this.handleArrowNavigation(e);
          break;
      }
    });
  }

  handleTabNavigation(event) {
    // Ensure proper tab order
    const focusableElements = this.getFocusableElements();
    // Implement custom tab order if needed
  }

  getFocusableElements() {
    return this.element.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
  }
}

// Focus indicator management
class FocusManager {
  constructor() {
    this.setupFocusIndicators();
    this.setupFocusTrap();
  }

  setupFocusIndicators() {
    // Ensure visible focus indicators
    const style = document.createElement('style');
    style.textContent = `
      :focus {
        outline: 3px solid #0078D4;
        outline-offset: 2px;
      }

      :focus:not(:focus-visible) {
        outline: none;
      }

      :focus-visible {
        outline: 3px solid #0078D4;
        outline-offset: 2px;
      }
    `;
    document.head.appendChild(style);
  }

  setupFocusTrap(containerElement) {
    // Trap focus within modal/dialog
    const focusableElements = containerElement.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

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

    containerElement.addEventListener('keydown', (e) => {
      if (e.key === 'Tab') {
        if (e.shiftKey && document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        } else if (!e.shiftKey && document.activeElement === lastElement) {
          e.preventDefault();
          firstElement.focus();
        }
      }
    });
  }
}

// Announce changes to screen readers
class LiveRegionAnnouncer {
  constructor() {
    this.createLiveRegion();
  }

  createLiveRegion() {
    const liveRegion = document.createElement('div');
    liveRegion.setAttribute('role', 'status');
    liveRegion.setAttribute('aria-live', 'polite');
    liveRegion.setAttribute('aria-atomic', 'true');
    liveRegion.className = 'sr-only';
    document.body.appendChild(liveRegion);
    this.liveRegion = liveRegion;
  }

  announce(message, priority = 'polite') {
    this.liveRegion.setAttribute('aria-live', priority);
    this.liveRegion.textContent = message;

    // Clear after announcement
    setTimeout(() => {
      this.liveRegion.textContent = '';
    }, 1000);
  }

  announceError(errorMessage) {
    this.announce(`Error: ${errorMessage}`, 'assertive');
  }

  announceSuccess(successMessage) {
    this.announce(successMessage, 'polite');
  }
}

// Usage example
const announcer = new LiveRegionAnnouncer();
announcer.announce('Cost calculation updated: $2,350 per month');
announcer.announceSuccess('Configuration saved successfully');
announcer.announceError('Invalid data volume. Please enter a value between 0 and 100');

// Accessible modal implementation
class AccessibleModal {
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.openButton = document.querySelector(`[data-modal="${modalId}"]`);
    this.closeButton = this.modal.querySelector('.modal-close');
    this.previousFocus = null;

    this.setup();
  }

  setup() {
    this.openButton.addEventListener('click', () => this.open());
    this.closeButton.addEventListener('click', () => this.close());

    // Close on escape
    this.modal.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.close();
      }
    });

    // Close on backdrop click
    this.modal.addEventListener('click', (e) => {
      if (e.target === this.modal) {
        this.close();
      }
    });
  }

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

    // Show modal
    this.modal.style.display = 'block';
    this.modal.setAttribute('aria-hidden', 'false');

    // Trap focus
    const focusableElements = this.modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    if (focusableElements.length > 0) {
      focusableElements[0].focus();
    }

    // Prevent body scroll
    document.body.style.overflow = 'hidden';

    // Announce to screen readers
    announcer.announce('Dialog opened');
  }

  close() {
    // Hide modal
    this.modal.style.display = 'none';
    this.modal.setAttribute('aria-hidden', 'true');

    // Restore focus
    if (this.previousFocus) {
      this.previousFocus.focus();
    }

    // Restore body scroll
    document.body.style.overflow = '';

    // Announce to screen readers
    announcer.announce('Dialog closed');
  }
}

// Automated accessibility testing with axe-core
const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');

async function testAccessibility(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(url);
  await page.setBypassCSP(true);

  const results = await new AxePuppeteer(page).analyze();

  console.log(`Accessibility Violations: ${results.violations.length}`);

  results.violations.forEach(violation => {
    console.log(`\n[${violation.impact}] ${violation.id}`);
    console.log(violation.description);
    console.log(`Help: ${violation.helpUrl}`);

    violation.nodes.forEach(node => {
      console.log(`  - ${node.html}`);
    });
  });

  await browser.close();

  return results.violations.length === 0;
}

// Test all interactive demos
const demoUrls = [
  'http://localhost:8000/demos/cost-calculator',
  'http://localhost:8000/demos/query-playground',
  'http://localhost:8000/demos/pipeline-builder'
];

(async () => {
  for (const url of demoUrls) {
    console.log(`\nTesting: ${url}`);
    const passed = await testAccessibility(url);
    console.log(`Result: ${passed ? 'PASSED' : 'FAILED'}`);
  }
})();