无障碍框架 ​

// .eslintrc.js
module.exports = {
  plugins: ['jsx-a11y'],
  extends: [
    'plugin:jsx-a11y/recommended'
  ],
  rules: {
    'jsx-a11y/alt-text': 'error',
    'jsx-a11y/anchor-is-valid': 'error',
    'jsx-a11y/aria-props': 'error',
    'jsx-a11y/label-has-associated-control': 'error',
    'jsx-a11y/no-noninteractive-tabindex': 'warn'
  }
};

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { axe, toHaveNoViolations } from 'jest-axe';
import AccessibleButton from './AccessibleButton';

expect.extend(toHaveNoViolations);

describe('AccessibleButton', () => {
  test('通过无障碍测试', async () => {
    const { container } = render(
      <AccessibleButton onClick={jest.fn()}>
        测试按钮
      </AccessibleButton>
    );

    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  test('支持键盘交互', async () => {
    const handleClick = jest.fn();
    render(
      <AccessibleButton onClick={handleClick}>
        测试按钮
      </AccessibleButton>
    );

    const button = screen.getByRole('button', { name: '测试按钮' });
    button.focus();
    
    // 测试Enter键
    await userEvent.keyboard('{Enter}');
    expect(handleClick).toHaveBeenCalledTimes(1);

    // 测试空格键
    await userEvent.keyboard(' ');
    expect(handleClick).toHaveBeenCalledTimes(2);
  });

  test('禁用状态正确', () => {
    render(
      <AccessibleButton disabled onClick={jest.fn()}>
        禁用按钮
      </AccessibleButton>
    );

    const button = screen.getByRole('button', { name: '禁用按钮' });
    expect(button).toHaveAttribute('aria-disabled', 'true');
    expect(button).toHaveAttribute('tabindex', '-1');
  });
});

// cypress/plugins/index.js
const { injectAxe, checkA11y } = require('axe-cypress');

module.exports = (on, config) => {
  on('task', {
    log(message) {
      console.log(message);
      return null;
    }
  });
};

// cypress/support/commands.js
import 'axe-cypress/support';

Cypress.Commands.add('checkAccessibility', (context, options) => {
  cy.injectAxe();
  cy.checkA11y(context, options);
});

// cypress/integration/accessibility.spec.js
describe('页面无障碍测试', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.injectAxe();
  });

  it('首页应通过无障碍测试', () => {
    cy.checkA11y();
  });

  it('表单页面应通过无障碍测试', () => {
    cy.visit('/form');
    cy.checkA11y(null, {
      rules: {
        'color-contrast': { enabled: false } // 临时禁用颜色对比度规则
      }
    });
  });

  it('模态框应正确处理焦点', () => {
    cy.get('[data-testid="open-modal"]').click();
    cy.get('[role="dialog"]').should('be.visible');
    cy.focused().should('have.attr', 'role', 'dialog');
    
    // 测试焦点陷阱
    cy.tab().tab().tab();
    cy.focused().should('have.attr', 'data-testid', 'close-modal');
  });
});

// a11y-webpack-plugin.js
const { axe } = require('axe-core');
const { JSDOM } = require('jsdom');

class A11yWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapPromise('A11yWebpackPlugin', async (compilation) => {
      const a11yIssues = [];
      
      for (const [filename, source] of Object.entries(compilation.assets)) {
        if (filename.endsWith('.html')) {
          const dom = new JSDOM(source.source());
          const results = await axe.run(dom.window.document);
          
          if (results.violations.length > 0) {
            a11yIssues.push({
              file: filename,
              violations: results.violations
            });
          }
        }
      }
      
      if (a11yIssues.length > 0) {
        console.log('无障碍问题发现:');
        a11yIssues.forEach(({ file, violations }) => {
          console.log(`\n${file}:`);
          violations.forEach(violation => {
            console.log(`- ${violation.help}: ${violation.description}`);
          });
        });
        
        // 在开发模式下警告，生产模式下报错
        if (process.env.NODE_ENV === 'production') {
          throw new Error('构建失败：存在无障碍问题');
        }
      }
    });
  }
}

module.exports = A11yWebpackPlugin;

// a11y-auto-fix.js
const cheerio = require('cheerio');

