Skip to content

Commit f203765

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 5aceb89 commit f203765

File tree

14 files changed

+765
-46
lines changed

14 files changed

+765
-46
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ If set to `true`, the Switch will render into its read-only state.
5858

5959
Defines the text of the `checked` and `unchecked` labels that are displayed within the Switch. All labels support localization.
6060

61+
> The `messages` property is applicable only for the `Default` and `Classic` themes. All other themes, by design, do not show `checked` and `unchecked` messages.
62+
6163
#### Example
6264

6365
<input id="switch" />
@@ -75,6 +77,8 @@ Defines the text of the `checked` and `unchecked` labels that are displayed with
7577

7678
The label for the checked state of the Switch.
7779

80+
> The `messages` property is applicable only for the `Default` and `Classic` themes. All other themes, by design, do not show `checked` and `unchecked` messages.
81+
7882
#### Example
7983

8084
<input id="switch" />
@@ -91,6 +95,8 @@ The label for the checked state of the Switch.
9195

9296
The label for the unchecked state of the Switch.
9397

98+
> The `messages` property is applicable only for the `Default` and `Classic` themes. All other themes, by design, do not show `checked` and `unchecked` messages.
99+
94100
#### Example
95101

96102
<input id="switch" />

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,8 @@ Specifies if the Tooltip callout will be displayed.
265265

266266
Specifies a selector for the elements within the container which will display the Tooltip.
267267

268+
> It is recommended to avoid using the element's `title` attribute in the selector string, as the tooltip component strongly relies on it.
269+
268270
#### Example - showing a Tooltip only for strong elements in a text
269271

270272
<div id="container">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -806,7 +806,7 @@ A string, DOM element or jQuery object which represents the node. A string is tr
806806
});
807807

