JavaScript Accessibility APIs

// BAD: Silent update - screen reader doesn't know
function updateBadge(count) {
  document.querySelector('.badge').textContent = count;
}

// GOOD: Use live region for dynamic updates
function updateBadge(count) {
  const badge = document.querySelector('.badge');
  badge.textContent = count;
  badge.setAttribute('aria-live', 'polite');
  badge.setAttribute('aria-atomic', 'true');
}

// GOOD: Manage focus when adding content
function addNotification(message) {
  const notification = document.createElement('div');
  notification.setAttribute('role', 'alert');
  notification.textContent = message;
  document.body.appendChild(notification);
  // role="alert" automatically announces in screen readers
}

// GOOD: Move focus before removing element
function deleteItem(itemId) {
  const item = document.getElementById(itemId);
  const nextFocusTarget = item.nextElementSibling || 
                          item.previousElementSibling || 
                          document.querySelector('.item-list');
  
  // Move focus first
  nextFocusTarget?.focus();
  
  // Then remove
  item.remove();
  
  // Announce the action
  announce(`Item deleted. ${getItemCount()} items remaining.`);
}

// Helper: Create accessible announcer
function announce(message, priority = 'polite') {
  const announcer = document.getElementById('sr-announcer') || 
                    createAnnouncer();
  announcer.textContent = message;
  announcer.setAttribute('aria-live', priority);
}

function createAnnouncer() {
  const div = document.createElement('div');
  div.id = 'sr-announcer';
  div.className = 'sr-only';
  div.setAttribute('aria-live', 'polite');
  div.setAttribute('aria-atomic', 'true');
  document.body.appendChild(div);
  return div;
}

// BAD: Mouse-only interaction
element.addEventListener('mouseenter', showTooltip);
element.addEventListener('mouseleave', hideTooltip);

// GOOD: Keyboard and mouse support
element.addEventListener('mouseenter', showTooltip);
element.addEventListener('mouseleave', hideTooltip);
element.addEventListener('focus', showTooltip);
element.addEventListener('blur', hideTooltip);

// GOOD: Accessible custom keyboard handler
function handleKeyboard(event) {
  // Don't override browser shortcuts
  if (event.ctrlKey || event.metaKey) return;
  
  switch(event.key) {
    case 'ArrowDown':
      event.preventDefault();
      focusNext();
      break;
    case 'ArrowUp':
      event.preventDefault();
      focusPrevious();
      break;
    case 'Home':
      event.preventDefault();
      focusFirst();
      break;
    case 'End':
      event.preventDefault();
      focusLast();
      break;
    case 'Escape':
      closeDialog();
      break;
  }
}

// GOOD: Accessible click handler on custom element
const customButton = document.querySelector('.custom-button');
customButton.setAttribute('role', 'button');
customButton.setAttribute('tabindex', '0');

customButton.addEventListener('click', handleAction);
customButton.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleAction();
  }
});

// GOOD: Context menu with keyboard support
element.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  showContextMenu(e.clientX, e.clientY);
});

// Add keyboard trigger
element.addEventListener('keydown', (e) => {
  if (e.key === 'F10' && e.shiftKey) {
    e.preventDefault();
    const rect = element.getBoundingClientRect();
    showContextMenu(rect.left, rect.bottom);
  }
});

<!-- HTML: Live region containers (create once) -->
<div id="alert-region" role="alert" aria-live="assertive" aria-atomic="true"></div>
<div id="status-region" role="status" aria-live="polite" aria-atomic="true"></div>

<!-- Visual-hidden announcer for screen readers -->
<div id="sr-announcer" class="sr-only" aria-live="polite" aria-atomic="true"></div>

<style>
.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;
}
</style>

// Announcement utility class
class A11yAnnouncer {
  constructor() {
    this.politeRegion = this.createRegion('polite');
    this.assertiveRegion = this.createRegion('assertive');
  }
  
  createRegion(priority) {
    const region = document.createElement('div');
    region.className = 'sr-only';
    region.setAttribute('aria-live', priority);
    region.setAttribute('aria-atomic', 'true');
    document.body.appendChild(region);
    return region;
  }
  
