Roving Focus

Handle focus for a group of elements.

<div
  ngpRovingFocusGroup
  ngpRovingFocusGroupOrientation="horizontal"
  ngpRovingFocusGroupWrap="true"
  ngpRovingFocusGroupHomeEnd="true"
>
  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroDocument" />
  </button>
  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroFolder" />
  </button>

  <div class="divider"></div>

  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroBars3BottomLeft" />
  </button>

  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroBars3" />
  </button>

  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroBars3BottomRight" />
  </button>

  <div class="divider"></div>

  <button type="button" ngpButton ngpRovingFocusItem>
    <ng-icon name="heroCog6Tooth" />
  </button>
</div>

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

NgpRovingFocusItem

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

• Selector: [ngpRovingFocusItem]
• Exported As: 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.