Keyboard Navigation
The Kendo UI for Angular Pager provides keyboard navigation support to enhance accessibility and improve user experience. Keyboard navigation is enabled by default, allowing users to navigate through the Pager using keyboard shortcuts. This feature is particularly useful for users who rely on keyboard navigation or assistive technologies.
Starting with Kendo UI for Angular v19.0.0, the Pager keyboard navigation is enabled by default. To disable it, set the
navigableproperty tofalse.
Keyboard Shortcuts
The following sections describe the available keyboard shortcuts for the Pager component.
General Shortcuts
The following shortcuts are available in all scenarios, regardless of which part of the Pager is focused:
| SHORTCUT | DESCRIPTION |
|---|---|
Home | Loads the first page of data. |
End | Loads the last page of data. |
When the Wrapper is Focused
These shortcuts are available when the Pager wrapper element 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
When inner navigation is activated (for example, by pressing Enter on the Pager wrapper), keyboard focus is trapped within the Pager, allowing users to navigate between its internal controls.
These shortcuts are available when inner navigation is activated within the Pager:
| 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. |
Using the Template
When the PagerTemplateDirective is utilized, all custom elements which can receive focus either through the Tab sequence or through direct interaction must be decorated with the kendoPagerFocusable directive. It registers the focusable elements with the Pager and includes them in the built-in keyboard navigation. The directive can be applied to both regular input elements, such as inputs and buttons, and composite components, such as drop-down lists.
The following example demonstrates how to decorate a slider inside the template by using kendoPagerFocusable.