  announce(message, priority = 'polite') {
    const region = priority === 'assertive' 
      ? this.assertiveRegion 
      : this.politeRegion;
    
    // Clear and set new message
    region.textContent = '';
    setTimeout(() => {
      region.textContent = message;
    }, 100); // Small delay ensures announcement
  }
  
  announceError(message) {
    this.announce(message, 'assertive');
  }
  
  announceSuccess(message) {
    this.announce(message, 'polite');
  }
}

// Usage
const announcer = new A11yAnnouncer();

// Form validation
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  try {
    await saveData();
    announcer.announceSuccess('Form saved successfully');
  } catch (error) {
    announcer.announceError('Error: ' + error.message);
  }
});

// Search results update
function updateSearchResults(results) {
  displayResults(results);
  announcer.announce(
    `${results.length} results found for "${searchTerm}"`
  );
}

// Loading state
function setLoading(isLoading) {
  if (isLoading) {
    announcer.announce('Loading...');
  } else {
    announcer.announce('Loading complete');
  }
}

// Route change focus management
class Router {
  navigate(newRoute) {
    // Update content
    this.updateContent(newRoute);
    
    // Update document title
    document.title = `${newRoute.title} - App Name`;
    
    // Focus management strategy
    const mainHeading = document.querySelector('h1');
    if (mainHeading) {
      // Make heading focusable
      mainHeading.setAttribute('tabindex', '-1');
      
      // Focus and announce
      mainHeading.focus();
      
      // Announce page change
      this.announce(`Navigated to ${newRoute.title}`);
    }
  }
}

// Modal focus trap
class AccessibleModal {
  constructor(modalElement) {
    this.modal = modalElement;
    this.previousFocus = null;
    this.focusableSelectors = 
      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
  }
  
  open() {
    // Store current focus
    this.previousFocus = document.activeElement;
    
    // Show modal
    this.modal.style.display = 'block';
    this.modal.setAttribute('aria-hidden', 'false');
    
    // Get focusable elements
    this.focusableElements = Array.from(
      this.modal.querySelectorAll(this.focusableSelectors)
    );
    
    // Focus first element
    if (this.focusableElements.length) {
      this.focusableElements[0].focus();
    }
    
    // Add trap
    this.modal.addEventListener('keydown', this.trapFocus.bind(this));
    document.addEventListener('focus', this.returnFocus.bind(this), true);
  }
  
  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();
    }
  }
  
  returnFocus(e) {
    if (!this.modal.contains(e.target)) {
      e.stopPropagation();
      this.focusableElements[0]?.focus();
    }
  }
  
  close() {
    this.modal.style.display = 'none';
    this.modal.setAttribute('aria-hidden', 'true');
    
    // Remove trap
    this.modal.removeEventListener('keydown', this.trapFocus);
    document.removeEventListener('focus', this.returnFocus, true);
    
    // Restore focus
    this.previousFocus?.focus();
  }
}

// Item deletion focus management
function deleteItem(itemElement) {
  // Find next focus target
  const nextItem = itemElement.nextElementSibling;
  const prevItem = itemElement.previousElementSibling;
  const parentList = itemElement.closest('[role="list"]');
  
  const nextFocus = nextItem || prevItem || parentList;
  
  // Remove item
  itemElement.remove();
  
  // Focus next logical element
  if (nextFocus) {
    if (nextFocus === parentList) {
      nextFocus.setAttribute('tabindex', '-1');
    }
    nextFocus.focus();
  }
  
  // Announce deletion
  announce('Item deleted');
}

// ARIA Reflection: Set ARIA via JavaScript properties
const button = document.querySelector('button');

// Old way: setAttribute
button.setAttribute('aria-pressed', 'true');
button.setAttribute('aria-label', 'Toggle menu');

// New way: ARIA reflection (cleaner, type-safe)
button.ariaPressed = 'true';
button.ariaLabel = 'Toggle menu';

// Supports all ARIA properties
button.ariaExpanded = 'false';
button.ariaHasPopup = 'menu';
button.ariaDisabled = 'true';

