You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/autocomplete/accessibility/wai-aria-support.md
+11-9Lines changed: 11 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Aut
34
34
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name that will be assigned to it. |
35
35
||`aria-haspopup=listbox`| Indicates that the component has a listbox popup. |
36
36
||`aria-expanded=true/false`| Announces the state of the popup visibility. |
37
-
||`aria-controls=.k-list-ul id`| Points to the `listbox` element. Signifies that the `combobox` element controls the `listbox` one. |
37
+
||`aria-controls=[role='listbox'] id`| Points to the `listbox` element. Signifies that the `combobox` element controls the `listbox` one. |
38
38
||`aria-activedescendant=.k-list-item.k-focus id`| Points to the focused item in the popup. The focused item is changed with keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
39
39
||`aria-autocomplete=list`| The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
40
40
||`aria-autocomplete=both`| The attribute is rendered and the value is set to `both` when both the filtering and suggest features are enabled. |
@@ -55,15 +55,17 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
55
55
|`.k-animation-container`|`role=region`| When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
56
56
||`aria-label` or `aria-labelledby`| When the container has a `region` role assigned, povides a label. |
57
57
|`.k-list .k-no-data`|`aria-live=polite`| Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
58
-
|`.k-list-ul`|`role=listbox`| Identifies the `ul` element as a listbox. |
59
-
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the ComboBox. |
60
-
|`.k-list-item`|`role=option`| Identifies the `li` element as a listbox option. |
61
-
||`id`| When grouped, the list items must have an `id` attribute specified, so that the "aria-owns" attribute of their group header elements (with `role=group`) point to that ids. |
62
-
||`aria-describedby`| When grouped, the list items must have an "aria-describedby" attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
58
+
|`.k-list-item-icon-wrapper`|`role=presentation`| Indicates that the icon wrapper is decorative and should be ignored by assistive technologies. |
59
+
|`.k-list-item-icon`|`aria-hidden=true`| Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
63
60
|`.k-list-item.k-selected`|`aria-selected=true`| Indicates the selected state of the item. |
64
-
|`.k-list-group-item`|`role=group`| The group elements in the popup list must be have `role=group`. |
65
-
||`aria-owns`| The group elements in the popup list must own the list items belonging to their group. |
66
-
|`.k-list-group-item>.k-list-item-text`|`id`| The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
61
+
|`.k-list-content`|`role=listbox`| When data is grouped, role is listbox. |
62
+
||`aria-multiselectable=true`| Signifies that the grouped list allows multiple selection. |
63
+
|`.k-list-ul`|`role=listbox/group`| When data is grouped, role is group, otherwise - listbox. |
64
+
||`aria-multiselectable=true`| Signifies that the list allows multiple selection. |
65
+
||`aria-labelledby=id of group header`| References the id of the group header element that labels this group. |
66
+
|`.k-list-group-item`|`role=presentation`| The group header has role='presentation' since the grouping semantics are provided by the ul[role=group]. |
67
+
||`id`| Provides an id for the group header that is referenced by the group's aria-labelledby attribute. |
68
+
|`.k-list-ul .k-list-item`|`role=option`| Items within a group maintain the option role. |
Copy file name to clipboardExpand all lines: components/combobox/accessibility/wai-aria-support.md
+11-9Lines changed: 11 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Com
34
34
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
35
35
||`aria-haspopup=listbox`| Indicates that the component has a listbox popup. |
36
36
||`aria-expanded=true/false`| Announces the visibility state of the popup. |
37
-
||`aria-controls=.k-list-ul id`| Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
37
+
||`aria-controls=[role='listbox'] id`| Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
38
38
||`aria-activedescendant=.k-list-item.k-focus id`| Points to the focused item in the popup. The focused item is changed through keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
39
39
||`aria-autocomplete=list`| When filtering is enabled, the attribute is rendered and the value is set to `list`. |
40
40
||`aria-autocomplete=both`| When both the filtering and the suggest featutres are enabled, the attribute is rendered and the value is set to `both`. |
@@ -59,15 +59,17 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
59
59
|`.k-animation-container`|`role=region`| When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
60
60
||`aria-label` or `aria-labelledby`| When the container has a `region` role assigned, povides a label. |
61
61
|`.k-list .k-no-data`|`aria-live=polite`| Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
62
-
|`.k-list-ul`|`role=listbox`| Identifies the `ul` element as a listbox. |
63
-
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the ComboBox. |
64
-
|`.k-list-item`|`role=option`| Identifies the `li` element as a listbox option. |
65
-
||`id`| When grouped, the list items must have an `id` attribute specified, so that the "aria-owns" attribute of their group header elements (with `role=group`) point to that ids. |
66
-
||`aria-describedby`| When grouped, the list items must have an "aria-describedby" attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
62
+
|`.k-list-item-icon-wrapper`|`role=presentation`| Indicates that the icon wrapper is decorative and should be ignored by assistive technologies. |
63
+
|`.k-list-item-icon`|`aria-hidden=true`| Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
67
64
|`.k-list-item.k-selected`|`aria-selected=true`| Indicates the selected state of the item. |
68
-
|`.k-list-group-item`|`role=group`| The group elements in the popup list must be have `role=group`. |
69
-
||`aria-owns`| The group elements in the popup list must own the list items belonging to their group. |
70
-
|`.k-list-group-item>.k-list-item-text`|`id`| The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
65
+
|`.k-list-content`|`role=listbox`| When data is grouped, role is listbox. |
66
+
||`aria-multiselectable=true`| Signifies that the grouped list allows multiple selection. |
67
+
|`.k-list-ul`|`role=listbox/group`| When data is grouped, role is group, otherwise - listbox. |
68
+
||`aria-multiselectable=true`| Signifies that the list allows multiple selection. |
69
+
||`aria-labelledby=id of group header`| References the id of the group header element that labels this group. |
70
+
|`.k-list-group-item`|`role=presentation`| The group header has role='presentation' since the grouping semantics are provided by the ul[role=group]. |
71
+
||`id`| Provides an id for the group header that is referenced by the group's aria-labelledby attribute. |
72
+
|`.k-list-ul .k-list-item`|`role=option`| Items within a group maintain the option role. |
Copy file name to clipboardExpand all lines: components/dropdownlist/accessibility/wai-aria-support.md
+12-10Lines changed: 12 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Dro
34
34
||`label for` or `aria-label` or `aria-labelledby`| The input requires an accessible name that will be assigned to it. |
35
35
||`aria-haspopup=listbox`| Indicates the presence of a listbox popup. |
36
36
||`aria-expanded=true/false`| Announces the visibility state of the popup. |
37
-
||`aria-controls=.k-list-ul id`| Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
37
+
||`aria-controls=[role='listbox'] id`| Points to the listbox element. Signifies that the `combobox` controls the `listbox` element. |
38
38
||`aria-describedby=.k-input-inner id`| Announces the selected value of the drop-down. |
39
39
||`aria-activedescendant=.k-list-item.k-focus id`| Points to the focused item in the popup. The focused item is changed through keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
40
40
||`aria-readonly=true`| The attribute is rendered only when the DropDownList is read-only. |
@@ -57,7 +57,7 @@ The following table summarizes the selectors and attributes supported by the Dro
57
57
||`aria-label`| Points to the search label. |
58
58
||`aria-activedescendant=.k-list-item.k-focus id`| Points to the focused item or to an item from the popup. |
59
59
||`aria-autocomplete=list`| Indicates the list-filtering capabilities of the selected items. |
60
-
||`aria-controls=.k-list-ul id`| Points to the popup element. Builds the relationship between the input and the popup. |
60
+
||`aria-controls=[role='listbox'] id`| Points to the popup element. Builds the relationship between the input and the popup. |
61
61
||`aria-haspopup=listbox`| Indicates the presence of a listbox popup. |
62
62
|`.k-list-ul`|`aria-live=polite/off`| Assures the live updates on the selected value of the popup. |
63
63
@@ -71,15 +71,17 @@ The listbox placed in the popup element of the DropDownList has to implement the
71
71
|`.k-animation-container`|`role=region`| When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
72
72
||`aria-label` or `aria-labelledby`| When the container has a `region` role assigned, povides a label. |
73
73
|`.k-list .k-no-data`|`aria-live=polite`| Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
74
-
|`.k-list-ul`|`role=listbox`| Identifies the `ul` element as a listbox. |
75
-
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the ComboBox. |
76
-
|`.k-list-item`|`role=option`| Identifies the `li` element as a listbox option. |
77
-
||`id`| When grouped, the list items must have an `id` attribute specified, so that the "aria-owns" attribute of their group header elements (with `role=group`) point to that ids. |
78
-
||`aria-describedby`| When grouped, the list items must have an "aria-describedby" attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
74
+
|`.k-list-item-icon-wrapper`|`role=presentation`| Indicates that the icon wrapper is decorative and should be ignored by assistive technologies. |
75
+
|`.k-list-item-icon`|`aria-hidden=true`| Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
79
76
|`.k-list-item.k-selected`|`aria-selected=true`| Indicates the selected state of the item. |
80
-
|`.k-list-group-item`|`role=group`| The group elements in the popup list must be have `role=group`. |
81
-
||`aria-owns`| The group elements in the popup list must own the list items belonging to their group. |
82
-
|`.k-list-group-item>.k-list-item-text`|`id`| The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
77
+
|`.k-list-content`|`role=listbox`| When data is grouped, role is listbox. |
78
+
||`aria-multiselectable=true`| Signifies that the grouped list allows multiple selection. |
79
+
|`.k-list-ul`|`role=listbox/group`| When data is grouped, role is group, otherwise - listbox. |
80
+
||`aria-multiselectable=true`| Signifies that the list allows multiple selection. |
81
+
||`aria-labelledby=id of group header`| References the id of the group header element that labels this group. |
82
+
|`.k-list-group-item`|`role=presentation`| The group header has role='presentation' since the grouping semantics are provided by the ul[role=group]. |
83
+
||`id`| Provides an id for the group header that is referenced by the group's aria-labelledby attribute. |
84
+
|`.k-list-ul .k-list-item`|`role=option`| Items within a group maintain the option role. |
Copy file name to clipboardExpand all lines: components/multiselect/accessibility/wai-aria-support.md
+11-13Lines changed: 11 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Mul
34
34
||`label for` or `aria-label` or `aria-labelledby`| The input needs an accessible name that will be assigned to it. |
35
35
||`aria-haspopup=listbox`| Indicates the presence of a listbox popup. |
36
36
||`aria-expanded=true/false`| Announces the state of the popup visibility. |
37
-
||`aria-controls=.k-list-ul id`| Points to the listbox element. Signifies that the `combobox` element controls the `listbox` one. |
37
+
||`aria-controls=[role='listbox'] id`| Points to the listbox element. Signifies that the `combobox` element controls the `listbox` one. |
38
38
||`aria-autocomplete=list`| When the filtering feature is enabled, the attribute is rendered and the value is set to the list. |
39
39
||`aria-describedby=.k-chip-list id`| Points to the `taglist` element that contains the selected items. |
40
40
||`aria-activedescendant=.k-list-item.k-focus id`| Points to the focused item,which is either an item from the popup or a tag item from the selected items. The focused item is changed through keyboard navigation. If the focus is not currently on a tag item and the popup is not visible, the attribute must not point to any element or must be removed. |
@@ -52,24 +52,22 @@ The following table summarizes the selectors and attributes supported by the Mul
52
52
53
53
The popup element of the MultiSelect must implement the WAI-ARIA specification for a Popup List component. The following table summarizes the selectors and attributes supported by the listbox popup of the MultiSelect:
54
54
55
-
| Selector | Attribute | Usage |
56
-
| -------- | --------- | ----- |
57
-
|`.k-list-ul`|`aria-multiselectable=true`| Announces multiselection of the listbox popup. |
58
-
59
55
| Selector | Attribute | Usage |
60
56
| -------- | --------- | ----- |
61
57
|`.k-animation-container`|`role=region`| When the component container is appended to the `<body>` element of the document, it requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role. |
62
58
||`aria-label` or `aria-labelledby`| When the container has a `region` role assigned, povides a label. |
63
59
|`.k-list .k-no-data`|`aria-live=polite`| Identifies the element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity. |
64
-
|`.k-list-ul`|`role=listbox`| Identifies the `ul` element as a listbox. |
65
-
||`aria-label` or `aria-labelledby`| Provides a label for the listbox of the ComboBox. |
66
-
|`.k-list-item`|`role=option`| Identifies the `li` element as a listbox option. |
67
-
||`id`| When grouped, the list items must have an `id` attribute specified, so that the "aria-owns" attribute of their group header elements (with `role=group`) point to that ids. |
68
-
||`aria-describedby`| When grouped, the list items must have an "aria-describedby" attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`. |
60
+
|`.k-list-item-icon-wrapper`|`role=presentation`| Indicates that the icon wrapper is decorative and should be ignored by assistive technologies. |
61
+
|`.k-list-item-icon`|`aria-hidden=true`| Ensures that the icon itself is hidden from assistive technologies since it is decorative. |
69
62
|`.k-list-item.k-selected`|`aria-selected=true`| Indicates the selected state of the item. |
70
-
|`.k-list-group-item`|`role=group`| The group elements in the popup list must be have `role=group`. |
71
-
||`aria-owns`| The group elements in the popup list must own the list items belonging to their group. |
72
-
|`.k-list-group-item>.k-list-item-text`|`id`| The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id. |
63
+
|`.k-list-content`|`role=listbox`| When data is grouped, role is listbox. |
64
+
||`aria-multiselectable=true`| Signifies that the grouped list allows multiple selection. |
65
+
|`.k-list-ul`|`role=listbox/group`| When data is grouped, role is group, otherwise - listbox. |
66
+
||`aria-multiselectable=true`| Signifies that the list allows multiple selection. |
67
+
||`aria-labelledby=id of group header`| References the id of the group header element that labels this group. |
68
+
|`.k-list-group-item`|`role=presentation`| The group header has role='presentation' since the grouping semantics are provided by the ul[role=group]. |
69
+
||`id`| Provides an id for the group header that is referenced by the group's aria-labelledby attribute. |
70
+
|`.k-list-ul .k-list-item`|`role=option`| Items within a group maintain the option role. |
Copy file name to clipboardExpand all lines: components/treeview/accessibility/wai-aria-support.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ If the tree supports the load-more functionality, the **Load More** button is re
38
38
||`aria-setsize`| Announces the total count of the items at this level. Enables the user to understand the position of the navigation, for example, item 3 of 14. Must be added only when the load-more functionality of the tree is enabled and there are still nodes belonging to the group that are not loaded (rendered) yet. |
39
39
||`aria-expanded=true/false`| Announces the expanded state of the node. The value is `true` when expanded, and `false` when collapsed. |
40
40
||`aria-checked=true/false`| Rendered only when checkboxes are enabled. Announces the checked state of the node. If the checkbox is indeterminate, the value is `mixed`. |
41
-
|`.k-treeview-item:has(> span > .k-selected, > div > .k-selected) `|`aria-selected=true`| Rendered only when selection is enabled. Announces the selected state of the node. |
41
+
|`.k-treeview-item:has(>.k-selected)`|`aria-selected=true`| Rendered only when selection is enabled. Announces the selected state of the node. |
42
42
|`.k-checkbox`|`role=none/presentation`| Added to the wrapper element of the checkbox to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`. |
0 commit comments