changan-su/forsion/responsive-accessible-ui

<!-- index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="importmap">{ "imports": {
  "react": "https://esm.sh/react@18.3.1",
  "react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
  "react/jsx-runtime": "https://esm.sh/react@18.3.1/jsx-runtime"
}}</script>
<link rel="stylesheet" href="./styles.css">
<div id="root"></div>
<script type="module" src="./main.tsx"></script>

/* 自适应网格:不写媒体查询,列数随宽度自动增减 */
.auto-grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
/* 内容居中限宽,两侧留白 */
.page { display: grid; grid-template-columns: 1fr min(70ch, 100%) 1fr; }
.page > * { grid-column: 2; }
/* 弹性行:超窄自动换行,别硬撑溢出 */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar .spacer { margin-inline-start: auto; }   /* 把右侧推到底 */

:root {
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);    /* 流式正文 */
  --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);   /* 流式标题 */
  --gutter: clamp(1rem, 5vw, 2.5rem);                 /* 流式留白 */
}
h1 { font-size: var(--step-2); }

<button aria-label="搜索"><SearchIcon aria-hidden="true" /></button>
<button aria-expanded={open} aria-controls="menu">菜单</button>
<div role="status" aria-live="polite">{msg}</div>   {/* polite 不打断 */}

:focus-visible { outline: 3px solid var(--focus, #2563eb); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

function Modal({ onClose, children }: { onClose: () => void; children: React.ReactNode }) {
  const ref = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    const prev = document.activeElement as HTMLElement;          // 记住触发元素
    const box = ref.current!;
    (box.querySelector<HTMLElement>('[autofocus],button,[href],input') ?? box).focus();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') return onClose();
      if (e.key !== 'Tab') return;
      const f = box.querySelectorAll<HTMLElement>(
        'a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])');
      if (!f.length) return;
      const first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    };
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('keydown', onKey); prev?.focus(); }; // 归还焦点
  }, [onClose]);
  return (
    <div className="overlay" onClick={onClose}>
      <div ref={ref} role="dialog" aria-modal="true" aria-labelledby="dlg-t"
           onClick={(e) => e.stopPropagation()}>
        <h2 id="dlg-t">标题</h2>{children}
      </div>
    </div>
  );
}

@media (prefers-reduced-motion: reduce) {          /* 前庭敏感用户友好 */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
:root { color-scheme: light dark; --bg: #fff; --fg: #1a1a1a; }  /* 控件/滚动条跟随 */
@media (prefers-color-scheme: dark) { :root { --bg: #0f0f0f; --fg: #ededed; } }
body { background: var(--bg); color: var(--fg); }

<label htmlFor="email">邮箱</label>
<input id="email" type="email" autoComplete="email"
       aria-invalid={!!err} aria-describedby={err ? 'email-err' : undefined} />
{err && <p id="email-err" role="alert">{err}</p>}

.icon-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
@media (pointer: coarse) { .btn { min-height: 48px; } }