New to KendoReact? Start a free 30-day trial
Keyboard Navigation
Managing the Focus
Focusable elements in the TabStrip components are:
- Selected Tab
- Tab Content/Panel
The tab items focusing mechanism is roving tabindex. Only the active tab should have tabindex="0", the remaining tabs should have tabindex="-1".
Keyboard Shortcuts
When end is reached, the first tab is focused. When start is reached, the last tab is focused.
| Shortcut | Behavior |
|---|---|
Up Arrow & Down Arrow | Vertical Orientation shortcuts. Activates the previous/next tab, or current tab if there is no active tab. |
Left Arrow & Right Arrow | Horizontal Orientation shortcuts. Activates the previous/next tab, or current tab if there is no active tab. |
Tab | Focuses the content for the active navigation item. |
Shift + Tab | Navigates to the previous focusable element on the navigation. |
Enter | Activates the tab item if automatic selection is not enabled. |
Home | Focuses the first item and activates it, if automatic selection is enabled. |
End | Focuses the last item and activates it, if automatic selection is enabled. |
Resources
ARIA Authoring Practices: Tabs with Automatic Activation
ARIA Authoring Practices: Selection Follows Focus
Change Theme
Theme
Loading ...