Skip to content

Commit 72e63c9

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 7018bb7 commit 72e63c9

File tree

24 files changed

+1081
-171
lines changed

24 files changed

+1081
-171
lines changed

‎docs/api/javascript/ui/dropdowntree.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -817,6 +817,8 @@ The component calls the valueMapper function when the component receives a value
817817
}
818818
}
819819
},
820+
dataTextField: "FullName",
821+
dataValueField: "EmployeeId",
820822
value: '8'
821823
});
822824
</script>

‎docs/api/javascript/ui/spreadsheet.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2596,7 +2596,7 @@ If invoked, the Spreadsheet will not save the generated file.
25962596

25972597
### excelImport
25982598

2599-
Fired when the user clicks the **Open** toolbar button.
2599+
Fired when the user imports a file after selecting it from the window prompt. The event is fired before the file importing has finished.
26002600

26012601
#### Event Data
26022602

‎docs/api/javascript/ui/treeview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -947,7 +947,7 @@ The nodes that are to be expanded.
947947
treeview.expand(treeview.findByText("foo"));
948948

949949
// expand all loaded items
950-
treeview.expand(".k-item");
950+
treeview.expand(".k-treeview-item");
951951
</script>
952952

953953
### expandPath

‎docs/controls/multiselect/accessibility/overview.md‎

Lines changed: 78 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Overview
3-
page_title: jQuery MultiSelect Documentation - MultiSelect Accessibility
3+
page_title: jQuery MultiSelect Documentation | MultiSelect Accessibility
44
description: "Get started with the jQuery MultiSelect by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
55
slug: accessibility_kendoui_multiselect_widget
66
position: 1
@@ -10,76 +10,107 @@ position: 1
1010

1111
The MultiSelect is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
1212

13-
For more information, refer to:
14-
* [Keyboard navigation by the Kendo UI MultiSelect]({% slug keynav_kendoui_ddl_widget %})
13+
For more information, refer to:
14+
* [Keyboard navigation by the Kendo UI MultiSelect]({% slug keynav_multiselect %})
1515
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
1616

17-
## WAI-ARIA
1817

19-
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).
2018

21-
The MultiSelect has three building blocks which, depending on the current state of the component and its options, use different aria properties on their nested elements:
2219

23-
* Search input&mdash;Filters the list of choices.
24-
* Tag list&mdash;Displays the selected values.
25-
* Items popup&mdash;Displays the list of items that can be selected.
20+
Out of the box, the Kendo UI for jQuery MultiSelect provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
21+
22+
23+
The MultiSelect is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
24+
25+
## WAI-ARIA
2626

27-
![Kendo UI for jQuery MultiSelect Structure](../images/multiselect-structure.png)
2827

29-
### Search Input
28+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
3029

31-
If the `placeholder` option is set, in order for screen readers to announce the placeholder text, the WAI-ARIA `label` attribute has to be manually toggled on the `input` element.
30+
### MultiSelect Wrapping Element
3231

33-
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its search input:
3432

