Skip to content

Commit 95d06f3

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e17856d commit 95d06f3

File tree

37 files changed

+489
-115
lines changed

37 files changed

+489
-115
lines changed

‎docs-aspnet/html-helpers/conversational-ui/aiprompt/accessibility/overview.md‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,46 @@ This section lists the selectors, attributes, and behavior patterns supported by
2525
### AI Prompt
2626

2727

28-
The AI Prompt component is a composite one and integrates the accessibility of the Toolbar, TextArea, Card List container
28+
The AI Prompt component is a composite one and integrates the accessibility of the Toolbar, TextArea, Card, Chip and FloatingActionButton.
2929

3030
### TextArea Component
3131

3232
[TextArea accessibility specification]({% slug htmlhelpers_textarea_accessibility %})
3333

34-
### Prompt Suggestion Component
34+
### TextArea Adornments
3535

36+
| Selector | Attribute | Usage |
37+
| -------- | --------- | ----- |
38+
| `.k-textarea-prefix>.k-button` | `role=button` or `nodeName=button` | The buttons must have appropriate role. |
39+
| | `aria-label` or `title` | The buttons must be properly labelled. |
40+
| `.k-textarea-suffix>.k-button` | `role=button` or `nodeName=button` | The buttons must have appropriate role. |
41+
| | `aria-label` or `title` | The buttons must be properly labelled. |
42+
| `.k-textarea-suffix>.k-prompt-send.k-disabled` | `aria-disabled=true` | Announces send action as disabled if necessary. |
43+
44+
### Suggestion Component
3645

37-
The Prompt suggestion list implements roving tabindex navigation. Meaning that only one suggestion has tabindex=0. The display of the suggestion list is controlled by the expand button.
46+
47+
The Suggestion list implements roving tabindex navigation. Meaning that only one suggestion has tabindex=0. The display of the suggestion list is controlled by the expand button.
3848

3949
| Selector | Attribute | Usage |
4050
| -------- | --------- | ----- |
4151
| `.k-prompt-expander .k-button` | `aria-controls=.k-prompt-expander-content id` | Points to the controlled element based on the given `id`. |
4252
| | `aria-expanded=true/false` | Indicates the expanded state of the prompt expander content. |
43-
| `.k-prompt-expander .k-prompt-expander-content` | `role=list` | Indicates that the suggestion container element is a list. |
44-
| `.k-prompt-expander .k-prompt-suggestion` | `role=listitem` | Indicates that the suggestion element is a listitem. |
45-
| | `tabindex=0/-1` | The element should be focusable. |
53+
| `.k-prompt-expander .k-suggestion-group` | `role=group` | Indicates that the suggestion container element is a group. |
54+
| `.k-prompt-expander .k-suggestion` | `role=button` | Indicates that the suggestion element is a button. |
55+
| | `aria-label` or `title` | The suggestion elements must be properly labelled. |
56+
| | `tabindex=0` | The suggestion element should be focusable. |
57+
58+
### Button Component
59+
60+
[Button accessibility specification]({% slug htmlhelpers_button_accessibility %})
61+
62+
### Adaptive Mode
63+
64+
65+
When the AI Prompt component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
66+
67+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
4668

4769
### Toolbar Component
4870

@@ -56,6 +78,26 @@ The Prompt suggestion list implements roving tabindex navigation. Meaning that o
5678

5779
[Card accessibility specification]({{card_a11y_link}})
5880

81+
### Chip Component
82+
83+
[Chip accessibility specification]({% slug htmlhelpers_chip_accessibility %})
84+
85+
### ChipList Component
86+
87+
[ChipList accessibility specification]({% slug htmlhelpers_chiplist_accessibility %})
88+
89+
### ContextMenu Component
90+
91+
[ContextMenu accessibility specification]({% slug htmlhelpers_contextmenu_accessibility %})
92+
93+
### FloatingActionButton Component
94+
95+
[FloatingActionButton accessibility specification]({% slug htmlhelpers_floatingactionbutton_accessibility %})
96+
97+
### SpeechToTextButton Component
98+
99+
[SpeechToTextButton accessibility specification]({% slug htmlhelpers_speechtotextbutton_accessibility %})
100+
59101
### More Actions View - PanelBar Component
60102

61103
[PanelBar accessibility specification]({% slug htmlhelpers_panelbar_accessibility %})

‎docs-aspnet/html-helpers/conversational-ui/chat/accessibility/overview.md‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,54 @@ The Chat is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2
2222

2323
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
2424

