useRovingFocus

The useRovingFocus hook applies a roving tab index to the children matching the given selector and enables you to navigate the elements using the arrow keys. Applying a roving tab index to a list of items enables you to efficiently navigate through the app, having a single tab-stop for a collection of items. Navigating back to the collection restores the focus to the item that has been focused when navigating away, enabling you to return to where you left off.

OverviewProperties

Import

import { useRovingFocus } from '@dynatrace/strato-components-preview/core';

Use cases

CodeSandbox

Set the roving direction

Using the direction option of the useRovingFocus hook, you can have the collection navigable by either up/down, left/right, or all four arrow keys.

CodeSandbox

Select specific children

By default, the useRovingFocus hook selects all direct descendants and applies the roving tab index to them. You can override the selector used for querying the children to exclude e.g. separators.

CodeSandbox

Caveats

The roving focus currently has some limitations that you should consider when using it.

Querying children

The useRovingFocus hook currently queries the children of the given container using querySelectorAll and the provided selector. You can query any children of the container, whether they're interactive or not. The roving tab index will be added to all children matching the selector.

Currently, the hook doesn't deal well with dynamic children. As long as the settings or the amount of rendered child nodes don't change, it won't re-query the children. Hence, the roving focus will only apply to the children rendered when the hook was initialized.

Nested containers / roving focus groups

It is not yet possible to properly nest roving focus containers or create groups of items inside a container via a configuration object.

Virtualization

It is not yet possible to virtualize the items inside the roving focus container.