From 47d5558e4a01e0f97dd018956ea6415091346bc5 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Wed, 8 Jul 2026 13:27:32 +0200
Subject: [PATCH] =?UTF-8?q?feat(web):=20NavDrawer=20=E8=A1=A5=20aria-contr?=
 =?UTF-8?q?ols=20+=20ForeshadowCard=20=E8=AF=AD=E4=B9=89=E5=8C=96=20dl/dt/?=
 =?UTF-8?q?dd=EF=BC=88a11y=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NavDrawer 汉堡按钮补 aria-controls 指向抽屉面板（Drawer 新增可选 id prop，默认 nav-drawer）；ForeshadowCard 的 <dl> 裸 <div> 行改真 <dt>/<dd> 结构，可视文案不变，importance 用 sr-only 标签。行为不变。
---
 apps/web/components/Drawer.tsx                |  4 ++++
 apps/web/components/NavDrawer.tsx             |  5 +++++
 .../components/foreshadow/ForeshadowCard.tsx  | 19 ++++++++++++++++---
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/Drawer.tsx b/apps/web/components/Drawer.tsx
index 71d9473..bccc439 100644
--- a/apps/web/components/Drawer.tsx
+++ b/apps/web/components/Drawer.tsx
@@ -16,6 +16,8 @@ interface DrawerProps {
   side?: "left" | "right";
   // 无障碍标签（role=dialog）。
   label: string;
+  // 抽屉面板 id：供触发按钮 aria-controls 指向（无障碍关联）。
+  id?: string;
   triggerRef?: RefObject<HTMLElement | null>;
   children: ReactNode;
 }
@@ -27,6 +29,7 @@ export function Drawer({
   onClose,
   side = "left",
   label,
+  id,
   triggerRef,
   children,
 }: DrawerProps) {
@@ -58,6 +61,7 @@ export function Drawer({
     <div className={`${overlayScrim} lg:hidden`} onClick={onClose}>
       <div
         ref={panelRef}
+        id={id}
         role="dialog"
         aria-modal="true"
         aria-label={label}
diff --git a/apps/web/components/NavDrawer.tsx b/apps/web/components/NavDrawer.tsx
index 36f1595..11cadaf 100644
--- a/apps/web/components/NavDrawer.tsx
+++ b/apps/web/components/NavDrawer.tsx
@@ -15,6 +15,9 @@ interface NavDrawerProps {
   activeNav?: ActiveNav;
 }
 
+// 抽屉面板 id：供汉堡按钮 aria-controls 关联（无障碍）。
+const DRAWER_ID = "nav-drawer";
+
 // 移动端导航：汉堡按钮 + 左侧抽屉（仅 <lg；桌面用 LeftNav 静态侧栏）。UX §5.1。
 export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
   const [open, setOpen] = useState(false);
@@ -32,6 +35,7 @@ export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
         onClick={() => setOpen(true)}
         aria-label="打开导航"
         aria-expanded={open}
+        aria-controls={DRAWER_ID}
         variant="ghost"
         size="icon"
         className="-ml-2 lg:hidden"
@@ -43,6 +47,7 @@ export function NavDrawer({ projectId, activeNav }: NavDrawerProps) {
         onClose={() => setOpen(false)}
         side="left"
         label="主导航"
+        id={DRAWER_ID}
         triggerRef={triggerRef}
       >
         <div className="px-2 pb-2">
diff --git a/apps/web/components/foreshadow/ForeshadowCard.tsx b/apps/web/components/foreshadow/ForeshadowCard.tsx
index f759595..7b9a2ca 100644
--- a/apps/web/components/foreshadow/ForeshadowCard.tsx
+++ b/apps/web/components/foreshadow/ForeshadowCard.tsx
@@ -58,10 +58,23 @@ export function ForeshadowCard({
 
       <dl className="mt-2 space-y-0.5 text-xs text-ink-soft">
         {typeof item.planted_at === "number" ? (
-          <div>埋于 {item.planted_at} 章</div>
+          <div className="flex gap-1">
+            <dt>埋于</dt>
+            <dd>{item.planted_at} 章</dd>
+          </div>
+        ) : null}
+        {windowText ? (
+          <div className="flex gap-1">
+            <dt>窗口</dt>
+            <dd>{windowText}</dd>
+          </div>
+        ) : null}
+        {item.importance ? (
+          <div className="flex gap-1">
+            <dt className="sr-only">重要度</dt>
+            <dd>{item.importance}</dd>
+          </div>
         ) : null}
-        {windowText ? <div>窗口 {windowText}</div> : null}
-        {item.importance ? <div>{item.importance}</div> : null}
       </dl>
 
       {item.progress && item.progress.length > 0 ? (