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.
Import
import { useRovingFocus } from '@dynatrace/strato-components-preview/core';
Use cases
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.
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.
Props
RovingFocusOptions
Signature:
export declare type RovingFocusOptions = {
/**
* Index of the item that should initially be set to tabIndex = 0.
* @defaultValue 0
*/
initialIndex?: ;
/**
* The arrangement of the navigable items. Determines which arrow keys are used for navigation.
* @defaultValue vertical
*/
direction?: | | ;
/**
* Determines whether the elements should be loopable.
* @defaultValue true
*/
loopFocus?: ;
/**
* The selector used to retrieve all the navigable children.
* @defaultValue *
*/
focusableChildrenSelector?: ;
};| Name | Type | Default | Description |
|---|---|---|---|
initialIndex? | 0 | Index of the item that should initially be set to tabIndex = 0. | |
direction? | | | | vertical | The arrangement of the navigable items. Determines which arrow keys are used for navigation. |
loopFocus? | true | Determines whether the elements should be loopable. | |
focusableChildrenSelector? | * | The selector used to retrieve all the navigable children. |
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.