function enhanceAccessibility(html) {
  const $ = cheerio.load(html);
  
  // 自动为自定义按钮添加角色
  $('[onclick]:not(button):not(a):not(input)').each((i, elem) => {
    const $elem = $(elem);
    if (!$elem.attr('role')) {
      $elem.attr('role', 'button');
      $elem.attr('tabindex', '0');
    }
  });
  
  // 为图片添加alt属性
  $('img:not([alt])').each((i, elem) => {
    const $elem = $(elem);
    const isDecorative = $elem.css('display') === 'none' || 
                        $elem.attr('width') === '1' || 
                        $elem.attr('height') === '1';
    
    $elem.attr('alt', isDecorative ? '' : '描述性文本需要手动添加');
  });
  
  return $.html();
}

class A11yMonitor {
  constructor() {
    this.issues = [];
    this.setupMonitoring();
  }
  
  setupMonitoring() {
    // 监控焦点管理
    document.addEventListener('focusin', this.handleFocusChange.bind(this));
    
    // 监控键盘交互
    document.addEventListener('keydown', this.handleKeyboardInteraction.bind(this));
    
    // 监控动态内容变化
    this.setupMutationObserver();
  }
  
  handleFocusChange(event) {
    const target = event.target;
    
    // 检查焦点指示器
    const style = window.getComputedStyle(target);
    if (style.outline === 'none' && style.boxShadow === 'none') {
      this.reportIssue('MISSING_FOCUS_INDICATOR', {
        element: target.tagName,
        selector: this.getSelector(target)
      });
    }
  }
  
  handleKeyboardInteraction(event) {
    // 检测可能的键盘陷阱
    if (event.key === 'Tab') {
      const focusableElements = this.getFocusableElements();
      const focusedIndex = focusableElements.indexOf(document.activeElement);
      
      if (focusedIndex === 0 && event.shiftKey) {
        this.reportIssue('POSSIBLE_KEYBOARD_TRAP', {
          selector: this.getSelector(document.activeElement)
        });
      }
    }
  }
  
  setupMutationObserver() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && 
            mutation.attributeName === 'aria-live') {
          this.validateLiveRegion(mutation.target);
        }
      });
    });
    
    observer.observe(document.body, {
      attributes: true,
      subtree: true,
      attributeFilter: ['aria-live', 'aria-atomic']
    });
  }
  
  validateLiveRegion(element) {
    const liveValue = element.getAttribute('aria-live');
    if (liveValue && !['polite', 'assertive'].includes(liveValue)) {
      this.reportIssue('INVALID_ARIA_LIVE', {
        value: liveValue,
        selector: this.getSelector(element)
      });
    }
  }
  
  getFocusableElements() {
    return Array.from(document.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    ));
  }
  
  getSelector(element) {
    if (element.id) return `#${element.id}`;
    if (element.className) return `.${element.className.split(' ')[0]}`;
    return element.tagName.toLowerCase();
  }
  
  reportIssue(type, data) {
    const issue = {
      type,
      data,
      timestamp: new Date().toISOString(),
      url: window.location.href
    };
    
    this.issues.push(issue);
    
    // 发送到监控服务
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/a11y-monitor', JSON.stringify(issue));
    }
  }
}

// 初始化监控
if (typeof window !== 'undefined') {
  window.a11yMonitor = new A11yMonitor();
}

// a11y-metrics-api.js
const express = require('express');
const router = express.Router();

// 存储无障碍指标
const a11yMetrics = {
  totalPages: 0,
  compliantPages: 0,
  commonIssues: {},
  complianceTrend: []
};

router.post('/report', (req, res) => {
  const { pageUrl, violations, timestamp } = req.body;
  
  // 更新指标
  a11yMetrics.totalPages++;
  
  if (violations.length === 0) {
    a11yMetrics.compliantPages++;
  }
  
  // 统计常见问题
  violations.forEach(violation => {
    const issueId = violation.id;
    a11yMetrics.commonIssues[issueId] = 
      (a11yMetrics.commonIssues[issueId] || 0) + 1;
  });
  
  // 计算合规率
  const complianceRate = (a11yMetrics.compliantPages / a11yMetrics.totalPages) * 100;
  a11yMetrics.complianceTrend.push({
    timestamp,
    rate: complianceRate
  });
  
  res.status(200).json({ success: true });
});