808808
var treeview = $("#treeview").data("kendoTreeView");
809-
var dataItem = treeview.dataItem(".k-item:first");
809+
var dataItem = treeview.dataItem(".k-treeview-item:first");
810810
/* The result can be observed in the DevTools(F12) console of the browser. */
811811
console.log(dataItem.text); // displays "foo"
812812
</script>

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Overview
3+
page_title: jQuery CheckBox Documentation | CheckBox Accessibility
4+
description: "Get started with the jQuery CheckBox by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_checkbox_widget
6+
position: 1
7+
---
8+
9+
# CheckBox Accessibility
10+
11+
The CheckBox 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 CheckBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The CheckBox 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+
| Selector | Attribute | Usage |
29+
| -------- | --------- | ----- |
30+
| `.k-checkbox` | `role=checkbox` or `type=checkbox` | Announces the `checkbox` role of the element. |
31+
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name to which it will be assigned. |
32+
| | `aria-checked=true` or `checked=checked` | Announces the checked state of the CheckBox. |
33+
| | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the CheckBox is disabled. |
34+
| `.k-invalid,.ng-invalid` | `aria-invalid=true` | The attribute is rendered only when the CheckBox is in a `form` HTML element and announces the invalid state of the component. |
35+
36+
## Resources
37+
38+
[WAI-ARIA Authoring Practices: CheckBox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
39+
40+
## Section 508
41+
42+
43+
The CheckBox is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
44+
45+
## Testing
46+
47+
48+
The CheckBox has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
49+
50+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
51+
52+
### Screen Readers
53+
54+
55+
The CheckBox has been tested with the following screen readers and browsers combinations:
56+
57+
| Environment | Tool |
58+
| ----------- | ---- |
59+
| Firefox | NVDA |
60+
| Chrome | JAWS |
61+
| Microsoft Edge | JAWS |
62+
63+
64+
65+
### Automated Testing
66+
67+
The CheckBox has been tested with [axe-core](https://github.com/dequelabs/axe-core).
68+
69+
## See Also
70+
71+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
72+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Overview
3+
page_title: jQuery Chip Documentation | Chip Accessibility
4+
description: "Get started with the jQuery Chip by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_chip_widget
6+
position: 1
7+
---
8+
9+
# Chip Accessibility
10+
11+
The Chip 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 Chip provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The Chip 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+
| Selector | Attribute | Usage |
29+
| -------- | --------- | ----- |
30+
| `*:not(.k-chip-list) > .k-chip` | `role=button` | Announces that a chip is an optional inner component within the Chip list. |
31+
| `*:not(.k-chip-list) > .k-chip.k-selected` | `aria-pressed=true` | Announces that the Chip has been selected. |
32+
| `*:not(.k-chip-list) > .k-chip:not(.k-selected)` | `aria-pressed=false` | Announces that the Chip has not benn selected. |
33+
34+
## Resources
35+
36+
[WAI-ARIA Authoring Practices: Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
37+
38+
## Section 508
39+
40+
41+
The Chip is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
42+
43+
## Testing
44+
45+
46+
The Chip has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
47+
48+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
49+
50+
### Screen Readers
51+
52+
53+
The Chip has been tested with the following screen readers and browsers combinations:
54+
55+
| Environment | Tool |
56+
| ----------- | ---- |
57+
| Firefox | NVDA |
58+
| Chrome | JAWS |
59+
| Microsoft Edge | JAWS |
60+
61+
62+
63+
### Automated Testing
64+
The Chip has been tested with [axe-core](https://github.com/dequelabs/axe-core).
65+
### Test Example
66+
A live test example of the Chip component could be found here: https://demos.telerik.com/kendo-ui/accessibility/chip
67+
## See Also
68+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
69+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Overview
3+
page_title: jQuery ChipList Documentation | ChipList Accessibility
4+
description: "Get started with the jQuery ChipList by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_chiplist_widget
6+
position: 1
7+
---
8+
9+
# ChipList Accessibility
10+
11+
The ChipList 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 ChipList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The ChipList 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+
| Selector | Attribute | Usage |
29+
| -------- | --------- | ----- |
30+
| `.k-chip-list` | `role=listbox` | Announces the list role of the chip list. |
31+
| | `aria-label` or `aria-labelledby` | Adds label to the ChipList element. ListBox element requires an accessible name attached to it. |
32+
| | `aria-orientation=horizontal` | Specifies the horizontal orientation of the chiplist that gives context about the navigation shortcuts. |
33+
| | `aria-multiselectable=true` | Announces the multiple selection ability of the chiplist. Only when the selection mode is set to multiple. |
34+
| `.k-chip` | `role=option` | Announces the chip is an option inner component of the chip list. |
35+
| `.k-chip.k-selected` | `aria-selected=true` | Announces the chip is selected. |
36+
| `.k-chip:not(.k-selected)` | `aria-selected=false` | Announces the chip is not selected. |
37+
| `.k-chip:has(.k-i-x-circle),.k-chip:has(.k-svg-i-x-circle)` | `aria-keyshortcuts=Enter Delete` | Announces the Delete action along with the default Enter key used for selection/click action. |
38+
39+
40+
When selection is disabled in the ChipList, it should not have its role set to `listbox`. Instead, the attribute should either be omitted, or its value should be set to `none`. In that case the `role` of the Chip elements should remain `button` as per the Chip component specification.
41+
42+
## Resources
43+
44+
[ARIA practices list pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)
45+
46+
## Section 508
47+
48+
49+
The ChipList is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
50+
51+
## Testing
52+
53+
54+
The ChipList has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
55+
56+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
57+
58+
### Screen Readers
59+
60+
61+
The ChipList has been tested with the following screen readers and browsers combinations:
62+
63+
| Environment | Tool |
64+
| ----------- | ---- |
65+
| Firefox | NVDA |
66+
| Chrome | JAWS |
67+
| Microsoft Edge | JAWS |
68+
69+
70+
71+
### Automated Testing
72+
The ChipList has been tested with [axe-core](https://github.com/dequelabs/axe-core).
73+
### Test Example
74+
A live test example of the ChipList component could be found here: https://demos.telerik.com/kendo-ui/accessibility/chiplist
75+
## See Also
76+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
77+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

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

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Overview
3-
page_title: jQuery ColorPalette Documentation - ColorPalette Accessibility
4-
description: "Get started with the jQuery ColorPalette and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
3+
page_title: jQuery ColorPalette Documentation | ColorPalette Accessibility
4+
description: "Get started with the jQuery ColorPalette by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
55
slug: accessibility_kendoui_colorpalette_widget
66
position: 1
77
---
@@ -14,21 +14,68 @@ For more information, refer to:
1414
* [Keyboard navigation by the Kendo UI ColorPalette]({% slug keynav_colorpalette_jquery %})
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 ColorPalette provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
21+
22+
23+
The ColorPalette 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. 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+
| Selector | Attribute | Usage |
31+
| -------- | --------- | ----- |
32+
| `.k-colorpalette` | `role=grid` | The focusable wrapper of the component should announce its role as a `grid`. |
33+
| | `aria-label` or `aria-labelledby` | The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component. |
34+
| | `aria-activedescendant=.k-colorpalette-tile.k-focus id` | Points to the focused cell in the table. The focused cell is changed via keyboard navigation. |
35+
| | `tabindex=0` | The element must be focusable. |
36+
| `.k-colorpalette.k-disabled` | `aria-disabled=true` | Attribute is rendered only when the ColorPalette is disabled. |
37+
| `.k-colorpalette-table` | `role=none/presentation` | Negates the default role of the element, as it is wrapped within a `role="grid"` element. |
38+
| `.k-colorpalette-table>tbody>tr` | `role=row` | Required as the semantic role of its parent `<table>` has been removed. |
39+
| `.k-colorpalette-tile` | `role=gridcell` | Required as the semantic role of its parent `<table>` has been removed. |
40+
| | `aria-label` or `title` | The text representation of the color value for the current cell. |
41+
| `.k-colorpalette-tile.k-selected` | `aria-selected=true` | Present on the currently selected cell in the component. |
2042

2143
## Section 508
2244

23-
The ColorPalette 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 %}).
2445

25-
## WCAG 2.2
46+
The ColorPalette is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
47+
48+
## Testing
49+
50+
51+
The ColorPalette has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
2652

27-
The ColorPalette 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 %})
53+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
54+
55+
### Screen Readers
56+
57+
58+
The ColorPalette has been tested with the following screen readers and browsers combinations:
59+
60+
| Environment | Tool |
61+
| ----------- | ---- |
62+
| Firefox | NVDA |
63+
| Chrome | JAWS |
64+
| Microsoft Edge | JAWS |
65+
66+
67+
68+
### Automated Testing
69+
70+
The ColorPalette has been tested with [axe-core](https://github.com/dequelabs/axe-core).
71+
72+
### Test Example
73+
74+
A live test example of the ColorPalette component could be found here: https://demos.telerik.com/kendo-ui/accessibility/colorpalette
2875

2976
## See Also
3077

3178
* [Keyboard Navigation by the ColorPalette (Demo)](https://demos.telerik.com/kendo-ui/colorpalette/keyboard-navigation)
32-
* [Keyboard Navigation by the ColorPalette]({% slug keynav_colorgradient_jquery %})
79+
* [Keyboard Navigation by the ColorPalette]({% slug keynav_colorpalette_jquery %})
3380
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
34-
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
81+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

0 commit comments

Comments
 (0)