25+
### Chat component
26+
27+
28+
The Chat component is a composite one and integrates the accessibility of the ToolBar, Dialog, DropDownButton and ContextMenu components.
29+
2530
| Selector | Attribute | Usage |
2631
| -------- | --------- | ----- |
2732
| `.k-message-list` | `role=log` | The role of the Chat message list must imply that there is a log (list) of messages. |
2833
| | `aria-label` | Announces the purpose of the Chat message list (for ex. 'Message list'). |
29-
| `.k-quick-reply` | `role=button` | The quick reply elements must be exposed as buttons. |
30-
| | `tabindex=0` | The quick reply elements must be part of the page tabsequence. |
31-
| `.k-message-box>.k-input-inner` | `role=textbox` or `nodeName=input` | The message must have an input or an element with `role=textbox`. |
32-
| | `label for` or `aria-label` or `aria-labelledby` | The message box input must have a label. |
34+
| `.k-bubble` | `tabindex=0` | The Chat bubble must be focusable. |
35+
| `.k-bubble .k-typing-indicator` | `tabindex=-1` | The Chat bubble typing indicator should not be focusable. |
36+
| `.k-suggestion-group` | `role=group` | Indicates that the suggestion container element is a group. |
37+
| `.k-suggestion` | `role=button` | The suggestion elements must be exposed as buttons. |
38+
| | `tabindex=0` | The suggestion elements must be part of the page tabsequence. |
3339
| `.k-input-suffix>.k-button` | `role=button` or `nodeName=button` | The buttons must have appropriate role. |
3440
| | `aria-label` or `title` | The buttons must be properly labelled. |
35-
| `.k-button-toggle` | `aria-controls=.k-toolbar-box id` | The ToolBar toggle button must have an `aria-controls` attribute pointing to the ToolBar element. |
36-
| `.k-toolbar-box` | `role=toolbar` | The Chat ToolBar must have an appropriate role. |
41+
| `.k-input-suffix>.k-chat-send.k-disabled` | `aria-disabled=true` | Announces send action as disabled if necessary. |
42+
| `.k-message-group-content>.k-chat-download-button` | `aria-label` or `title` | The download button must be properly labelled. |
43+
| | `role=button` or `nodeName=button` | The download button must have an appropriate role. |
44+
| `.k-message-reference>.k-button` | `aria-label` or `title` | The reference close button must be properly labelled. |
45+
| | `role=button` or `nodeName=button` | The reference close button must have an appropriate role. |
46+
| `k-bubble-expandable-indicator` | `role=button` | The expandable indicator must have an appropriate role. |
47+
| | `aria-label` or `title` | The expandable indicator must be properly labelled. |
48+
| | `tabindex=0` | The expandable indicator must be part of the page tabsequence. |
3749

50+
### ToolBar Component
3851

39-
Chat ToolBar follows the specification for the the ToolBar component.
52+
53+
Chat Message ToolBar follows the specification for the the ToolBar component.
4054

4155
[ToolBar accessibility specification]({% slug htmlhelpers_toolbar_accessibility %})
4256

57+
### Textarea Component
58+
59+
[Textarea accessibility specification]({% slug htmlhelpers_textarea_accessibility %})
60+
61+
### DropDownButton Component
62+
63+
[DropDownButton accessibility specification]({% slug htmlhelpers_dropdownbutton_accessibility %})
64+
65+
### SpeechToTextButton Component
66+
67+
[SpeechToTextButton accessibility specification]({% slug htmlhelpers_speechtotextbutton_accessibility %})
68+
69+
### ContextMenu Component
70+
71+
[ContextMenu accessibility specification]({% slug htmlhelpers_contextmenu_accessibility %})
72+
4373
## Resources
4474

