focusgroup

Focusgroup simplifies focus management for UI elements like toolbars and navigations by offering keyboard navigation with arrow keys and reducing tab stops in the document. Focusgroup ensures consistency and accessibility across devices and input methods.

Read the Open UI explainer

Installation

npm i @gfellerph/focusgroup-polyfill

3KB minified and gzipped.

Features

Keyboard navigation

Enables focus movement with Up ↑, Down ↓, Left ← and Right → arrow keys as well as Home and End.

Roving tabindex

Allows skipping over groups of related controls with just one tab ⇥ keypress, reducing the amount of tab stops in the document.

Shadow DOM support

Support for Shadow DOM allows focusgroups to work across shadow root boundaries.

<ul focusgroup="inline">
  <li><a href="#features">Features</a></li>
  <li><a href="#install">Install</a></li>
  <li><a href="#demo">Demo</a></li>
  <li><a href="https://github.com">GitHub</a></li>
</ul>

<div focusgroup="toolbar inline">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Installation

Features

Keyboard navigation

Roving tabindex

Shadow DOM support

Navigation

Toolbar