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

27 lines (13 loc) • 1.59 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
## Managing the Focus The Filter is a single tab stop component implementing the roving tab index pattern. The Filter UI represents the filter query object, which can be built using the component. As that object can contain inner objects, the result is a hierarchical structure, which is also reflected visually in the UI. In order to represent the same structure in the accessibility tree, the `role=tree` must be assigned to the entire component. The entire Filter is a single tab stop component. Navigation among items is available using `Up Arrow` and `Down Arrow`. Internal ToolBar navigation can be activated upon pressing `Enter` on a `treeitem`. Navigation returns back to the `tree` when pressing `Esc`. ## Keyboard Shortcuts | Shortcut | Behavior | | -------- | -------- | | `Up Arrow` | Focuses the previous item (FilterGroup or FilterExpression) in the `tree`. | | `Down Arrow` | Focuses the next item (FilterGroup or FilterExpression) in the `tree`. | The FilterGroup or FilterExpression elements implement the KB navigation specification for the ToolBar component: [ToolBar specification]({{toolbar_kb_link}}) Upon deleting a FilterGroup/FilterExpression (pressing the `X` button), focus should be moved to the very next treeitem (FilterGroup/FilterExpression) in the Filter component. If there is no treeitem (FilterGroup/FilterExpression) after the deleted one, focus should be moved to the previous treeitem (FilterGroup/FilterExpression). ## Resources [ARIA Authoring Practices: Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/)