router.get('/metrics', (req, res) => {
  res.json({
    complianceRate: (a11yMetrics.compliantPages / a11yMetrics.totalPages) * 100,
    totalScannedPages: a11yMetrics.totalPages,
    commonIssues: Object.entries(a11yMetrics.commonIssues)
      .sort(([,a], [,b]) => b - a)
      .slice(0, 5)
      .map(([issue, count]) => ({ issue, count })),
    trend: a11yMetrics.complianceTrend.slice(-30) // 最近30个数据点
  });
});

module.exports = router;

// a11y-adapter.js
class A11yAdapter {
  static forReact(component) {
    return {
      ...component,
      a11yProps: this.generateA11yProps(component.props)
    };
  }
  
  static forVue(component) {
    return {
      ...component,
      computed: {
        ...component.computed,
        a11yAttributes() {
          return this.generateA11yProps(this.$attrs);
        }
      }
    };
  }
  
  static forAngular(directive) {
    return {
      ...directive,
      host: {
        ...directive.host,
        '[attr.role]': 'role',
        '[attr.aria-label]': 'ariaLabel',
        '[attr.tabindex]': 'tabindex'
      }
    };
  }
  
  static generateA11yProps(props) {
    const a11yProps = {};
    
    if (props.role) {
      a11yProps.role = props.role;
    }
    
    if (props.ariaLabel) {
      a11yProps['aria-label'] = props.ariaLabel;
    }
    
    if (props.disabled) {
      a11yProps['aria-disabled'] = true;
      a11yProps.tabIndex = -1;
    } else {
      a11yProps.tabIndex = 0;
    }
    
    return a11yProps;
  }
}

class MicroFrontendA11yManager {
  constructor() {
    this.applications = new Map();
    this.globalLiveRegions = new Set();
  }
  
  registerApplication(appId, a11yConfig) {
    this.applications.set(appId, {
      config: a11yConfig,
      status: 'active',
      focusTraps: new Set()
    });
  }
  
  setApplicationStatus(appId, status) {
    const app = this.applications.get(appId);
    if (app) {
      app.status = status;
      
      // 更新aria-hidden状态
      this.updateAriaHiddenStates();
    }
  }
  
  updateAriaHiddenStates() {
    const activeApps = Array.from(this.applications.entries())
      .filter(([_, app]) => app.status === 'active');
    
    this.applications.forEach((app, appId) => {
      const isActive = app.status === 'active';
      const appRoot = document.querySelector(`[data-app="${appId}"]`);
      
      if (appRoot) {
        appRoot.setAttribute('aria-hidden', !isActive);
        
        if (!isActive) {
          // 清理非活跃应用的焦点陷阱
          app.focusTraps.clear();
        }
      }
    });
  }
  
  registerFocusTrap(appId, element) {
    const app = this.applications.get(appId);
    if (app && app.status === 'active') {
      app.focusTraps.add(element);
    }
  }
  
  // 协调多个应用间的实时区域
  announce(message, priority = 'polite', appId = 'global') {
    const liveRegion = this.getOrCreateLiveRegion(priority);
    const announcement = document.createElement('div');
    announcement.textContent = `[${appId}] ${message}`;
    
    liveRegion.appendChild(announcement);
    
    setTimeout(() => {
      if (announcement.parentNode) {
        announcement.parentNode.removeChild(announcement);
      }
    }, 5000);
  }
  
  getOrCreateLiveRegion(priority) {
    const id = `global-live-region-${priority}`;
    let liveRegion = document.getElementById(id);
    
    if (!liveRegion) {
      liveRegion = document.createElement('div');
      liveRegion.id = id;
      liveRegion.setAttribute('aria-live', priority);
      liveRegion.setAttribute('aria-atomic', 'false');
      liveRegion.className = 'visually-hidden';
      document.body.appendChild(liveRegion);
      this.globalLiveRegions.add(liveRegion);
    }
    
    return liveRegion;
  }
}

// 全局管理器实例
window.microFrontendA11yManager = new MicroFrontendA11yManager();