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

Apply the ngpRovingFocusGroup directive to an element to manage focus for a group of child elements.

• Selector: [ngpRovingFocusGroup]
• Exported As: ngpRovingFocusGroup

Define the orientation of the roving focus group. Define whether the focus should wrap around the group. Define whether the focus should move to the first or last element when pressing the Home or End key. Define whether the roving focus group is disabled.

NgpRovingFocusItem

Apply the ngpRovingFocusItem directive to an element within a roving focus group to automatically manage focus.

• Selector: [ngpRovingFocusItem]
• Exported As: ngpRovingFocusItem

Define whether the roving focus item is disabled.

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.