task-18(壳层/路由): 实现壳层键盘焦点与可访问性语义

AdminLayout 增加 role=navigation 侧边栏地标、aria-expanded/aria-label 折叠按钮、
#admin-content 主区锚点与“跳到主内容”skip-link;main.css 提供 :focus-visible 焦点环
与 skip-link 聚焦样式;e2e 8 用例用键盘回车切换折叠并断言 ARIA 语义。
This commit is contained in:
2026-09-05 12:34:27 +08:00
parent 7ffae78919
commit ba12e04d1e
4 changed files with 95 additions and 4 deletions
+10 -3
View File
@@ -79,7 +79,8 @@ async function signOut() {
<template>
<div class="admin-shell" :class="{ 'is-collapsed': collapsed }">
<aside class="admin-sidebar">
<a class="skip-link" href="#admin-content">跳到主内容</a>
<aside class="admin-sidebar" role="navigation" aria-label="侧边栏菜单">
<div class="admin-brand">
<img :src="logoUrl" alt="数富AI" class="admin-brand-logo" />
<div v-if="!collapsed" class="admin-brand-copy">
@@ -107,7 +108,13 @@ async function signOut() {
<el-empty v-if="emptyMenu" :description="EMPTY_MENU_TITLE" :image-size="72" />
</el-scrollbar>
<button class="sidebar-collapse" type="button" @click="toggleSidebar">
<button
class="sidebar-collapse"
type="button"
:aria-expanded="!collapsed"
aria-label="切换侧边栏"
@click="toggleSidebar"
>
{{ collapsed ? '展开菜单' : '收起菜单' }}
</button>
</aside>
@@ -126,7 +133,7 @@ async function signOut() {
<el-button text type="danger" @click="signOut">退出登录</el-button>
</div>
</header>
<main class="admin-content">
<main id="admin-content" class="admin-content">
<el-breadcrumb v-if="breadcrumbs.length > 1" class="admin-breadcrumb" separator="/">
<el-breadcrumb-item v-for="crumb in breadcrumbs" :key="crumb.key">{{ crumb.name }}</el-breadcrumb-item>
</el-breadcrumb>