KendoReact Keyboard Navigation Overview

The KendoReact Keyboard Navigation functionality helps you to implement keyboard navigation in a React application.

With the KendoReact Keyboard Navigation, you no longer have to spend time thinking about events handling and managing the focus in your application.

Setting Up the React Keyboard Navigation

To enable the basic navigation with the left and right arrow keys:

1. Wrap the elements that require keyboard navigation in an HTML element. This is the root element (navigation scope).
2. Add a ref and a keydown event handler to the root element.
3. To initialize the Keyboard Navigation, pass to it an object with the following properties:

• root—The ref object of the root DOM element.
• selectors—An array of CSS selectors, from which the navigation elements will be queried from the root element (e.g. root.querySelectorAll(selectors.join(','))). Make sure their order matches the navigation elements order.
• keyboardEvents—Add a keydown object with ArrowLeft and ArrowRight handlers. The handlers' names match the key property of the KeyboardEvent.
• tabIndex—The tabIndex that the Navigation will use.

1. Attach keydown event to the root element.

The code snippet below shows how to configure basic navigation with the left and right arrows for a set of button components.

Copy Codeconst navigation = React.useMemo(
    () => new Navigation({
        root,
        selectors: ['.k-button-group > button'],
        keyboardEvents: {
            keydown: {
                ArrowRight: (target, nav, ev) => {
                    ev.preventDefault();
                    nav.focusNext(target);
                },
                ArrowLeft: (target, nav, ev) => {
                    ev.preventDefault();
                    nav.focusPrevious(target);
                }
            }
        },
        tabIndex: 0
    }), []
);

The following example demonstrates the above Keyboard Navigation configuration in action.

Use the left and right arrow keys to navigate.

Using Keyboard Navigation in a List

The next example builds upon the basic configuration by adding the following:

• Handling the Space key allows you to expand and collapse the TreeList items.
• Scrolling to the viewport is added when the focused item is not visible.

Use the up and down arrow keys to navigate.

Using Keyboard Navigation in an HTML Table

To implement the Keyboard Navigation for an HTML table, use additional functions that define which DOM element in the table to focus on every subsequent user action.

Use the up, down, left and right arrow keys to navigate.

The Keyboard Navigation is part of the KendoReact Common Utilities component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the Keyboard Navigation and the rest of the Common Utilities, see the Getting Started with the KendoReact Common Utilities guide.

Suggested Links

• Getting Started with KendoReact
• Getting Started with KendoReact Navigation
• KendoReact Navigation Options