Interactive Components and Widgets

<!-- Basic buttons -->
<button type="button" onclick="save()">Save</button>
<button type="submit">Submit Form</button>
<button type="reset">Clear</button>

<!-- Disabled button -->
<button disabled>Unavailable Action</button>
<button aria-disabled="true" onclick="showWarning()">
  Disabled but still focusable
</button>

<!-- Toggle button (pressed state) -->
<button 
  type="button"
  aria-pressed="false"
  onclick="this.setAttribute('aria-pressed', 
    this.getAttribute('aria-pressed') === 'false' ? 'true' : 'false')">
  <span aria-hidden="true">★</span> Favorite
</button>

<!-- Menu button -->
<button 
  type="button"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="menu-dropdown"
  id="menu-button">
  Options ▼
</button>
<ul id="menu-dropdown" role="menu" hidden>
  <li role="menuitem">Edit</li>
  <li role="menuitem">Delete</li>
</ul>

<!-- Button with loading state -->
<button type="submit" id="submit-btn">
  <span class="btn-content">Save Changes</span>
  <span class="btn-loading" hidden>
    <span class="spinner" aria-hidden="true"></span>
    Saving...
  </span>
</button>

<!-- Icon-only button (requires label) -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true">...close icon...</svg>
</button>

<!-- Button with description -->
<button 
  type="button"
  aria-describedby="delete-help">
  Delete Account
</button>
<span id="delete-help" class="help-text">
  This action cannot be undone
</span>

<!-- Trigger button -->
<button type="button" onclick="openDialog()">Open Dialog</button>

<!-- Modal dialog -->
<div 
  id="my-dialog"
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  class="modal"
  hidden>
  
  <!-- Backdrop -->
  <div class="modal-backdrop" onclick="closeDialog()"></div>
  
  <!-- Dialog content -->
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="dialog-title">Confirm Action</h2>
      <button 
        type="button" 
        aria-label="Close dialog"
        onclick="closeDialog()"
        class="close-btn">
        ×
      </button>
    </div>
    
    <div class="modal-body">
      <p id="dialog-desc">
        Are you sure you want to delete this item? This action cannot be undone.
      </p>
    </div>
    
    <div class="modal-footer">
      <button type="button" onclick="closeDialog()">Cancel</button>
      <button type="button" onclick="confirmAction()" class="btn-danger">
        Delete
      </button>
    </div>
  </div>
</div>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  max-width: 500px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>

<script>
let previousFocus = null;
const dialog = document.getElementById('my-dialog');

function openDialog() {
  // Store previous focus
  previousFocus = document.activeElement;
  
  // Make background inert
  document.body.style.overflow = 'hidden';
  
  // Show dialog
  dialog.hidden = false;
  
  // Focus first focusable element (close button or first action)
  const firstFocusable = dialog.querySelector('button');
  firstFocusable.focus();
  
  // Setup focus trap
  setupFocusTrap();
  
  // Listen for Escape key
  document.addEventListener('keydown', handleEscape);
}

function closeDialog() {
  // Hide dialog
  dialog.hidden = true;
  
  // Restore body scroll
  document.body.style.overflow = '';
  
  // Remove escape listener
  document.removeEventListener('keydown', handleEscape);
  
  // Restore focus
  if (previousFocus) {
    previousFocus.focus();
  }
}

function handleEscape(e) {
  if (e.key === 'Escape') {
    closeDialog();
  }
}

function setupFocusTrap() {
  const focusableElements = dialog.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  dialog.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;
    
    if (e.shiftKey) {
      if (document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      }
    } else {
      if (document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  });
}

function confirmAction() {
  console.log('Action confirmed');
  closeDialog();
}
</script>

<!-- Dropdown menu button -->
<div class="dropdown">
  <button 
    type="button"
    id="menu-button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="menu-list"
    onclick="toggleMenu()">
    Actions ▼
  </button>
  
  <ul 
    id="menu-list"
    role="menu"
    aria-labelledby="menu-button"
    hidden>
    <li role="none">
      <button role="menuitem" onclick="edit()">Edit</button>
    </li>
    <li role="none">
      <button role="menuitem" onclick="duplicate()">Duplicate</button>
    </li>
    <li role="separator"></li>
    <li role="none">
      <button role="menuitem" onclick="deleteItem()">Delete</button>
    </li>
  </ul>
