super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
admin-frontend-vue/src/styles/main.css
+7
View File
@@ -32,6 +32,13 @@ button, input, textarea, select { font: inherit; }
.menu-group-title { font-weight: 600; }
.sidebar-collapse { margin: 12px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #aeb8cc; background: transparent; cursor: pointer; }
.sidebar-collapse:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.sidebar-collapse:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
position: fixed; left: 16px; top: 16px; z-index: 2000; width: auto; height: auto;
padding: 10px 14px; background: #fff; color: var(--admin-primary);
border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); text-decoration: none;
}
.admin-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; padding: 18px 28px; background: #fff; border-bottom: 1px solid var(--admin-border); }
.admin-kicker { color: var(--admin-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; }