35-
| Role | Attribute | Usage |
36-
|----------|---------------------- |---------------------------------------------|
37-
|[`listbox`](https://www.w3.org/TR/wai-aria-1.1/#listbox) | | Identifies the popup with items.
38-
| | [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) | Indicates the state of the popup with items - expanded or collapsed. |
39-
| | [`aria-haspopup`](https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup) | Indicates that the component has a popup. |
40-
| | [`aria-autocomplete`](https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete) | Indicates that the provided user input will display a popup that contains a list of values that could complete the provided input. |
41-
| | [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) | Identifies the tag list as the description object and allows screen readers to announce the selected options upon focusing them. |
42-
| | [`aria-busy`](https://www.w3.org/TR/wai-aria-1.1/#aria-busy) | Indicates if the component is in the process of loading data. |
43-
| | [`aria-disabled`](https://www.w3.org/TR/wai-aria-1.1/#aria-disabled) | Indicates if the component is disabled. |
44-
| | [`aria-activedescendant`](https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant) | Indicates the active element when navigating through the list of selected options. |
33+
The following table summarizes the selectors and attributes supported by the MultiSelect wrapper element:
4534

46-
### Tag List
35+
| Selector | Attribute | Usage |
36+
| -------- | --------- | ----- |
37+
| `.k-input-inner` | `role=combobox` | Announces the presence of a combobox as the inner element of the MultiSelect used for filtering. |
38+
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name that will be assigned to it. |
39+
| | `aria-haspopup=listbox` | Indicates the presence of a listbox popup. |
40+
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
41+
| | `aria-controls=.k-list-ul id` | Points to the listbox element. Signifies that the `combobox` element controls the `listbox` one. |
42+
| | `aria-autocomplete=list` | When the filtering feature is enabled, the attribute is rendered and the value is set to the list. |
43+
| | `aria-describedby=.k-chip-list id` | Points to the `taglist` element that contains the selected items. |
44+
| | `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. |
45+
| | `aria-readonly=true` | The attribute is rendered only when the MultiSelect is read-only. |
46+
| | `aria-invalid=true` | The attribute is rendered only when the MultiSelect is in a form and announces the valid state of the component. |
47+
| | `aria-busy=true` | The attribute is rendered only when the MultiSelect is loading data. |
48+
| | `tabindex=0` | The element must be focusable. |
49+
| `.k-disabled .k-input-inner` | `aria-disabled=true` | The attribute is rendered only when the MultiSelect is disabled. |
50+
| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `<button>` element or have the `role="button"` assigned. |
51+
| | `aria-label` | The button needs an accessible name that will be assigned to it. |
52+
| | `tabindex=-1` | The button element must not be focusable. |
4753

48-
In order for the screen readers to announce the selected options after deleting an item from the tag list:
54+
### Popup Listbox
4955

50-
1. Enable the focusing of the option with the keyboard arrows.
51-
1. Enable the removal of the option by pressing the `Backspace` or `Delete` keys.
5256

53-
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its tag list:
57+
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:
5458

55-
| Role | Attribute | Usage |
56-
|---------------------------------------------------------|---------------|---------------------------------------------|
57-
|[`listbox`](https://www.w3.org/TR/wai-aria-1.1/#listbox) | | Identifies the list of selected options.
58-
|[`option`](https://www.w3.org/TR/wai-aria-1.1/#option) | | Identifies each element which contains the name of an option. |
59-
| | [`aria-setsize`](https://www.w3.org/TR/wai-aria-1.1/#aria-setsize) | Indicates the position of the option in the list. |
60-
| | [`aria-selected`](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) | Indicates that the tag list item is selected. |
59+
| Selector | Attribute | Usage |
60+
| -------- | --------- | ----- |
61+
| `.k-list-ul` | `aria-multiselectable=true` | Announces multiselection of the listbox popup. |
6162

62-
### Items Popup
63+
| Selector | Attribute | Usage |
64+
| -------- | --------- | ----- |
65+
| `.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. |
66+
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
67+
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
68+
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
69+
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
70+
| | `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. |
71+
| | `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`. |
72+
| `.k-list-item.k-selected` | `aria-selected=true` | Indicates the selected state of the item. |
73+
| `.k-list-group-item` | `role=group` | The group elements in the popup list must be have `role=group`. |
74+
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
75+
| `.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. |
6376

64-
The MultiSelect implements the following WAI-ARIA roles, states, and properties for its items popup:
77+
## Resources
6578

66-
| Role | Attribute | Usage |
67-
|----------|------------- |---------------------------------------------|
68-
|[`listbox`](https://www.w3.org/TR/wai-aria-1.1/#listbox) | | Identifies the list of selected options.
69-
|[`option`](https://www.w3.org/TR/wai-aria-1.1/#option) | | Identifies each element which contains the name of an option. |
70-
| |[`aria-selected`](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) | Indicates that the tag list item is selected. |
79+
[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
80+
81+
[WAI-ARIA Authoring Practices: Scrollable Listbox Example](https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-scrollable.html)
7182

7283
## Section 508
7384

74-
The MultiSelect is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug section508_accessibility_support %}).
7585

76-
## WCAG 2.2
86+
The MultiSelect is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
7787

78-
The MultiSelect supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.2 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %})
88+
## Testing
7989

80-
## See Also
8190

82-
* [Keyboard Navigation by the MultiSelect (Demo)](https://demos.telerik.com/kendo-ui/web/grid/navigation.html)
91+
The MultiSelect has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
92+
93+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
94+
95+
### Screen Readers
96+
97+
98+
The MultiSelect has been tested with the following screen readers and browsers combinations:
99+
100+
| Environment | Tool |
101+
| ----------- | ---- |
102+
| Firefox | NVDA |
103+
| Chrome | JAWS |
104+
| Microsoft Edge | JAWS |
105+
106+
107+
108+
### Automated Testing
109+
The MultiSelect has been tested with [axe-core](https://github.com/dequelabs/axe-core).
110+
### Test Example
111+
A live test example of the MultiSelect component could be found here: https://demos.telerik.com/kendo-ui/accessibility/multiselect
112+
## See Also
113+
* [Keyboard Navigation by the MultiSelect (Demo)](https://demos.telerik.com/kendo-ui/multiselect/keyboard-navigation)
83114
* [Keyboard Navigation by the MultiSelect]({% slug keynav_multiselect %})
84115
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
85-
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
116+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

0 commit comments

Comments
 (0)