Roving Focus

Handle focus for a group of elements.

Import

Import the Roving Focus primitives from ng-primitives/roving-focus.

import { NgpRovingFocusGroup, NgpRovingFocusItem } from 'ng-primitives/roving-focus';

Usage

Assemble the roving focus directives in your template.

<div ngpRovingFocusGroup>
  <button ngpRovingFocusItem>Item 1</button>
  <button ngpRovingFocusItem>Item 2</button>
  <button ngpRovingFocusItem>Item 3</button>
</div>

API Reference

The following directives are available to import from the ng-primitives/roving-focus package:

NgpRovingFocusGroup

NgpRovingFocusItem

Accessibility

Adheres to the WAI-ARIA Keyboard Interface Practices.

Keyboard Interactions

• Tab - Move focus to the first item.
• ArrowLeft - Move focus to the previous item (horizontal orientation).
• ArrowUp - Move focus to the previous item (vertical orientation).
• ArrowRight - Move focus to the next item (horizontal orientation).
• ArrowDown - Move focus to the next item (vertical orientation).
• Home - Move focus to the first item.
• End - Move focus to the last item.