KeyUX 项目使用教程

KeyUX 项目使用教程

keyux JS library to improve keyboard UI of web apps 项目地址: https://gitcode.com/gh_mirrors/ke/keyux

1. 项目介绍

KeyUX 是一个用于改善网页应用键盘用户界面的 JavaScript 库。它不仅为无障碍设计（a11y）提供了支持，还旨在创建用户更倾向于使用键盘的专业工具。KeyUX 提供了以下功能：

• 添加带有 aria-keyshortcuts 的热键
• 当热键被按下时显示按钮的 :active 状态
• 在 role="menu" 列表中使用键盘箭头进行导航
• 根据 aria-controls 跳转到下一个部分，并使用 Esc 返回
• 显示和隐藏 role="menu" 的子菜单
• 允许用户覆盖热键

KeyUX 是一个轻量级的库，无依赖，适用于任何框架，包括 React、Vue 和 Svelte。

2. 项目快速启动

安装

首先，使用 npm 安装 KeyUX：

npm install keyux

快速启动代码

在主 JavaScript 文件中添加以下代码以启动 KeyUX：

import { 
  hiddenKeyUX, 
  hotkeyKeyUX, 
  hotkeyOverrides, 
  jumpKeyUX, 
  focusGroupKeyUX, 
  pressKeyUX, 
  startKeyUX 
} from 'keyux';

const overrides = hotkeyOverrides([]);

startKeyUX(window, [
  hotkeyKeyUX([overrides]),
  focusGroupKeyUX(),
  pressKeyUX('is-pressed'),
  jumpKeyUX(),
  hiddenKeyUX()
]);

3. 应用案例和最佳实践

案例1：添加热键

KeyUX 允许你为按钮或链接添加热键。例如，按下 Alt+B 或 ⌥ B 时，KeyUX 会点击以下按钮：

<button aria-keyshortcuts="alt+b">Bold</button>

案例2：热键提示

你可以渲染来自 aria-keyshortcuts 模式的热键提示，使其更美观：

import { likelyWithKeyboard, getHotKeyHint } from 'keyux';

export const Button = ({ hotkey, children }) => {
  return (
    <button aria-keyshortcuts={hotkey}>
      {children}
      {likelyWithKeyboard(window) && <kbd>{getHotKeyHint(window, hotkey)}</kbd>}
    </button>
  );
};

案例3：热键覆盖

许多用户希望覆盖热键，因为你的热键可能与他们的浏览器扩展、系统或屏幕阅读器冲突。KeyUX 允许使用 hotkeyOverrides 进行热键覆盖：

import { getHotKeyHint, hotkeyOverrides, hotkeyKeyUX, startKeyUX } from 'keyux';

const overrides = { 'alt+b': 'b' }; // 将 B 覆盖为 Alt + B

startKeyUX(window, [
  hotkeyKeyUX([hotkeyOverrides(overrides)])
]);

getHotKeyHint(window, 'b', [hotkeyOverrides(overrides)]); // 返回 Alt + B

4. 典型生态项目

KeyUX 是一个独立的 JavaScript 库，但它可以与其他前端框架和库无缝集成。以下是一些典型的生态项目：

• React: KeyUX 可以与 React 结合使用，提供更好的键盘导航和热键支持。
• Vue: 在 Vue 项目中使用 KeyUX，可以增强应用的无障碍性和用户体验。
• Svelte: KeyUX 与 Svelte 的集成可以提供轻量级且高效的键盘交互。

通过这些集成，KeyUX 可以帮助开发者创建更加用户友好的网页应用。

keyux JS library to improve keyboard UI of web apps 项目地址: https://gitcode.com/gh_mirrors/ke/keyux