</div>

<script>
const menuButton = document.getElementById('menu-button');
const menuList = document.getElementById('menu-list');
const menuItems = menuList.querySelectorAll('[role="menuitem"]');
let currentIndex = -1;

function toggleMenu() {
  const isOpen = menuButton.getAttribute('aria-expanded') === 'true';
  
  if (isOpen) {
    closeMenu();
  } else {
    openMenu();
  }
}

function openMenu() {
  menuButton.setAttribute('aria-expanded', 'true');
  menuList.hidden = false;
  currentIndex = 0;
  menuItems[0].focus();
  
  // Add event listeners
  document.addEventListener('click', handleOutsideClick);
  menuList.addEventListener('keydown', handleMenuKeydown);
}

function closeMenu() {
  menuButton.setAttribute('aria-expanded', 'false');
  menuList.hidden = true;
  menuButton.focus();
  currentIndex = -1;
  
  // Remove event listeners
  document.removeEventListener('click', handleOutsideClick);
  menuList.removeEventListener('keydown', handleMenuKeydown);
}

function handleMenuKeydown(e) {
  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault();
      currentIndex = (currentIndex + 1) % menuItems.length;
      menuItems[currentIndex].focus();
      break;
    case 'ArrowUp':
      e.preventDefault();
      currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
      menuItems[currentIndex].focus();
      break;
    case 'Home':
      e.preventDefault();
      currentIndex = 0;
      menuItems[0].focus();
      break;
    case 'End':
      e.preventDefault();
      currentIndex = menuItems.length - 1;
      menuItems[currentIndex].focus();
      break;
    case 'Escape':
      e.preventDefault();
      closeMenu();
      break;
    case 'Tab':
      e.preventDefault();
      closeMenu();
      break;
  }
}

function handleOutsideClick(e) {
  if (!menuList.contains(e.target) && e.target !== menuButton) {
    closeMenu();
  }
}
</script>

<!-- Autocomplete combobox -->
<div class="combobox-wrapper">
  <label for="country-input">Country</label>
  <input 
    type="text"
    id="country-input"
    role="combobox"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-controls="country-listbox"
    aria-activedescendant=""
    autocomplete="off"
    placeholder="Type to search...">
  
  <ul 
    id="country-listbox"
    role="listbox"
    aria-label="Countries"
    hidden>
  </ul>
</div>

<script>
const countries = [
  'United States', 'United Kingdom', 'Canada', 'Australia',
  'Germany', 'France', 'Spain', 'Italy', 'Japan', 'China'
];

const input = document.getElementById('country-input');
const listbox = document.getElementById('country-listbox');
let currentOption = -1;

input.addEventListener('input', (e) => {
  const value = e.target.value.toLowerCase();
  
  if (!value) {
    closeListbox();
    return;
  }
  
  // Filter countries
  const filtered = countries.filter(country => 
    country.toLowerCase().includes(value)
  );
  
  // Populate listbox
  listbox.innerHTML = filtered.map((country, index) => `
    <li 
      role="option" 
      id="option-${index}"
      onclick="selectOption('${country}')">
      ${country}
    </li>
  `).join('');
  
  if (filtered.length > 0) {
    openListbox();
  } else {
    closeListbox();
  }
});

input.addEventListener('keydown', (e) => {
  const options = listbox.querySelectorAll('[role="option"]');
  
  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault();
      if (input.getAttribute('aria-expanded') === 'false') {
        openListbox();
      }
      currentOption = Math.min(currentOption + 1, options.length - 1);
      updateActiveDescendant(options);
      break;
    case 'ArrowUp':
      e.preventDefault();
      currentOption = Math.max(currentOption - 1, 0);
      updateActiveDescendant(options);
      break;
    case 'Enter':
      e.preventDefault();
      if (currentOption >= 0 && options[currentOption]) {
        selectOption(options[currentOption].textContent.trim());
      }
      break;
    case 'Escape':
      closeListbox();
      break;
  }
});

