UNPKG

@progress/wct-a11y-spec

Version:

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

github.com/telerik/web-components-ux/docs

telerik/web-components-ux

28 lines (19 loc) • 2.01 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
## Managing focus The ToolBar is a single tab stop component. All focus movements inside the ToolBar are managed according to the logic of the roving tabindex. When the user navigates through the tabs, the ToolBar focuses either the first tool or the tool that was last focused. ## Keyboard Shortcuts For scenarios where inputs, or combos appear in the ToolBar they should be wrapped in focusable wrappers. To activate the inner component navigation the user will need to press Enter. To return focus to the wrapper and activate again the TolBar navigation Esc must be pressed. **ToolBar** | Key | Behavior | |-------------|-------------------------------------------------------------| | `Tab` | Moves the focus to and from the ToolBar. | | `Right Arrow` | Moves focus to the next focusable element in the ToolBar. Focuses first element if the end of the ToolBar is reached. | | `Left Arrow` | Moves focus to the previous focusable element in the ToolBar. Focuses last element if the beginning of the ToolBar is reached. | | `Home` | Moves focus to the first focusable element. | | `End` | Moves focus to the last focusable element. | | `Enter` | Clicks the currently active button or changes the state of the currently active toggleable button. If the active tool is represented by an `<input>` element, enters the tool inner navigation mode. | | `Esc` | If the active tool is represented by an `<input>` element and its inner navigation is active, deactivates the tool navigation and returns focus to the ToolBar. | | `Alt+Down Arrow` | Opens the currently active SplitButton / DropDownButton / CommandOverflow. | | `Alt+Up Arrow` | Closes the currently active SplitButton / DropDownButton / CommandOverflow. | For the nested components in the ToolBar, please refer to their KB specification. CommandOverflow menu should behave as a DropDownButton. ## Resources https://www.w3.org/TR/wai-aria-practices-1.1/examples/ToolBar/ToolBar.html