Skip to content

Commit dc46238

Browse files
committed
docs: update accessibility and keyboard-nav specs
1 parent fa854cf commit dc46238

File tree

6 files changed

+47
-43
lines changed

6 files changed

+47
-43
lines changed

components/autocomplete/accessibility/wai-aria-support.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Aut
3434
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name that will be assigned to it. |
3535
| | `aria-haspopup=listbox` | Indicates that the component has a listbox popup. |
3636
| | `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. |
3838
| | `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. |
3939
| | `aria-autocomplete=list` | The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
4040
| | `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
5555
| `.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. |
5656
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
5757
| `.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. |
6360
| `.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. |
6769

6870
### Adaptive Mode
6971

components/combobox/accessibility/wai-aria-support.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Com
3434
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
3535
| | `aria-haspopup=listbox` | Indicates that the component has a listbox popup. |
3636
| | `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. |
3838
| | `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. |
3939
| | `aria-autocomplete=list` | When filtering is enabled, the attribute is rendered and the value is set to `list`. |
4040
| | `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
5959
| `.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. |
6060
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
6161
| `.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. |
6764
| `.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. |
7173

7274
### Adaptive Mode
7375

components/dropdownlist/accessibility/wai-aria-support.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Dro
3434
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
3535
| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
3636
| | `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. |
3838
| | `aria-describedby=.k-input-inner id` | Announces the selected value of the drop-down. |
3939
| | `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. |
4040
| | `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
5757
| | `aria-label` | Points to the search label. |
5858
| | `aria-activedescendant=.k-list-item.k-focus id` | Points to the focused item or to an item from the popup. |
5959
| | `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. |
6161
| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
6262
| `.k-list-ul` | `aria-live=polite/off` | Assures the live updates on the selected value of the popup. |
6363

@@ -71,15 +71,17 @@ The listbox placed in the popup element of the DropDownList has to implement the
7171
| `.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. |
7272
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
7373
| `.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. |
7976
| `.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. |
8385

8486
### Adaptive Mode
8587

components/listbox/accessibility/wai-aria-support.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ The ListBox toolbar follows the specification of the ToolBar component.
4545
| -------- | --------- | ----- |
4646
| `.k-listbox-actions` | `role=toolbar` | The toolbar is a collection of command buttons. |
4747
| | `aria-label` | Clarifies the purpose of the toolbar. |
48-
| | `aria-controls=.k-list-ul id` | Points to the ids of the `role=listbox` elements that are being controlled by the ToolBar. |
48+
| | `aria-controls=[role='listbox'] id` | Points to the ids of the `role=listbox` elements that are being controlled by the ToolBar. |
4949
| `.k-listbox-actions .k-button` | `aria-label` or `title` | All buttons in the ToolBar must have lables, so that their purpose is clear. |
5050

5151
## Resources

components/multiselect/accessibility/wai-aria-support.md

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following table summarizes the selectors and attributes supported by the Mul
3434
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name that will be assigned to it. |
3535
| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
3636
| | `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. |
3838
| | `aria-autocomplete=list` | When the filtering feature is enabled, the attribute is rendered and the value is set to the list. |
3939
| | `aria-describedby=.k-chip-list id` | Points to the `taglist` element that contains the selected items. |
4040
| | `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
5252

5353
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:
5454

55-
| Selector | Attribute | Usage |
56-
| -------- | --------- | ----- |
57-
| `.k-list-ul` | `aria-multiselectable=true` | Announces multiselection of the listbox popup. |
58-
5955
| Selector | Attribute | Usage |
6056
| -------- | --------- | ----- |
6157
| `.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. |
6258
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
6359
| `.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. |
6962
| `.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. |
7371

7472
### Adaptive Mode
7573

components/treeview/accessibility/wai-aria-support.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ If the tree supports the load-more functionality, the **Load More** button is re
3838
| | `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. |
3939
| | `aria-expanded=true/false` | Announces the expanded state of the node. The value is `true` when expanded, and `false` when collapsed. |
4040
| | `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. |
4242
| `.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`. |
4343

4444
## Resources

0 commit comments

Comments
 (0)