feat(web): NavDrawer 补 aria-controls + ForeshadowCard 语义化 dl/dt/dd(a11y)
NavDrawer 汉堡按钮补 aria-controls 指向抽屉面板(Drawer 新增可选 id prop,默认 nav-drawer);ForeshadowCard 的 <dl> 裸 <div> 行改真 <dt>/<dd> 结构,可视文案不变,importance 用 sr-only 标签。行为不变。
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user