/* 示例：四角停靠 + 用户偏好持久化 */
.sign-language-window {
  position: fixed;
  inset-inline-start: var(--sl-offset-x, 16px);
  inset-block-start: var(--sl-offset-y, 16px);
  z-index: 1050; /* 高于业务层，低于模态弹层 */
  transition: inset 0.2s ease;
}

/* 用户拖拽后写入 localStorage */
function persistPosition(x, y) {
  localStorage.setItem('sl-window-pos', JSON.stringify({x, y}));
}

flowchart TD
    A[页面加载] --> B{手语窗口是否展开}
    B -- 是 --> C[焦点移入窗口内部首个可聚焦元素]
    B -- 否 --> D[焦点停留在“展开手语”按钮]
    C --> E[Tab 循环仅在窗口内部]
    E --> F[Esc / 关闭按钮 → 焦点回退至触发源]
    F --> D

const trapFocus = (container) => {
  const focusable = container.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  container.addEventListener('keydown', (e) => {
    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();
    }
  });
};

name: Accessibility Gate
on: [pull_request]
jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm run test:a11y   # 运行 jest-axe 单测
      - name: Playwright E2E
        uses: microsoft/playwright-github-action@v1
      - run: npx playwright test --project=chromium-a11y
      - name: Upload axe report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: axe-results
          path: test-results/axe-report.json

sequenceDiagram
    participant ASR as 语音识别/文本输入
    participant NLP as 语义分析+韵律预测
    participant Anim as 动作合成引擎
    participant Render as WebGPU 渲染器
    ASR->>NLP: 文本 + 时间戳
    NLP->>Anim: Phoneme序列 + Prosody标记(语调/停顿/重音)
    Anim->>Anim: BlendShape插值 + 手语语法重排(SOV语序)
    Anim->>Render: 每帧骨骼矩阵 + 表情系数
    Render-->>User: 60fps 手语数字人

// 基于 WebRTC Stats API 的实时切流逻辑
setInterval(() => {
  const stats = await pc.getStats();
  const rtt = stats.get('remote-inbound-rtp')?.roundTripTime ?? 999;
  const pl = stats.get('inbound-rtp')?.packetsLost ?? 0;
  const bw = estimateBandwidth(stats); // kbps

  if (bw < 150 || rtt > 400 || pl > 0.05) switchLayer('L0');
  else if (bw < 500) switchLayer('L1');
  else if (bw < 1200) switchLayer('L2');
  else switchLayer('L3');
}, 2000);

{
  "scene": "gov-service-hall",
  "windowPolicy": {
    "defaultDock": "bottom-right",
    "allowDrag": false,          // 固定位置，防遮挡叫号屏
    "autoExpandOnQueue": true,   // 叫号触发自动展开
    "minWidth": 320              // 适配 1920×1080 大屏
  },
  "interaction": {
    "trigger": ["voice-wakeup", "physical-button", "qr-code"],
    "focusTrap": "strict",       // 焦点不逃逸
    "ttsSync": true              // 同步播报字幕给视力障碍者
  },
  "compliance": {
    "standard": "GB/T 37668-2019",
    "level": "AAA",
    "auditLog": true             // 全链路操作审计
  }
}

# 产物体积预算 (webpack/bundle-analyzer)
sign-language-sdk:
  core: 45 KB (gz)      # 交互逻辑、焦点管理、ARIA 注入
  renderer-webgl: 38 KB # Three.js 精简版 + 着色器
  renderer-webgpu: 52 KB # WebGPU 路径
  model-int8: 1.2 MB    # 手语骨骼+BlendShape 模型 (Brotil 压缩后 380 KB)
  dict-medical: 180 KB  # 专业词典按需加载
  ---
  Total (首屏): < 200 KB gz

flowchart LR
    A[范围界定] --> B[样本选取<br/>关键流程≥5个<br/>含手语窗口全状态]
    B --> C[自动化扫描<br/>axe-core + 自定义规则]
    C --> D[人工评审<br/>键盘/屏幕阅读器/放大镜/语音控制]
    D --> E[缺陷分级<br/>Critical/Serious/Moderate/Minor]
    E --> F[整改验证<br/>回归测试+用户复测]
    F --> G[VPAT 2.4/ACR 生成]
    G --> H[第三方盖章<br/>中国信通院/北京信通院等]

// wp-content/plugins/sign-language-window/init.php
function slw_enqueue_assets() {
  wp_enqueue_script('slw-core', 'https://cdn.example.com/slw/v2.3.1/core.min.js', [], '2.3.1', true);
  wp_enqueue_style('slw-theme', 'https://cdn.example.com/slw/v2.3.1/theme-gov.css');
  wp_localize_script('slw-core', 'SLW_CONFIG', [
    'apiEndpoint' => get_option('slw_api_endpoint'),
    'scene'       => 'gov-service',
    'nonce'       => wp_create_nonce('slw_rest'),
  ]);
}
add_action('wp_enqueue_scripts', 'slw_enqueue_assets');

// 后台设置页：仅需填 API Key、选择场景、勾选“强制高对比度”

// React 示例：SignLanguageWindow.tsx
import { SignLanguageProvider, useSignLanguage } from '@sign-language/sdk-react';

export const SignLanguageWindow = () => {
  const { open, close, toggle, docking, contrastMode } = useSignLanguage();

  return (
    <SignLanguageProvider
      config={{
        scene: 'education-live',
        apiKey: import.meta.env.VITE_SL_API_KEY,
        onError: (e) => sentry.captureException(e),
      }}
    >
      <FloatingActionButton
        aria-label="打开手语翻译"
        onClick={toggle}
        icon={<SignLanguageIcon />}
        badge={unreadCount}
      />
      {/* 窗口本体由 Portal 渲染至 body，自动处理焦点陷阱、z-index、响应式 */}
    </SignLanguageProvider>
  );
};