diff --git a/.ua/backlog.json b/.ua/backlog.json index 7d16013..73ce003 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -668,6 +668,14 @@ "acceptance": "select({ searchable: true }) 弹层顶部带搜索框,打开即聚焦、实时包含匹配、无命中显示「无匹配选项」,↑↓/Home/End 只在可见项间移动;README 分组行补齐新组件;npm run check 全绿", "status": "done", "notes": "自补:既有组件可用性细节" + }, + { + "id": "g39", + "title": "统一键盘焦点可见性 + 可访问性约定入文档", + "motivation": "多数组件为自绘样式写了 outline:none,只有 14 处补了 focus-visible 光环,漏掉的组件键盘 Tab 过去完全看不出焦点在哪", + "acceptance": "ui.css 顶部统一 [class^=ua-]:focus-visible 描边兜底(不引入硬编码色);README 增「可访问性约定」章节;npm run check 全绿", + "status": "open", + "notes": "自补:既有组件可用性细节" } ] } diff --git a/README.md b/README.md index 96df875..0e78c06 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,12 @@ accordion · alert · avatar · badge · breadcrumb · button · carousel · car 分组:表单(button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / segmented / upload / form + formItem)、反馈(alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic)、浮层(tooltip / popover / modal / drawer / menu)、导航(tabs / breadcrumb / pagination / accordion / stepper / tree)、数据展示(dataTable / descriptions / card / list / timeline / tag / avatar / image / carousel)、其他(divider)。 +## 可访问性约定 + +- 键盘焦点:所有库内元素统一 `outline: 2px solid var(--ua-color-accent)`(focus-visible 专属,鼠标点击不出现),组件自绘的 box-shadow 光环与它叠加不冲突。 +- 关键交互都有键盘等价:Tab 进焦点、Enter/空格 激活、↑↓/Home/End 在列表类组件内移动、Esc 逐层关闭(内层先关,不连带外层)。 +- 语义与播报:modal/drawer 带 `role="dialog" aria-modal`、toast/notification/empty/result 带 `role="status"/"alert"`,切换类组件用 `aria-selected`/`aria-expanded` 同步状态。 + ## 目录 | 路径 | 说明 | diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index cd38b47..3ee5257 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1,4 +1,11 @@ /* @ui-arch 组件皮肤:只消费 @ui-arch/tokens 的 --ua-* 变量 */ + +/* —— 键盘焦点可见性:组件普遍用 outline:none 自绘,这里统一兜底,避免键盘用户丢失焦点指示 —— */ +[class^='ua-']:focus-visible, +[class*=' ua-']:focus-visible { + outline: 2px solid var(--ua-color-accent); + outline-offset: 2px; +} .ua-btn { padding: 6px 14px; border: 1px solid var(--ua-color-accent);