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 Esc.
• 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.

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

See demo page and example:

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

• Install
• Hotkeys
  • Hotkeys Hint
  • Pressed State
  • Hotkeys Override
  • Hotkeys for List
  • Meta instead of Ctrl on Mac
• Focus Groups
  • Menu
  • Listbox
  • Tablist
  • Toolbar
• Focus Jumps
  • Nested Menu

Made at Evil Martians, product consulting for developer tools.

Docs

Read full docs here.