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)键位之间 + 分隔符颜色