// Read computed accessibility properties
console.log(button.computedRole);  // "button"
console.log(button.computedLabel); // "Toggle menu"

// Validation: Check if element has accessible name
function validateAccessibleName(element) {
  const label = element.computedLabel;
  if (!label || label.trim() === '') {
    console.warn('Element missing accessible name:', element);
    return false;
  }
  return true;
}

// Debugging: Log accessibility tree info
function debugA11y(element) {
  console.log({
    role: element.computedRole,
    name: element.computedLabel,
    ariaExpanded: element.ariaExpanded,
    ariaPressed: element.ariaPressed,
    ariaDisabled: element.ariaDisabled
  });
}

// Dynamic ARIA management
class ToggleButton {
  constructor(element) {
    this.element = element;
    this.pressed = false;
  }
  
  toggle() {
    this.pressed = !this.pressed;
    // Use ARIA reflection
    this.element.ariaPressed = String(this.pressed);
    
    // Verify computed value
    console.log('Computed label:', this.element.computedLabel);
  }
}

// Feature detection
if ('ariaPressed' in Element.prototype) {
  // Use ARIA reflection
  button.ariaPressed = 'true';
} else {
  // Fallback to setAttribute
  button.setAttribute('aria-pressed', 'true');
}

// Accessible custom input with ElementInternals
class AccessibleInput extends HTMLElement {
  static formAssociated = true;
  
  constructor() {
    super();
    this.internals = this.attachInternals();
    
    // Create shadow DOM with focus delegation
    const shadow = this.attachShadow({ 
      mode: 'open',
      delegatesFocus: true 
    });
    
    shadow.innerHTML = `
      <style>
        :host {
          display: inline-block;
        }
        input {
          padding: 8px;
          border: 1px solid #ccc;
        }
        input:focus {
          outline: 2px solid #0066cc;
          outline-offset: 2px;
        }
      </style>
      <slot name="label"></slot>
      <input type="text" id="input" />
    `;
    
    this.input = shadow.querySelector('input');
    this.setupAccessibility();
  }
  
  setupAccessibility() {
    // Forward ARIA attributes from host to input
    const observer = new MutationObserver(() => {
      this.updateARIA();
    });
    
    observer.observe(this, {
      attributes: true,
      attributeFilter: ['aria-label', 'aria-describedby', 'aria-required']
    });
    
    this.updateARIA();
    
    // Handle input changes for form
    this.input.addEventListener('input', () => {
      this.internals.setFormValue(this.input.value);
    });
  }
  
  updateARIA() {
    // Copy ARIA from host to internal input
    ['aria-label', 'aria-describedby', 'aria-required'].forEach(attr => {
      const value = this.getAttribute(attr);
      if (value) {
        this.input.setAttribute(attr, value);
      } else {
        this.input.removeAttribute(attr);
      }
    });
  }
  
  // Expose value for forms
  get value() {
    return this.input.value;
  }
  
  set value(val) {
    this.input.value = val;
    this.internals.setFormValue(val);
  }
  
  // Form validation
  checkValidity() {
    return this.internals.checkValidity();
  }
}

customElements.define('accessible-input', AccessibleInput);

// Usage
// <accessible-input aria-label="Email address" aria-required="true">
//   <label slot="label">Email</label>
// </accessible-input>

// Accessible button component
class AccessibleButton extends HTMLElement {
  constructor() {
    super();
    
    const shadow = this.attachShadow({ 
      mode: 'open',
      delegatesFocus: true 
    });
    
    shadow.innerHTML = `
      <style>
        button {
          padding: 12px 24px;
          background: #0066cc;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
        button:hover {
          background: #0052a3;
        }
        button:focus-visible {
          outline: 2px solid #0066cc;
          outline-offset: 2px;
        }
      </style>
      <button>
        <slot></slot>
      </button>
    `;
    
    this.button = shadow.querySelector('button');
    
    // Forward click events
    this.button.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('custom-click', {
        bubbles: true,
        composed: true
      }));
    });
  }
}

customElements.define('accessible-button', AccessibleButton);