function updateActiveDescendant(options) {
  options.forEach((opt, idx) => {
    opt.classList.toggle('selected', idx === currentOption);
  });
  
  if (options[currentOption]) {
    input.setAttribute('aria-activedescendant', options[currentOption].id);
  }
}

function openListbox() {
  input.setAttribute('aria-expanded', 'true');
  listbox.hidden = false;
  currentOption = -1;
}

function closeListbox() {
  input.setAttribute('aria-expanded', 'false');
  input.setAttribute('aria-activedescendant', '');
  listbox.hidden = true;
  currentOption = -1;
}

function selectOption(value) {
  input.value = value;
  closeListbox();
  input.focus();
}

// Close on outside click
document.addEventListener('click', (e) => {
  if (!input.contains(e.target) && !listbox.contains(e.target)) {
    closeListbox();
  }
});
</script>

<div class="tabs-container">
  <!-- Tab list -->
  <div role="tablist" aria-label="Content sections">
    <button 
      role="tab" 
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      Overview
    </button>
    <button 
      role="tab" 
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Features
    </button>
    <button 
      role="tab" 
      aria-selected="false"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1">
      Pricing
    </button>
  </div>
  
  <!-- Tab panels -->
  <div 
    role="tabpanel" 
    id="panel-1"
    aria-labelledby="tab-1"
    tabindex="0">
    <h3>Overview Content</h3>
    <p>This is the overview section...</p>
  </div>
  
  <div 
    role="tabpanel" 
    id="panel-2"
    aria-labelledby="tab-2"
    tabindex="0"
    hidden>
    <h3>Features Content</h3>
    <p>This is the features section...</p>
  </div>
  
  <div 
    role="tabpanel" 
    id="panel-3"
    aria-labelledby="tab-3"
    tabindex="0"
    hidden>
    <h3>Pricing Content</h3>
    <p>This is the pricing section...</p>
  </div>
</div>

<style>
.tabs-container {
  border: 1px solid #ddd;
  border-radius: 4px;
}

[role="tablist"] {
  display: flex;
  border-bottom: 2px solid #ddd;
  background: #f5f5f5;
}

[role="tab"] {
  padding: 12px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

[role="tab"]:hover {
  background: #e0e0e0;
}

[role="tab"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
  z-index: 1;
}

[role="tab"][aria-selected="true"] {
  background: white;
  border-bottom: 3px solid #0066cc;
  font-weight: 600;
  color: #0066cc;
}

[role="tabpanel"] {
  padding: 20px;
}

[role="tabpanel"]:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}
</style>

<script>
class TabWidget {
  constructor(tablist) {
    this.tablist = tablist;
    this.tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
    this.panels = this.tabs.map(tab => 
      document.getElementById(tab.getAttribute('aria-controls'))
    );
    this.currentIndex = this.tabs.findIndex(
      tab => tab.getAttribute('aria-selected') === 'true'
    );
    
    this.setupEventListeners();
  }
  
  setupEventListeners() {
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
    });
  }
  
  selectTab(index) {
    // Deselect all tabs
    this.tabs.forEach((tab, i) => {
      const isSelected = i === index;
      tab.setAttribute('aria-selected', isSelected);
      tab.setAttribute('tabindex', isSelected ? '0' : '-1');
      
      // Show/hide panels
      if (this.panels[i]) {
        this.panels[i].hidden = !isSelected;
      }
    });
    
    // Focus selected tab
    this.tabs[index].focus();
    this.currentIndex = index;
  }
  
  handleKeydown(e, currentIndex) {
    let newIndex = currentIndex;
    
    switch(e.key) {
      case 'ArrowLeft':
        e.preventDefault();
        newIndex = (currentIndex - 1 + this.tabs.length) % this.tabs.length;
        this.selectTab(newIndex);
        break;
      case 'ArrowRight':
        e.preventDefault();
        newIndex = (currentIndex + 1) % this.tabs.length;
        this.selectTab(newIndex);
        break;
      case 'Home':
        e.preventDefault();
        this.selectTab(0);
        break;
      case 'End':
        e.preventDefault();
        this.selectTab(this.tabs.length - 1);
        break;
    }
  }
}

