Skip to content

Commit 8bb3020

Browse files
committed
Sync with Kendo UI Professional
1 parent d4ac265 commit 8bb3020

File tree

12 files changed

+1036
-44
lines changed

12 files changed

+1036
-44
lines changed

docs-aspnet/backwards-compatibility/2024-backwards-compatibility.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ As of the Q2 2024 release, the `Telerik.Web.Captcha` package targets .NET Framew
2424

2525
**Telerik.Web.Spreadsheet**
2626
As of the Q2 2024 release, the `Telerik.Web.Spreadsheet` package targets .NET Framework 4.6.2
27+
28+
**Kendo.Mvc.Export**
29+
As of the Q2 2024 release, the `Kendo.Mvc.Export.dll` assembly targets .NET Framework 4.6.2
2730
{% endif %}
2831

2932
### Chart
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Overview
3+
page_title: jQuery Dialog Documentation | Dialog Accessibility
4+
description: "Get started with the jQuery Dialog by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_dialog_widget
6+
position: 1
7+
---
8+
9+
# Dialog Accessibility
10+
11+
The Dialog is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %}).
14+
15+
16+
17+
18+
Out of the box, the Kendo UI for jQuery Dialog provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The Dialog 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.
22+
23+
## WAI-ARIA
24+
25+
26+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
27+
28+
### Dialog component
29+
30+
| Selector | Attribute | Usage |
31+
| -------- | --------- | ----- |
32+
| `.k-dialog` | `role=dialog` | Announces the dialog role of the component. |
33+
| | `aria-labelledby=.k-dialog-titlebar id` | Associate the title of the dialog. |
34+
| | `aria-describedby=.k-dialog-content id` | Associate the dialog content to the wrap element. |
35+
| `.k-overlay + .k-dialog` | `aria-modal=true` | Announces that the dialog is modal. Attribute is added only when the dialog is modal. |
36+
37+
### Predefined dialogs
38+
39+
| Selector | Attribute | Usage |
40+
| -------- | --------- | ----- |
41+
| `.k-dialog.k-prompt,.k-dialog.k-alert,.k-dialog.k-confirm` | `role=alertdialog` | Announces the dialog role of the component. |
42+
43+
## Resources
44+
45+
[ARIA practices Modal Dialog Example](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog)
46+
47+
## Section 508
48+
49+
50+
The Dialog is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
51+
52+
## Testing
53+
54+
55+
The Dialog has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
56+
57+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
58+
59+
### Screen Readers
60+
61+
62+
The Dialog has been tested with the following screen readers and browsers combinations:
63+
64+
| Environment | Tool |
65+
| ----------- | ---- |
66+
| Firefox | NVDA |
67+
| Chrome | JAWS |
68+
| Microsoft Edge | JAWS |
69+
70+
71+
72+
### Automated Testing
73+
The Dialog has been tested with [axe-core](https://github.com/dequelabs/axe-core).
74+
### Test Example
75+
A live test example of the Dialog component could be found here: https://demos.telerik.com/kendo-ui/accessibility/dialog
76+
## See Also
77+
* [Keyboard Navigation by the Dialog (Demo)](https://demos.telerik.com/kendo-ui/dialog/keyboard-navigation)
78+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
79+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Overview
3-
page_title: jQuery DropDownButton Documentation - Accessibility
3+
page_title: jQuery DropDownButton Documentation | DropDownButton Accessibility
44
description: "Get started with the jQuery DropDownButton by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
55
slug: accessibility_kendoui_dropdownbutton_widget
66
position: 1
@@ -10,26 +10,83 @@ position: 1
1010

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

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

17+
18+
19+
20+
Out of the box, the Kendo UI for jQuery DropDownButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
21+
22+
23+
The DropDownButton 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+
1725
## WAI-ARIA
1826

19-
The widget follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers.
20-
For more information, refer to the article on [WAI-ARIA support in Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).
27+
28+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
29+
30+
### Main Button Element
31+
32+
33+
The following table summarizes the selectors and attributes supported by the main `button` element of the DropDownButton:
34+
35+
| Selector | Attribute | Usage |
36+
| -------- | --------- | ----- |
37+
| `.k-menu-button` | `role=button` or `nodeName=button` | Omitted if the `<button>` DOM element is used. |
38+
| | `aria-label` | The attribute must be present when no text is initially visible in the button. |
39+
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
40+
| | `aria-haspopup=menu` | Indicates the presence of a menu popup. |
41+
| | `aria-controls=.k-menu-group id` | Points to the popup element. Builds a relationship between the button and the popup. |
42+
| `.k-menu-button.k-disabled` | `aria-disabled=true` | Rendered only when the button is disabled and the `disabled` attribute cannot be used. Applicable to the `<button>` or `<input type="button">` elements. |
43+
44+
### Popup Menu Element
45+
46+
47+
The following table summarizes the selectors and attributes supported by the popup `menu` element of the DropDownButton:
48+
49+
| Selector | Attribute | Usage |
50+
| -------- | --------- | ----- |
51+
| `.k-menu-group` | `role=menu` | Announces the `menu` role of the popup. |
52+
| | `aria-labelledby=.k-menu-button id` | Points to the `button` element. |
53+
| `.k-menu-item` | `role=menuitem` | Announces the `menuitem` role of the popup items. |
54+
55+
## Resources
56+
57+
[WAI-ARIA Authoring Practices: Navigation Menu Button Example](https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links.html)
2158

2259
## Section 508
2360

24-
The DropDownButton 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 %}).
2561

