Keyboard Navigation
The Telerik UI for Blazor components support keyboard navigation and the end users can use the keyboard to walk through them and invoke actions such as clicking buttons, paging the Grid, and so on.
How it Works
Generally, to focus a component, use the Tab key as the keyboard support of the page follows the normal flow of the content. Once inside a component, you can use specific keyboard shortcuts to trigger specific actions such as using the Arrow keys to focus different cells in the Grid, or the Enter key to click a button.
Normally, users can use the keyboard to navigate only to HTML links, buttons, and form controls. The Telerik UI for Blazor library has gone to the next level and the components it delivers are focusable. In this way, even though the components represent complex structures, users can interact with them too.
The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, the focus has to follow the visual horizontal and vertical flow of the page. For example, left-to-right and top-to-bottom, header first followed by the main and, then, page navigation.
Most of the components in the library represent a single Tab stop. Once users reach and focus a component, they can leave it with a single tab. If the component is more complex, users can walk though its inside elements with the Arrow keys, for example, Grid cells, Menu items, Toolbar buttons. Some complex components can accommodate multiple other components. For example, the Grid can host a Toolbar and a Pager. In this case, you can tab to move the focus from one nested component to another.
Types of Keyboard Support
The Telerik UI for Blazor components may provide enhanced, standard, or no keyboard support.
-
Standard keyboard support implies similar keyboard navigation capabilities as standard HTML elements. For example, the Button components support
EnterandSpacefor clicking them. All components with standard keyboard support are reachable through theTabkey and provide focus styles. - Enhanced keyboard support builds on top of the standard key combinations and provides additional built-in shortcuts for improved flexibility and user experience.
- The components with no keyboard support serve a purely visualization purpose, are just content containers, provide no interaction, or provide only mouse and touch interaction by design.
Right-to-Left Support
When the right-to-left direction is enabled, the keyboard shortcuts for the components that support keyboard navigation remain unchanged except for the Left arrow and Right arrow keys—their functionality is reversed to follow the right-to-left direction.
Keyboard Support per Component
The following table lists the available Telerik UI for Blazor components with the type of keyboard support they provide. To see the combinations in action, click the desired component to see its keyboard navigation demo.
| Component | Keyboard Navigation | Notes |
|---|---|---|
| ArcGauge | - | |
| AutoComplete | Enhanced | |
| Breadcrumb | Enhanced | |
| Button | Standard | |
| ButtonGroup | Standard | |
| Calendar | Enhanced | |
| Carousel | Enhanced | |
| Chart | Enhanced | |
| CheckBox | Standard | |
| Chip | Enhanced | |
| ChipList | Enhanced | |
| CircularGauge | - | |
| ColorGradient | Enhanced | |
| ColorPalette | Enhanced | |
| ColorPicker | Enhanced | See also the ColorGradient and ColorPalette. |
| ComboBox | Enhanced | |
| ContextMenu | Enhanced | |
| DateInput | Enhanced | |
| DatePicker | Enhanced | |
| DateRangePicker | Enhanced | |
| DateTimePicker | Enhanced | |
| Dialog | Enhanced | Tab to reach and use its buttons. The Dialog restricts the focus within itself during tabbing. |
| Drawer | Enhanced | |
| DropDownButton | Enhanced | |
| DropDownList | Enhanced | |
| DropZone | - | |
| Editor | Enhanced | |
| FileManager | Enhanced | Tab to focus the different nested components. Keyboard navigation for the file list is not available yet. |
| FileSelect | Enhanced | |
| Filter | Enhanced | |
| FlatColorPicker | Enhanced | Tab to focus the different nested components. See also the ColorGradient and ColorPalette. |
| FloatingLabel | - | |
| Form | Standard | |
| Gantt | Enhanced | Keyboard navigation is available for the nested TreeList. |
| Grid | Enhanced | Set Navigable="true"
|
| GridLayout | - | |
| Icons | - | |
| LinearGauge | - | |
| ListView | Enhanced | |
| Loader | - | |
| LoaderContainer | - | |
| Map | Enhanced | |
| MaskedTextBox | Standard | |
| MediaQuery | - | |
| Menu | Enhanced | |
| MultiColumnComboBox | Enhanced | |
| MultiSelect | Enhanced | |
| Notification | - | |
| NumericTextBox | Enhanced | |
| Pager | Enhanced | |
| PanelBar | Enhanced | |
| PdfViewer | Enhanced | Tab to focus the different components in the toolbar. The built-in Pager provides keyboard navigation. |
| PivotGrid | - | Not Supported (upcoming support) |
| ProgressBar | - | |
| QRCode | - | |
| RadialGauge | - | |
| RadioGroup | Standard | |
| RangeSlider | Enhanced | |
| Scheduler | Enhanced | |
| Signature | - | |
| Skeleton | - | |
| Slider | Enhanced | |
| SplitButton | Enhanced | |
| Splitter | Enhanced | |
| StackLayout | - | |
| Stepper | Enhanced | |
| StockChart | - | |
| Switch | Enhanced | |
| TabStrip | Enhanced | |
| TextArea | Standard | |
| TextBox | Standard | |
| TileLayout | - | |
| TimePicker | Enhanced | |
| ToggleButton | Enhanced | |
| ToolBar | Enhanced | |
| Tooltip | - | |
| TreeList | Enhanced | |
| TreeView | Enhanced | |
| Upload | Enhanced | |
| Validation | - | |
| Window | Enhanced | |
| Wizard | Enhanced |