HotKeys 设计文档
声明一组键盘快捷键组合并绑定 keydown 监听(默认全局 document.body,可局部),命中触发回调,并渲染语义化 <kbd> 键位提示。修饰键精确匹配 + 普通键用 event.code(物理键位,规避输入法/大小写),mergeMetaCtrl 真正实现跨平台合并 Cmd/Ctrl(Semi 该 prop 未生效)。
← API 文档使用建议
声明一组键盘快捷键组合并绑定 keydown 监听(默认全局 document.body,可局部),命中触发回调,并渲染语义化 <kbd> 键位提示。修饰键精确匹配 + 普通键用 event.code(物理键位,规避输入法/大小写),mergeMetaCtrl 真正实现跨平台合并 Cmd/Ctrl(Semi 该 prop 未生效)。
Accessibility
- 每个键位用语义化 <kbd> 承载(超越 Semi 的 span),屏幕阅读器识别为键盘输入
- `+` 分隔符 aria-hidden="true"
- 提示容器 aria-keyshortcuts 声明快捷键(W3C 语法:Control+K)
- 匹配用 event.code 物理键位,规避输入法/大小写/Shift
- 键位文本可选中(不设 user-select:none,允许复制)
- 对比度:键位块文字/背景 ≥4.5:1;RTL:从逻辑起始排列
- 提示纯展示无焦点;监听不引入焦点陷阱
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-hotkeys-content-bg | var(--cd-color-fill-0) | 单个 <kbd> 键位块背景 |
--cd-hotkeys-content-border | var(--cd-color-border) | 单个键位块边框色 |
--cd-hotkeys-content-color | var(--cd-color-text-1) | 键位块内文字/符号颜色 |
--cd-hotkeys-split-color | var(--cd-color-text-2) | 键位之间 + 分隔符颜色 |