// Initialize all tab widgets
document.querySelectorAll('[role="tablist"]').forEach(tablist => {
  new TabWidget(tablist);
});
</script>

<!-- Native disclosure (best accessibility) -->
<details>
  <summary>What is accessibility?</summary>
  <p>
    Accessibility ensures that websites and applications can be used by 
    everyone, including people with disabilities who may use assistive 
    technologies like screen readers.
  </p>
</details>

<details open>
  <summary>Why is it important?</summary>
  <p>
    It's not just a legal requirement - it makes your content available 
    to a wider audience and improves usability for everyone.
  </p>
</details>

<style>
details {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  list-style: none; /* Remove default marker */
  display: flex;
  align-items: center;
}

/* Custom marker */
summary::before {
  content: "▶";
  margin-right: 8px;
  transition: transform 0.2s;
  display: inline-block;
}

details[open] summary::before {
  transform: rotate(90deg);
}

/* Remove default marker in WebKit */
summary::-webkit-details-marker {
  display: none;
}

summary:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  border-radius: 2px;
}

details p {
  margin-top: 12px;
  padding-left: 24px;
}
</style>

<!-- Custom accordion -->
<div class="accordion">
  <h3>
    <button 
      type="button"
      aria-expanded="false"
      aria-controls="section1"
      id="accordion1"
      class="accordion-trigger">
      <span class="accordion-title">Personal Information</span>
      <span class="accordion-icon" aria-hidden="true">+</span>
    </button>
  </h3>
  <div 
    id="section1"
    role="region"
    aria-labelledby="accordion1"
    class="accordion-panel"
    hidden>
    <p>Content for personal information section...</p>
  </div>
  
  <h3>
    <button 
      type="button"
      aria-expanded="false"
      aria-controls="section2"
      id="accordion2"
      class="accordion-trigger">
      <span class="accordion-title">Account Settings</span>
      <span class="accordion-icon" aria-hidden="true">+</span>
    </button>
  </h3>
  <div 
    id="section2"
    role="region"
    aria-labelledby="accordion2"
    class="accordion-panel"
    hidden>
    <p>Content for account settings section...</p>
  </div>
  
  <h3>
    <button 
      type="button"
      aria-expanded="false"
      aria-controls="section3"
      id="accordion3"
      class="accordion-trigger">
      <span class="accordion-title">Privacy Options</span>
      <span class="accordion-icon" aria-hidden="true">+</span>
    </button>
  </h3>
  <div 
    id="section3"
    role="region"
    aria-labelledby="accordion3"
    class="accordion-panel"
    hidden>
    <p>Content for privacy options section...</p>
  </div>
</div>

<style>
.accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion h3 {
  margin: 0;
  border-bottom: 1px solid #ddd;
}

.accordion h3:last-of-type {
  border-bottom: none;
}

.accordion-trigger {
  width: 100%;
  padding: 16px;
  border: none;
  background: white;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  transition: background 0.2s;
}

.accordion-trigger:hover {
  background: #f5f5f5;
}

.accordion-trigger:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
  z-index: 1;
}

.accordion-trigger[aria-expanded="true"] {
  background: #f0f8ff;
}

