Skip to main content

    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.

    Still have questions?
    Find answers in the Dynatrace Community