Keyboard Support in Blazor Ribbon
- 4 minutes to read
Keyboard shortcuts allow users to move through Ribbon tabs, items, and drop-down menus and execute any command. Keyboard navigation is implemented on the client and works seamlessly even in Blazor Server apps with a slow connection.
Note
Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.
Available shortcuts depend on the focused Ribbon element.
Tab
The following shortcut keys are available when a Ribbon tab is focused:
| Shortcut Keys | Description |
|---|---|
| Tab | Moves focus to the first enabled item in the tab’s content area. |
| Shift + Tab | Moves focus to the previous focusable element outside the Ribbon. |
| Right Arrow, Left Arrow | Moves focus to the next or previous tab. |
Item
Available shortcuts depend on the focused Ribbon item type.
Common Shortcuts
| Shortcut Keys | Description |
|---|---|
| Tab | Moves focus to the next focusable element outside the Ribbon. |
| Shift + Tab | Moves focus back to the active Ribbon tab header. |
| Right Arrow, Left Arrow | Moves focus to the next/previous Ribbon item. Each part of a split drop-down button counts as a separate item. |
| Home | Moves focus to the first enabled item in the current tab. |
| End | Moves focus to the last enabled item in the current tab. |
Application Tab
| Shortcut Keys | Description |
|---|---|
| Enter, Space, Alt + Down Arrow | Opens the application tab menu and moves focus to its first item. |
| Enter, Space | When the application tab menu or submenu is opened: Clicks the focused menu item. |
| Down Arrow, Up Arrow | When the application tab menu or submenu is opened: Moves focus to the next/previous menu item. |
| Right Arrow | For a submenu item: Opens the submenu and moves focus to the first item. |
| Down Arrow, Up Arrow | When a menu or submenu is opened: Moves focus to the next/previous menu item. |
| Home, End | When a menu or submenu is opened: Moves focus to the first/last menu item. |
| Alt + Up Arrow | When a menu is opened: Closes the application tab menu and moves focus to the application tab. |
| Esc, Left Arrow | *When a submenu is opened:* Closes the submenu and moves focus to its parent menu item. |
Button & Menu
| Shortcut Keys | Description |
|---|---|
| Enter, Space | Clicks the focused button or selects/clears the toggle button. For a drop-down item: Opens a drop-down menu and moves focus to its first item. |
| Alt + Down Arrow | Opens a drop-down menu and moves focus to its first item. |
| Right Arrow | For a submenu item: Opens the submenu and moves focus to the first item. |
| Down Arrow, Up Arrow | When a menu or submenu is opened: Moves focus to the next/previous menu item. |
| Home, End | When a menu or submenu is opened: Moves focus to the first/last menu item. |
| Alt + Up Arrow | When a menu or submenu is opened: Closes the drop-down menu and moves focus to the corresponding Ribbon item. |
| Esc, Left Arrow | *When a submenu is opened:* Closes the submenu and moves focus to its parent menu item. |
Color Palette Drop-Down
| Shortcut Keys | Description |
|---|---|
| Enter, Space | Selects the focused color and closes the color palette drop-down. |
| Right Arrow, Left Arrow | Moves focus to the next/previous color swatch. |
| Down Arrow, Up Arrow | Moves focus to the next/previous color palette row. |
| Tab, Shift + Tab | Moves focus to the first item in the next/previous color group. |
| Esc | Closes the color palette drop-down. |
Combo Box
| Shortcut Keys | Description |
|---|---|
| Enter | Moves focus to the input field. |
| Esc | Moves focus back to the parent element (Ribbon tab or drop-down menu). |
| Alt + Down Arrow | When an input field is focused: Opens a drop-down list and moves focus to its first value. |
| Enter | For an editable combo box: Updates the EditText value and fires the EditTextChanged event. |
| Down Arrow, Up Arrow | When a drop-down list is opened: Moves focus to the next/previous value. |
| Page Down, Page Up | When a drop-down list is opened: Moves focus to a value on the next/previous page. |
| Enter | When a drop-down list is opened: Selects the focused value and closes the combo box drop-down. |
| Esc, Alt + Up Arrow | When a drop-down list is opened: Closes the drop-down and moves focus back to the combo box. |
Spin Editor
| Shortcut Keys | Description |
|---|---|
| Enter | Moves focus to the input field. |
| Esc | Moves focus back to the parent element (Ribbon tab or drop-down menu). |
| Down Arrow, Up Arrow | When an input field is focused: Increases/decreases the value by the specified increment. |