Skip to content

Commit 40acf95

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e6fac10 commit 40acf95

File tree

6 files changed

+419
-16
lines changed

6 files changed

+419
-16
lines changed

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

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

‎docs/controls/tilelayout/keyboard-navigation.md‎ renamed to ‎docs/controls/tilelayout/accessibility/keyboard-navigation.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Keyboard Navigation
33
page_title: jQuery TileLayout Documentation - Keyboard Navigation
44
description: "Get started with the jQuery TileLayout by Kendo UI and learn about the accessibility support it provides through its keyboard navigation functionality."
55
slug: keynav_kendoui_tilelayout_widget
6-
position: 5
6+
position: 2
77
---
88

99
# Keyboard Navigation
@@ -25,5 +25,5 @@ The following example demonstrates how to enable the key navigation in the TileL
2525

2626
## See Also
2727

28-
* [Keyboard Navigation by the Grid (Demo)](https://demos.telerik.com/kendo-ui/tilelayout/keyboard-navigation)
28+
* [Keyboard Navigation by the TileLayout (Demo)](https://demos.telerik.com/kendo-ui/tilelayout/keyboard-navigation)
2929
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Overview
3+
page_title: jQuery TileLayout Documentation | TileLayout Accessibility
4+
description: "Get started with the jQuery TileLayout by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_tilelayout_widget
6+
position: 1
7+
---
8+
9+
# TileLayout Accessibility
10+
11+
The TileLayout is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the Kendo UI TileLayout]({% slug keynav_kendoui_tilelayout_widget %})
15+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
16+
17+
18+
19+
20+
Out of the box, the Kendo UI for jQuery TileLayout provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
21+
22+
23+
The TileLayout is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AAA](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
26+
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-tilelayout` | `role=list` | Sets list role to the TileLayout wrapper. |
33+
| `.k-tilelayout-item` | `role=listitem` | Sets listitem role to the TileLayout items. |
34+
| | `aria-labelledby` | Associates the focusable item wrapper with the respective header text element (.k-tilelayout-item-header .k-card-title). |
35+
| | `tabindex=0` | Makes the item wrapper element focusable. |
36+
| | `aria-keyshortcuts=Enter` | Announces Enter as an available key shortcut when the item is focused. |
37+
| | `aria-dropeffect=execute` | Announces that an action, supported by the drop-target (resizing or reordering) will be executed when the item is dropped. |
38+
| | `aria-grabbed=true/false` | The aria-grabbed state indicates an element's 'grabbed' state in a drag-and-drop operation. |
39+
| `.k-tilelayout-item-header .k-card-title` | `id` | Unique and deterministic identifier to link the header text element to the focusable wrapper. |
40+
41+
## Section 508
42+
43+
44+
The TileLayout is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
45+
46+
## Testing
47+
48+
49+
The TileLayout has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
50+
51+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
52+
53+
### Screen Readers
54+
55+
56+
The TileLayout has been tested with the following screen readers and browsers combinations:
57+
58+
| Environment | Tool |
59+
| ----------- | ---- |
60+
| Firefox | NVDA |
61+
| Chrome | JAWS |
62+
| Microsoft Edge | JAWS |
63+
64+
65+
66+
### Automated Testing
67+
The TileLayout has been tested with [axe-core](https://github.com/dequelabs/axe-core).
68+
### Test Example
69+
A live test example of the TileLayout component could be found here: https://demos.telerik.com/kendo-ui/accessibility/tilelayout
70+
## See Also
71+
* [Keyboard Navigation by the TileLayout (Demo)](https://demos.telerik.com/kendo-ui/tilelayout/keyboard-navigation)
72+
* [Keyboard Navigation by the TileLayout]({% slug keynav_kendoui_tilelayout_widget %})
73+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
74+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Overview
3+
page_title: jQuery TimeDurationPicker Documentation | TimeDurationPicker Accessibility
4+
description: "Get started with the jQuery TimeDurationPicker by Kendo UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_kendoui_timedurationpicker_widget
6+
position: 1
7+
---
8+
9+
# TimeDurationPicker Accessibility
10+
11+
The TimeDurationPicker 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 TimeDurationPicker provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
19+
20+
21+
The TimeDurationPicker 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+
### TimeDurationPicker Wrapping Element
29+
30+
| Selector | Attribute | Usage |
31+
| -------- | --------- | ----- |
32+
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
33+
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
34+
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
35+
| | `aria-haspopup=dialog` | Indicates the component has a Dialog Popup |
36+
| | `aria-controls=.k-popup id` | Points to the popup element. Signifies that the `combobox` element controls the `dialog` popup. |
37+
| | `readonly` or `aria-readonly` | Attribute is rendered only when the DatePicker is readonly. |
38+
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | Attribute is rendered only when the picker is in form and announces the valid state of the component. |
39+
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DatePicker is disabled. |
40+
| `.k-input-button` | `aria-hidden=true` | The button element must be hidden from the assistive technologies. |
41+
| | `tabindex=-1` | Button element must not be focusable. |
42+
43+
### List Elements on the Popup
44+
45+
| Selector | Attribute | Usage |
46+
| -------- | --------- | ----- |
47+
| `.k-time-list` | `role=listbox` | The timelist elements must have `listbox` role assigned. |
48+
| | `aria-label` or `aria-labelledby` | The listbox needs an accessible name to be assigned to it. |
49+
| `.k-time-list .k-reset` | `role=none/presentation` | The k-rest `<ul>` element semantic meaning must be removed from the accessibility tree. |
50+
| `.k-time-list .k-item` | `role=option` | The available options in the listbox must be marked as such. |
51+
| | `aria-selected=true/false` | Selected option must have its `aria-selected` attribute set to `true`. |
52+
53+
## Resources
54+
55+
[WAI-ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
56+
57+
[WAI-ARIA specification for listbox](https://www.w3.org/TR/wai-aria-1.2/#listbox)
58+
59+
## Section 508
60+
61+
62+
The TimeDurationPicker is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
63+
64+
## Testing
65+
66+
67+
The TimeDurationPicker 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 TimeDurationPicker 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 TimeDurationPicker has been tested with [axe-core](https://github.com/dequelabs/axe-core).
86+
## See Also
87+
* [Keyboard Navigation by the TimeDurationPicker (Demo)](https://demos.telerik.com/kendo-ui/timedurationpicker/keyboard-navigation)
88+
* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %})
89+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

0 commit comments

Comments
 (0)