aria ​

// 获取元素的可访问性信息
const element = document.getElementById('custom');
const name = element.getAttribute('aria-label') || element.textContent;
const role = element.getAttribute('role');
const state = {
  disabled: element.getAttribute('aria-disabled') === 'true',
  expanded: element.getAttribute('aria-expanded'),
  pressed: element.getAttribute('aria-pressed')
};

console.log(`角色: ${role}, 名称: ${name}, 状态:`, state);

class TabComponent {
  constructor(container) {
    this.tablist = container.querySelector('[role="tablist"]');
    this.tabs = container.querySelectorAll('[role="tab"]');
    this.panels = container.querySelectorAll('[role="tabpanel"]');
    
    this.bindEvents();
  }
  
  bindEvents() {
    this.tabs.forEach(tab => {
      tab.addEventListener('click', () => this.activateTab(tab));
      tab.addEventListener('keydown', (e) => this.handleKeydown(e, tab));
    });
  }
  
  activateTab(selectedTab) {
    // 更新标签状态
    this.tabs.forEach(tab => {
      const isSelected = tab === selectedTab;
      tab.setAttribute('aria-selected', isSelected);
      tab.setAttribute('tabindex', isSelected ? '0' : '-1');
    });
    
    // 更新面板显示
    this.panels.forEach(panel => {
      const isActive = panel.getAttribute('aria-labelledby') === selectedTab.id;
      panel.hidden = !isActive;
    });
  }
  
  handleKeydown(event, tab) {
    const key = event.key;
    const currentIndex = Array.from(this.tabs).indexOf(tab);
    
    switch(key) {
      case 'ArrowRight':
        event.preventDefault();
        const nextTab = this.tabs[(currentIndex + 1) % this.tabs.length];
        nextTab.focus();
        this.activateTab(nextTab);
        break;
        
      case 'ArrowLeft':
        event.preventDefault();
        const prevTab = this.tabs[(currentIndex - 1 + this.tabs.length) % this.tabs.length];
        prevTab.focus();
        this.activateTab(prevTab);
        break;
        
      case 'Home':
        event.preventDefault();
        this.tabs[0].focus();
        this.activateTab(this.tabs[0]);
        break;
        
      case 'End':
        event.preventDefault();
        this.tabs[this.tabs.length - 1].focus();
        this.activateTab(this.tabs[this.tabs.length - 1]);
        break;
    }
  }
}

let previousActiveElement;

function openModal() {
  const modal = document.getElementById('modal');
  previousActiveElement = document.activeElement;
  
  // 显示模态框
  modal.hidden = false;
  
  // 设置焦点陷阱
  trapFocus(modal);
  
  // 将焦点移动到模态框
  const firstFocusable = modal.querySelector('button, input, select');
  firstFocusable.focus();
  
  // 隐藏背景内容
  document.querySelector('main').setAttribute('aria-hidden', 'true');
}

function closeModal() {
  const modal = document.getElementById('modal');
  modal.hidden = true;
  
  // 恢复背景内容
  document.querySelector('main').removeAttribute('aria-hidden');
  
  // 恢复焦点
  if (previousActiveElement) {
    previousActiveElement.focus();
  }
}

function trapFocus(modal) {
  const focusableElements = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        // Shift + Tab
        if (document.activeElement === firstElement) {
          lastElement.focus();
          e.preventDefault();
        }
      } else {
        // Tab
        if (document.activeElement === lastElement) {
          firstElement.focus();
          e.preventDefault();
        }
      }
    } else if (e.key === 'Escape') {
      closeModal();
    }
  });
}

class AccessibleComponent {
  constructor(element) {
    this.element = element;
    this.updateAriaAttributes();
  }
  
  updateAriaAttributes() {
    // 根据组件状态更新ARIA
    const isExpanded = this.element.classList.contains('expanded');
    this.element.setAttribute('aria-expanded', isExpanded);
    
    const isDisabled = this.element.disabled;
    this.element.setAttribute('aria-disabled', isDisabled);
  }
  
  // 使用MutationObserver监听变化
  observeChanges() {
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes') {
          this.updateAriaAttributes();
        }
      });
    });
    
    observer.observe(this.element, {
      attributes: true,
      attributeFilter: ['class', 'disabled']
    });
  }
}

// ARIA规则测试
axe.run(document, {
  rules: {
    'aria-valid-attr': { enabled: true },
    'aria-required-attr': { enabled: true },
    'aria-required-parent': { enabled: true },
    'aria-required-children': { enabled: true }
  }
}, (err, results) => {
  if (err) throw err;
  
  results.violations.forEach(violation => {
    console.log('ARIA违规:', violation.description);
    violation.nodes.forEach(node => {
      console.log('问题节点:', node.html);
      console.log('修复建议:', node.any.map(fix => fix.message));
    });
  });
});

function validateAriaUsage(element) {
  const issues = [];
  
  // 检查无效属性
  const validAttrs = [
    'role', 'aria-label', 'aria-labelledby', 'aria-describedby',
    'aria-hidden', 'aria-disabled', 'aria-expanded', 'aria-pressed',
    // ... 其他有效属性
  ];
  
  Array.from(element.attributes).forEach(attr => {
    if (attr.name.startsWith('aria-') && !validAttrs.includes(attr.name)) {
      issues.push(`无效ARIA属性: ${attr.name}`);
    }
  });
  
  // 检查必需属性
  const role = element.getAttribute('role');
  if (role === 'button' && !element.hasAttribute('tabindex')) {
    issues.push('自定义按钮需要tabindex属性');
  }
  
  // 检查关系完整性
  const labelledBy = element.getAttribute('aria-labelledby');
  if (labelledBy && !document.getElementById(labelledBy)) {
    issues.push(`aria-labelledby指向不存在的元素: ${labelledBy}`);
  }
  
  return issues;
}