4575
[WAI-ARIA specification for log](https://www.w3.org/TR/wai-aria-1.2/#log)

‎docs-aspnet/html-helpers/data-management/grid/accessibility/overview.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,15 @@ Implements the ColumnMenu specification.
137137
| `.k-grid-header-wrap .k-grid-header-table .k-table-row` | `role=presentation/none` | When there are locked columns, the rows from the non-locked header table should have their default semantic role removed, as their children are owned by the corresponding row from the locked table. |
138138
| `.k-grid-content .k-grid-table .k-table-row` | `role=presentation/none` | When there are locked columns, the rows from the non-locked content table should have their default semantic role removed, as their children are owned by the corresponding row from the locked table. |
139139

140+
#### Grid popup editor
141+
142+
143+
The popup editor consists of a Window component containing a Form component.
144+
145+
[Window accessibility specification]({% slug htmlhelpers_window_accessibility %})
146+
147+
[Form accessibility specification]({% slug htmlhelpers_form_accessibility %})
148+
140149
#### Grid footer
141150

142151

@@ -166,6 +175,15 @@ The selection aggregates are placed within a `.k-grid-selection-aggregates` elem
166175
| -------- | --------- | ----- |
167176
| `.k-grid-selection-aggregates` | `aria-live=polite` | Ensures that changes in the calculated selection aggregates are announced by assistive technologies. |
168177

178+
### Data Grid Stacked Layout
179+
180+
181+
The element is a regular Grid cell (td element) that holds a stacked layout content representing all available column headers and content for the given row. All internal "stacked cell" elements become focusable when focus is moved within the cell.
182+
183+
| Selector | Attribute | Usage |
184+
| -------- | --------- | ----- |
185+
| `.k-grid-stack-cell` | `tabindex=0` | "Stacked cell" elements receive tabindex '0' when focus is within their parent '.k-grid-stack-row' element. This allows the end user to navigate through the content using Tab. The tabindex attribute is removed when focus leaves the '.k-grid-stack-row' element. |
186+
169187
## Resources
170188

171189
[WAI-ARIA specification for grid](https://www.w3.org/TR/wai-aria-1.2/#grid)

‎docs-aspnet/html-helpers/editors/autocomplete/accessibility/overview.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
5656
| -------- | --------- | ----- |
5757
| `.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. |
5858
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
59+
| `.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. |
5960
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
6061
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
6162
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
@@ -66,6 +67,13 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
6667
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
6768
| `.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. |
6869

70+
### Adaptive Mode
71+
72+
73+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
74+
75+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
76+
6977
## Resources
7078

7179
[WAI-ARIA Authoring Practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)

‎docs-aspnet/html-helpers/editors/colorpicker/accessibility/overview.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,18 @@ The ColorPicker popup contains in itself ColorGradient, ColorPalette, a UI to sw
4747
| | `aria-label=undefined` | The ColorGradient element must have its `aria-label` attribute removed. |
4848
| | `tabindex=-1/undefined` | The ColorGradient must be removed from the page tab sequence. |
4949

50+
### Adaptive Mode
51+
52+
53+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
54+
55+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
56+
57+
| Selector | Attribute | Usage |
58+
| -------- | --------- | ----- |
59+
| `.k-colorgradient` | `role=none/undefined` | The ColorGradient element must have its role removed. |
60+
| | `aria-label=undefined` | The ColorGradient element must have its `aria-label` attribute removed. |
61+
5062
## Section 508
5163

5264

‎docs-aspnet/html-helpers/editors/combobox/accessibility/overview.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
5757
| -------- | --------- | ----- |
5858
| `.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. |
5959
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
60+
| `.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. |
6061
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
6162
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
6263
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
@@ -67,6 +68,13 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
6768
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
6869
| `.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. |
6970

71+
### Adaptive Mode
72+
73+
74+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
75+
76+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
77+
7078
## Resources
7179

7280
[WAI-ARIA Authoring Practices: Editable Combobox With Both List and Inline Autocomplete Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-both.html)

‎docs-aspnet/html-helpers/editors/datepicker/accessibility/overview.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@ The Calendar in the Popup element of the component should implement the specific
5050

5151
[Calendar accessibility specification]({% slug htmlhelpers_calendar_accessibility %})
5252

53+
### Adaptive Mode
54+
55+
56+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
57+
58+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
59+
5360
## Resources
5461

5562
[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)

‎docs-aspnet/html-helpers/editors/daterangepicker/accessibility/overview.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ The Calendars in the Popup element of the component should implement the specifi
4646

4747
[Calendar accessibility specification]({% slug htmlhelpers_calendar_accessibility %})
4848

49+
### Adaptive Mode
50+
51+
52+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
53+
54+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
55+
4956
## Resources
5057

5158
[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)

‎docs-aspnet/html-helpers/editors/datetimepicker/accessibility/overview.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,13 @@ Time Popup implementation should follow the specification for the TimePicker com
6464

6565
[TimePicker accessibility specification]({% slug htmlhelpers_timepicker_accessibility %})
6666

67+
### Adaptive Mode
68+
69+
70+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
71+
72+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
73+
6774
## Resources
6875

6976
[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)

‎docs-aspnet/html-helpers/editors/dropdownlist/accessibility/overview.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ The listbox placed in the popup element of the DropDownList has to implement the
6969
| -------- | --------- | ----- |
7070
| `.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. |
7171
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
72+
| `.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. |
7273
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
7374
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
7475
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
@@ -79,6 +80,13 @@ The listbox placed in the popup element of the DropDownList has to implement the
7980
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
8081
| `.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. |
8182

83+
### Adaptive Mode
84+
85+
86+
When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.
87+
88+
[ActionSheet accessibility specification]({% slug htmlhelpers_actionsheet_accessibility %})
89+
8290
## Resources
8391

8492
[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)

0 commit comments

Comments
 (0)