.accordion-icon {
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.2s;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel {
  padding: 16px;
  border-top: 1px solid #ddd;
}

.accordion-panel[hidden] {
  display: none;
}
</style>

<script>
class Accordion {
  constructor(element) {
    this.accordion = element;
    this.triggers = Array.from(element.querySelectorAll('.accordion-trigger'));
    this.allowMultiple = element.hasAttribute('data-allow-multiple');
    
    this.triggers.forEach((trigger, index) => {
      trigger.addEventListener('click', () => this.toggle(index));
    });
  }
  
  toggle(index) {
    const trigger = this.triggers[index];
    const panel = document.getElementById(trigger.getAttribute('aria-controls'));
    const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
    
    // Close other panels if not allowing multiple
    if (!this.allowMultiple && !isExpanded) {
      this.triggers.forEach((t, i) => {
        if (i !== index) {
          this.collapse(i);
        }
      });
    }
    
    // Toggle current panel
    if (isExpanded) {
      this.collapse(index);
    } else {
      this.expand(index);
    }
  }
  
  expand(index) {
    const trigger = this.triggers[index];
    const panel = document.getElementById(trigger.getAttribute('aria-controls'));
    
    trigger.setAttribute('aria-expanded', 'true');
    panel.hidden = false;
  }
  
  collapse(index) {
    const trigger = this.triggers[index];
    const panel = document.getElementById(trigger.getAttribute('aria-controls'));
    
    trigger.setAttribute('aria-expanded', 'false');
    panel.hidden = true;
  }
}

// Initialize all accordions
document.querySelectorAll('.accordion').forEach(accordion => {
  new Accordion(accordion);
});
</script>

// Custom Widget Development Template
class CustomWidget {
  constructor(element) {
    this.element = element;
    this.isInitialized = false;
    
    // Validate element exists
    if (!this.element) {
      console.error('Widget element not found');
      return;
    }
    
    this.init();
  }
  
  init() {
    // 1. Set ARIA roles and initial state
    this.setupARIA();
    
    // 2. Setup keyboard interaction
    this.setupKeyboard();
    
    // 3. Setup mouse/touch interaction
    this.setupPointer();
    
    // 4. Setup focus management
    this.setupFocus();
    
    this.isInitialized = true;
  }
  
  setupARIA() {
    // Set role if not already present
    if (!this.element.hasAttribute('role')) {
      this.element.setAttribute('role', 'widget-role');
    }
    
    // Set initial ARIA states
    this.element.setAttribute('aria-label', 'Widget name');
    this.element.setAttribute('tabindex', '0');
    
    // Set dynamic ARIA properties
    this.updateARIAState();
  }
  
  updateARIAState() {
    // Update ARIA states based on widget state
    // Example: aria-expanded, aria-selected, aria-checked, etc.
  }
  
  setupKeyboard() {
    this.element.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'Enter':
        case ' ':
          e.preventDefault();
          this.activate();
          break;
        case 'ArrowUp':
        case 'ArrowDown':
        case 'ArrowLeft':
        case 'ArrowRight':
          e.preventDefault();
          this.navigate(e.key);
          break;
        case 'Home':
          e.preventDefault();
          this.navigateToFirst();
          break;
        case 'End':
          e.preventDefault();
          this.navigateToLast();
          break;
        case 'Escape':
          e.preventDefault();
          this.close();
          break;
        case 'Tab':
          // Allow default tab behavior unless in focus trap
          if (this.isFocusTrapped) {
            e.preventDefault();
            this.handleTabInTrap(e.shiftKey);
          }
          break;
      }
    });
  }
  
  setupPointer() {
    // Click events
    this.element.addEventListener('click', (e) => {
      this.handleClick(e);
    });
    
    // Touch events for mobile
    this.element.addEventListener('touchstart', (e) => {
      this.handleTouch(e);
    }, { passive: true });
  }
  
  setupFocus() {
    // Focus events
    this.element.addEventListener('focus', () => {
      this.onFocus();
    });
    
    this.element.addEventListener('blur', () => {
      this.onBlur();
    });
  }
  
  // Widget-specific methods
  activate() {
    console.log('Widget activated');
    this.updateARIAState();
  }
  
  navigate(direction) {
    console.log('Navigate:', direction);
  }
  
  navigateToFirst() {
    console.log('Navigate to first');
  }
  
  navigateToLast() {
    console.log('Navigate to last');
  }
  
  close() {
    console.log('Widget closed');
  }
  
  handleClick(e) {
    console.log('Clicked:', e.target);
  }
  
  handleTouch(e) {
    console.log('Touch:', e.target);
  }
  
  onFocus() {
    this.element.classList.add('focused');
  }
  
  onBlur() {
    this.element.classList.remove('focused');
  }
  
  handleTabInTrap(isShiftTab) {
    // Implement focus trap logic
  }
  
  // Public API
  destroy() {
    // Clean up event listeners
    this.element.removeAttribute('role');
    this.element.removeAttribute('tabindex');
    this.isInitialized = false;
  }
}

// Usage
const widget = new CustomWidget(document.getElementById('my-widget'));