26-
## WCAG 2.2
62+
The DropDownButton is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
2763

28-
The DropDownButton 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 %}).
64+
## Testing
2965

30-
## See Also
3166

67+
The DropDownButton has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
68+
69+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
70+
71+
### Screen Readers
72+
73+
74+
The DropDownButton has been tested with the following screen readers and browsers combinations:
75+
76+
| Environment | Tool |
77+
| ----------- | ---- |
78+
| Firefox | NVDA |
79+
| Chrome | JAWS |
80+
| Microsoft Edge | JAWS |
81+
82+
83+
84+
### Automated Testing
85+
The DropDownButton has been tested with [axe-core](https://github.com/dequelabs/axe-core).
86+
### Test Example
87+
A live test example of the DropDownButton component could be found here: https://demos.telerik.com/kendo-ui/accessibility/dropdownbutton
88+
## See Also
3289
* [Keyboard Navigation by the DropDownButton (Demo)](https://demos.telerik.com/kendo-ui/dropdownbutton/keyboard-navigation)
3390
* [Keyboard Navigation by the DropDownButton]({% slug keynav_kendoui_dropdownbutton_widget %})
3491
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
35-
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
92+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Overview
3+
page_title: jQuery DropDownTree Documentation | DropDownTree Accessibility
4+
description: "Get started with the jQuery DropDownTree by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_dropdowntree_widget
6+
position: 1
7+
---
8+
9+
# DropDownTree Accessibility
10+
11+
The DropDownTree is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
For more information, refer to [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %}).
14+
15+
16+
17+
18+
Out of the box, the Kendo UI for jQuery DropDownTree provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The DropDownTree 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.
22+
23+
## WAI-ARIA
24+
25+
26+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
27+
28+
### DropDownTree Wrapping Element
29+
30+
31+
The following table summarizes the selectors and attributes supported by the DropDownTree wrapper element:
32+
33+
| Selector | Attribute | Usage |
34+
| -------- | --------- | ----- |
35+
| `.k-dropdowntree` | `role=combobox` | Announces the drop-down element of the button. |
36+
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
37+
| | `aria-haspopup=tree` | Indicates the presence of a popup with a tree navigation. |
38+
| | `aria-expanded=true/false` | Announces the state of the popup visibility. |
39+
| | `aria-controls=.k-treeview id` | Points to the `treeview` element. Signifies that the `combobox` element controls the `treeview` one. |
40+
| | `aria-activedescendent=.k-treeview-item id` | Points to the focused item in the popup. The focused item is changed with the keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed. |
41+
| | `aria-readonly=true` | The attribute is rendered only when the drop-down is read-only. |
42+
| | `aria-autocomplete=list` | The attribute is rendered and the value is set to `list` when the filtering feature is enabled. |
43+
| | `aria-invalid=true` | The attribute is rendered only when the drop-down is in a form and announces the valid state of the component. |
44+
| | `aria-busy=true` | The attribute is rendered only when the drop-down is loading data. |
45+
| | `tabindex=0` | The element must be focusable. |
46+
| `.k-dropdowntree.k-disabled` | `aria-disabled=true` | The attribute is rendered only when the drop-down is disabled. |
47+
| `.k-input-button` | `role=button` or `nodeName=button` | The element must either be a `<button>` element or must have `role="button"` assigned. |
48+
| | `aria-label` | The button requires an accessible name that will be assigned to it. |
49+
| | `tabindex=-1` | The `button` element must not be focusable. |
50+
51+
### Popup Listbox
52+
53+
54+
The popup element of the DropDownTree has to 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 DropDownTree:
55+
56+
| Selector | Attribute | Usage |
57+
| -------- | --------- | ----- |
58+
| `.k-animation-container` | `role=region` | When the component container is appended to the `<body>` element of the document, it requires you to assign a `landmark` role to it. Otherwise, it must be appended to an element with an appropriate `landmark` role. |
59+
| | `aria-label` or `aria-labelledby` | Provides a label when the container has a `region` role assigned. |
60+
61+
### TreeView
62+
63+
64+
The tree that is placed in the `popup` element of the component must implement the specification for a TreeView component.
65+
66+
[TreeView accessibility specification]({{treeview_a11y_link}})
67+
68+
## Resources
69+
70+
[WAI-ARIA Authoring Practices: TreeView Example](https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-navigation)
71+
72+
[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
73+
74+
## Section 508
75+
76+
77+
The DropDownTree is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
78+
79+
## Testing
80+
81+
82+
The DropDownTree has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
83+
84+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
85+
86+
### Screen Readers
87+
88+
89+
The DropDownTree has been tested with the following screen readers and browsers combinations:
90+
91+
| Environment | Tool |
92+
| ----------- | ---- |
93+
| Firefox | NVDA |
94+
| Chrome | JAWS |
95+
| Microsoft Edge | JAWS |
96+
97+
98+
99+
### Automated Testing
100+
The DropDownTree has been tested with [axe-core](https://github.com/dequelabs/axe-core).
101+
### Test Example
102+
A live test example of the DropDownTree component could be found here: https://demos.telerik.com/kendo-ui/accessibility/dropdowntree
103+
## See Also
104+
* [Keyboard Navigation by the DropDownTree (Demo)](https://demos.telerik.com/kendo-ui/dropdowntree/keyboard-navigation)
105+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
106+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: Overview
3+
page_title: jQuery Editor Documentation | Editor Accessibility
4+
description: "Get started with the jQuery Editor by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_editor_widget
6+
position: 1
7+
---
8+
9+
# Editor Accessibility
10+
11+
The Editor is accessible by screen readers and provides [`WAI-ARIA`](https://www.w3.org/WAI/ARIA/apg/), [`Section 508`](https://www.section508.gov/), [`WCAG 2.2`](https://www.w3.org/TR/WCAG22/), and keyboard support.
12+
13+
For more information, refer to:
14+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
15+
16+
17+
18+
19+
Out of the box, the Kendo UI for jQuery Editor provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
20+
21+
22+
The Editor 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.
23+
24+
## WAI-ARIA
25+
26+
27+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
28+
29+
30+
The Editor component has two distinctive modes - one with `<textarea>` and an `<iframe>` containing an HTML document and another one with only a contenteditable `<div>` (Inline Editor). The inline mode of the Editor does not require any particular ARIA attributes to be present in the widget.
31+
32+
### Editor with textarea
33+
34+
| Selector | Attribute | Usage |
35+
| -------- | --------- | ----- |
36+
| `.k-iframe` | `tabindex=0` | The element must be part of the page tabsequence. |
37+
| | `label for` or `aria-label` or `aria-labelledby` | The component focusable element needs an accessible name to be assigned to it. |
38+
39+
### Editor with contenteditable div
40+
41+
42+
When in its inline mode (with a contenteditable `div` element), the editor does not represent a form input. Hence, no additional attributes are required in that scenario.
43+
44+
## Resources
45+
46+
[WAI-ARIA specification for textbox](https://www.w3.org/TR/wai-aria-1.2/#textbox)
47+
48+
## Section 508
49+
50+
51+
The Editor is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
52+
53+
## Testing
54+
55+
56+
The Editor has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
57+
58+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
59+
60+
### Screen Readers
61+
62+
63+
The Editor has been tested with the following screen readers and browsers combinations:
64+
65+
| Environment | Tool |
66+
| ----------- | ---- |
67+
| Firefox | NVDA |
68+
| Chrome | JAWS |
69+
| Microsoft Edge | JAWS |
70+
71+
72+
73+
### Automated Testing
74+
75+
The Editor has been tested with [axe-core](https://github.com/dequelabs/axe-core).
76+
77+
### Test Example
78+
79+
A live test example of the Editor component could be found here: https://demos.telerik.com/kendo-ui/accessibility/editor
80+
81+
## See Also
82+
83+
* [Keyboard Navigation by the Editor (Demo)](https://demos.telerik.com/kendo-ui/editor/keyboard-navigation)
84+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
85+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

0 commit comments

Comments
 (0)