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 akeydown 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 akeydown object withArrowLeft andArrowRight handlers. The handlers' names match thekey property of theKeyboardEvent.
• tabIndex—The tabIndex that the Navigation will use.

1. Attachkeydown 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.

const navigation=React.useMemo(()=>newNavigation({        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 theleft andright arrow keys to navigate.

Using Keyboard Navigation in a List

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

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

Use theup anddown 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 theup,down,left andright arrow keys to navigate.

The Keyboard Navigation is part of theKendoReact 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 theGetting Started with the KendoReact Common Utilities guide.

Suggested Links

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