# KeyUX

JS library to improve the keyboard UI of web apps. It is designed not only
for **a11y**, but also to create **professions tools** where users prefer
to use the keyboard.

- Add **hotkeys** with `aria-keyshortcuts`.
- Show a button’s `:active` state when a hotkey is pressed.
- Enable **navigation with keyboard arrows** in `role="menu"` lists.
- Jump to the next section according to `aria-controls` and back
  with <kbd>Esc</kbd>.
- Show and hide submenus of `role="menu"`.
- Allow users to **override hotkeys**.
- **2 KB** (minified and brotlied). No dependencies.
- Vanilla JS and works with any framework including React, Vue, Svelte.

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

See [demo page](https://ai.github.io/keyux/)
and [example](./test/demo/index.tsx):

https://github.com/user-attachments/assets/bcd78271-cf76-45a3-8beb-4f3cea69c143

---

- [Install](#install)
- [Hotkeys](#hotkeys)
  - [Hotkeys Hint](#hotkeys-hint)
  - [Pressed State](#pressed-state)
  - [Hotkeys Override](#hotkeys-override)
  - [Hotkeys for List](#hotkeys-for-list)
  - [Meta instead of Ctrl on Mac](#meta-instead-of-ctrl-on-mac)
- [Focus Groups](#focus-groups)
  - [`focusgroup` attribute](#focusgroup-attribute)
  - [Menu](#menu)
  - [Listbox](#listbox)
  - [Tablist](#tablist)
  - [Toolbar](#toolbar)
- [Focus Jumps](#focus-jumps)
  - [Nested Menu](#nested-menu)

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=keyux&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Docs
Read full docs **[here](https://github.com/ai/keyux#readme)**.