// types/accessibility.ts
export type A11yMode = 'standard' | 'large' | 'high-contrast' | 'reduced-motion';
export interface A11yProfile {
  mode: A11yMode[];
  fontScale: 1.0 | 1.3 | 1.5;
  announce: (msg: string, priority?: 'polite' | 'assertive') => void;
}

// components/AccessibleProvider.tsx
export const AccessibleProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const [profile, setProfile] = useState<A11yProfile>(() => loadFromLocalStorage());
  const announce = useCallback((msg, priority = 'polite') => {
    const el = document.getElementById('a11y-live-region');
    if (el) { el.setAttribute('aria-live', priority); el.textContent = msg; }
  }, []);

  // 同步 CSS 变量到 :root，实现全局生效
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--ui-scale', String(profile.fontScale));
    root.classList.toggle('a11y-high-contrast', profile.mode.includes('high-contrast'));
    root.classList.toggle('a11y-reduced-motion', profile.mode.includes('reduced-motion'));
    saveToLocalStorage(profile);
  }, [profile]);

  return (
    <A11yContext.Provider value={{ profile, setProfile, announce }}>
      {children}
      {/* 全局 Live Region，供 Toast/字幕/状态变化广播 */}
      <div id="a11y-live-region" role="status" aria-live="polite" className="sr-only" />
    </A11yContext.Provider>
  );
};

:root { --ui-scale: 1; --focus-ring: 0 0 0 3px #0060df; }
.a11y-high-contrast { --bg: #000; --text: #fff; --border: #ff0; --focus-ring: 0 0 0 3px #ff0; }
.a11y-reduced-motion * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.btn { font-size: calc(14px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale)); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

// hooks/useKeyboardTrap.ts
export const useKeyboardTrap = (isActive: boolean, containerRef: RefObject<HTMLElement>) => {
  useEffect(() => {
    if (!isActive) return;
    const container = containerRef.current;
    if (!container) return;
    const focusable = container.querySelectorAll<HTMLElement>(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusable[0]; const last = focusable[focusable.length - 1];
    const handler = (e: KeyboardEvent) => {
      if (e.key !== 'Tab') return;
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    };
    container.addEventListener('keydown', handler);
    first?.focus();
    return () => container.removeEventListener('keydown', handler);
  }, [isActive, containerRef]);
};

// hooks/useVoiceCommand.ts (基于 Web Speech API 离线唤醒 + 在线识别)
export const useVoiceCommand = (commands: Record<string, () => void>, wakeWord = '小会') => {
  useEffect(() => {
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'zh-CN'; recognition.continuous = true; recognition.interimResults = true;
    let buffer = '';
    recognition.onresult = (e) => {
      const transcript = Array.from(e.results).map(r => r[0].transcript).join('');
      if (transcript.includes(wakeWord)) {
        buffer = transcript.split(wakeWord)[1].trim();
        Object.entries(commands).forEach(([cmd, fn]) => {
          if (buffer.includes(cmd)) { fn(); buffer = ''; }
        });
      }
    };
    recognition.start();
    return () => recognition.stop();
  }, [commands, wakeWord]);
};

# .github/workflows/a11y.yml
name: Accessibility Regression
on: [pull_request, push]
jobs:
  lint-and-unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      # 1. 静态代码扫描（ESLint + jsx-a11y）
      - run: npm run lint:a11y
      # 2. 单测覆盖组件 ARIA 属性
      - run: npm run test:a11y -- --coverage

  e2e-pa11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm run preview
      # 3. Pa11y-CI 覆盖核心流程（入会->开启字幕->切换大字->退会）
      - run: npx pa11y-ci --config .pa11yci.json
        env:
          PA11Y_STANDARD: WCAG2AA
          PA11Y_THRESHOLD: 0  # 零容忍新增违规

  real-device-cloud:
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4
      # 4. 接入 BrowserStack / Sauce Labs / 头部真机云
      # 运行 Cypress/Playwright 在真实 iOS VoiceOver / Android TalkBack 环境
      - run: npm run test:real-device -- --env TAGS="@a11y"

{
  "defaults": { "standard": "WCAG2AA", "timeout": 30000, "wait": 1000 },
  "urls": [
    { "url": "http://localhost:3000/join?mid=demo", "name": "入会页" },
    { "url": "http://localhost:3000/meeting?mid=demo", "name": "会中页", "actions": [
      "click button[aria-label='无障碍设置']",
      "click button[aria-label='大字模式']",
      "wait for .a11y-large to be visible"
    ]}
  ]
}

// config/features.ts
export const features = {
  medical: { 
    subtitleGlossary: 'medical-v3', 
    emergencyBtn: true, 
    familyProxyJoin: true, 
    e2eEncryption: true 
  },
  education: { 
    subtitleGlossary: 'edu-common', 
    playbackRate: [0.5, 0.75, 1, 1.25, 1.5], 
    noteVoiceInput: true, 
    highContrastSlides: true 
  },
  gov: { 
    weakNetworkFallback: 'pstn-bridge', // 电话会议兜底
    largeKeySupport: true, 
    voteLargeMode: true, 
    xinchuangCertified: true 
  }
} as const;

"scripts": {
  "a11y:preflight": "npm run lint:a11y && npm run test:a11y && npx pa11y-ci && node scripts/check-focus-order.js"
}