Keyboard Navigation
By default, the keyboard navigation of the KendoReact Pager is disabled. To enable keyboard navigation, set the navigatable attribute to true.
The Pager supports the following keyboard shortcuts:
For all scenarios:
| SHORTCUT | DESCRIPTION |
|---|---|
Home | Loads the first page of data. |
End | Loads the last page of data. |
When the wrapper is focused:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Activates inner Pager navigation. |
Tab | Moves the focus to the next focusable element on the page. |
Shift & Tab | Moves the focus to the previous focusable element on the page. |
Left Arrow | Loads the previous page of data. |
Right Arrow | Loads the next page of data. |
Page Up | Loads the previous page of data. |
Page Down | Loads the next page of data. |
When inner navigation is activated:
| SHORTCUT | DESCRIPTION |
|---|---|
Escape | Moves focus back to wrapper element. Deactivates inner Pager navigation. |
Tab | Moves the focus to the next focusable element in the Pager. If current focus is on the last element, moves focus to the first focusable item in the component. |
Shift & Tab | Moves the focus to the previous focusable element in the Pager. If current focus is on the first element, moves focus to the last focusable item in the component. |
Enter | Executes the currently focused element action. |
Example
View Source
Change Theme:
