Skip to content

[Merge AFTER the August release(s)] chore: bump @progress/wct-a11y-spec from 2.17.0 to 2.18.0 in /src-a11y #3160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 48 additions & 6 deletions components/aiprompt/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,46 @@ This section lists the selectors, attributes, and behavior patterns supported by
### AI Prompt


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

### TextArea Component

[TextArea accessibility specification]({{textarea_a11y_link}})

### Prompt Suggestion Component
### TextArea Adornments

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-textarea-prefix>.k-button` | `role=button` or `nodeName=button` | The buttons must have appropriate role. |
| | `aria-label` or `title` | The buttons must be properly labelled. |
| `.k-textarea-suffix>.k-button` | `role=button` or `nodeName=button` | The buttons must have appropriate role. |
| | `aria-label` or `title` | The buttons must be properly labelled. |
| `.k-textarea-suffix>.k-prompt-send.k-disabled` | `aria-disabled=true` | Announces send action as disabled if necessary. |

### Suggestion Component

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.

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.

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-prompt-expander .k-button` | `aria-controls=.k-prompt-expander-content id` | Points to the controlled element based on the given `id`. |
| | `aria-expanded=true/false` | Indicates the expanded state of the prompt expander content. |
| `.k-prompt-expander .k-prompt-expander-content` | `role=list` | Indicates that the suggestion container element is a list. |
| `.k-prompt-expander .k-prompt-suggestion` | `role=listitem` | Indicates that the suggestion element is a listitem. |
| | `tabindex=0/-1` | The element should be focusable. |
| `.k-prompt-expander .k-suggestion-group` | `role=group` | Indicates that the suggestion container element is a group. |
| `.k-prompt-expander .k-suggestion` | `role=button` | Indicates that the suggestion element is a button. |
| | `aria-label` or `title` | The suggestion elements must be properly labelled. |
| | `tabindex=0` | The suggestion element should be focusable. |

### Button Component

[Button accessibility specification]({{button_a11y_link}})

### Adaptive Mode


When the AI Prompt component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

### Toolbar Component

Expand All @@ -57,6 +79,26 @@ The Prompt suggestion list implements roving tabindex navigation. Meaning that o

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

### Chip Component

[Chip accessibility specification]({{chip_a11y_link}})

### ChipList Component

[ChipList accessibility specification]({{chiplist_a11y_link}})

### ContextMenu Component

[ContextMenu accessibility specification]({{contextmenu_a11y_link}})

### FloatingActionButton Component

[FloatingActionButton accessibility specification]({{floatingactionbutton_a11y_link}})

### SpeechToTextButton Component

[SpeechToTextButton accessibility specification]({{speechtotextbutton_a11y_link}})

### More Actions View - PanelBar Component

[PanelBar accessibility specification]({{panelbar_a11y_link}})
Expand Down
8 changes: 8 additions & 0 deletions components/autocomplete/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
| -------- | --------- | ----- |
| `.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. |
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
| `.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. |
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
Expand All @@ -64,6 +65,13 @@ The popup element of the AutoComplete has to implement the WAI-ARIA specificatio
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
| `.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. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[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)
Expand Down
12 changes: 12 additions & 0 deletions components/colorpicker/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,18 @@ The ColorPicker popup contains in itself ColorGradient, ColorPalette, a UI to sw
| | `aria-label=undefined` | The ColorGradient element must have its `aria-label` attribute removed. |
| | `tabindex=-1/undefined` | The ColorGradient must be removed from the page tab sequence. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-colorgradient` | `role=none/undefined` | The ColorGradient element must have its role removed. |
| | `aria-label=undefined` | The ColorGradient element must have its `aria-label` attribute removed. |

## Section 508


Expand Down
8 changes: 8 additions & 0 deletions components/combobox/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
| -------- | --------- | ----- |
| `.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. |
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
| `.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. |
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
Expand All @@ -68,6 +69,13 @@ The popup element of the ComboBox has to implement the WAI-ARIA specification fo
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
| `.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. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[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)
Expand Down
7 changes: 7 additions & 0 deletions components/datepicker/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ The Calendar in the Popup element of the component should implement the specific

[Calendar accessibility specification]({{calendar_a11y_link}})

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,13 @@ The Calendars in the Popup element of the component should implement the specifi

[Calendar accessibility specification]({{calendar_a11y_link}})

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
Expand Down
7 changes: 7 additions & 0 deletions components/datetimepicker/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ Time Popup implementation should follow the specification for the TimePicker com

[TimePicker accessibility specification]({{timepicker_a11y_link}})

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
Expand Down
8 changes: 8 additions & 0 deletions components/dropdownlist/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ The listbox placed in the popup element of the DropDownList has to implement the
| -------- | --------- | ----- |
| `.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. |
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
| `.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. |
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
Expand All @@ -80,6 +81,13 @@ The listbox placed in the popup element of the DropDownList has to implement the
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
| `.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. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
Expand Down
18 changes: 18 additions & 0 deletions components/grid/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,15 @@ Implements the ColumnMenu specification.
| `.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. |
| `.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. |

#### Grid popup editor


The popup editor consists of a Window component containing a Form component.

[Window accessibility specification]({{window_a11y_link}})

[Form accessibility specification]({{form_a11y_link}})

#### Grid footer


Expand Down Expand Up @@ -167,6 +176,15 @@ The selection aggregates are placed within a `.k-grid-selection-aggregates` elem
| -------- | --------- | ----- |
| `.k-grid-selection-aggregates` | `aria-live=polite` | Ensures that changes in the calculated selection aggregates are announced by assistive technologies. |

### Data Grid Stacked Layout


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.

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.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. |

## Resources

[WAI-ARIA specification for grid](https://www.w3.org/TR/wai-aria-1.2/#grid)
Expand Down
8 changes: 8 additions & 0 deletions components/multiselect/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ The popup element of the MultiSelect must implement the WAI-ARIA specification f
| -------- | --------- | ----- |
| `.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. |
| | `aria-label` or `aria-labelledby` | When the container has a `region` role assigned, povides a label. |
| `.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. |
| `.k-list-ul` | `role=listbox` | Identifies the `ul` element as a listbox. |
| | `aria-label` or `aria-labelledby` | Provides a label for the listbox of the ComboBox. |
| `.k-list-item` | `role=option` | Identifies the `li` element as a listbox option. |
Expand All @@ -70,6 +71,13 @@ The popup element of the MultiSelect must implement the WAI-ARIA specification f
| | `aria-owns` | The group elements in the popup list must own the list items belonging to their group. |
| `.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. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI-ARIA Authoring Practices: Select-Only Combobox Example](https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html)
Expand Down
2 changes: 1 addition & 1 deletion components/splitter/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
| `.k-splitbar-horizontal` | `aria-orientation=vertical` | When a splitbar separates two panes horizontally, its aria-orientation must be explicitly set to 'vertical'. |
| | `aria-keyshortcuts=ArrowLeft ArrowRight ArrowUp ArrowDown` | Sets the aria-keyshortcuts attribute value to announce available keyboard shortcuts. Some are omitted for brevity. |

> Note: Setting the value-now attribute of the separator element is not applicable, as the Splitter is a complex layout component allowing splitting the content into multiple panes across any number and level of nested Splitters and panes, thus announcing a value would not convey any meaningful information. Moreover, there is no specification, or WAI-ARIA recommendation that explains how value should be set in multiple panes scenario. If needed, developers can still apply attributes as they see fit, using the respective API option. Further information on this complicated scenario could be found in the following WAI-ARIA GitHub issue:
> Note: Setting the `value-now` attribute of the separator element is not applicable because it would not convey any meaningful information. The Splitter is a complex layout component that lets you split the content into multiple panes across any number and level of nested Splitters and panes. Furthermore, no WAI-ARIA specifications or recommendations indicate how to set a value in a multiple panes scenario. If needed, developers can still apply attributes as they see fit, using the respective API options. Further information on this complicated scenario could be found in the following WAI-ARIA GitHub issue:

[WAI-ARIA Practices on GitHub](https://github.com/w3c/aria-practices/issues/129#issuecomment-456976215)

Expand Down
7 changes: 7 additions & 0 deletions components/timepicker/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@ This section lists the selectors, attributes, and behavior patterns supported by
| `.k-item` | `role=option` | The available options in the listbox must be marked as such. |
| | `aria-selected=true/false` | Selected option must have its `aria-selected` attribute set to `true`. |

### Adaptive Mode


When the component is in adaptive mode, the popup element follows the specifications of the ActionSheet component.

[ActionSheet accessibility specification]({{actionsheet_a11y_link}})

## Resources

[WAI-ARIA specification for combobox](https://www.w3.org/TR/wai-aria-1.2/#combobox)
Expand Down
11 changes: 11 additions & 0 deletions components/toolbar/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-toolbar` | `role=toolbar` | The component role. |
| | `aria-label` or `aria-labelledby` | Must be supplied on each toolbar only when the application contains more than one toolbars. |
| `.k-toolbar .k-toolbar-overflow-button:has(.k-svg-i-more-vertical)` | `aria-haspopup=menu` | The value of the `aria-haspopup` attribute of the button that opens the overflow popup. |
| | `aria-expanded=true/false` | The value of the `aria-expanded` attribute of the button that opens the overflow popup. |
| | `aria-controls=.k-toolbar-popup .k-menu-group id` | Indicates the connection between the toggle button and the content it controls. |
| | `aria-label` or `title` | The button that opens the overflow popup must have a descriptive text set, as it contains only an icon (no text). |
| `.k-toolbar-popup .k-menu-group` | `role=menu` | The role of the tools wrapper in the overflow section. |
| | `aria-labelledby=.k-toolbar .k-toolbar-overflow-button:has(.k-svg-i-more-vertical) id` | Associates the title of the menu toggle button. |
| `.k-toolbar .k-toolbar-overflow-button:has(.k-svg-i-more-horizontal)` | `aria-expanded=true/false` | The value of the `aria-expanded` attribute of the button that opens the overflow section. |
| | `aria-label` or `title` | The button that opens the overflow section must have a descriptive text set, as it contains only an icon (no text). |
| | `aria-controls=.k-toolbar-popup .k-toolbar-items-list id` | Indicates the connection between the toggle button and the content it controls. |
| `.k-toolbar-popup .k-toolbar-items-list` | `role=toolbar` | The role of the tools wrapper in the overflow section. |
| | `aria-labelledby=.k-toolbar .k-toolbar-overflow-button:has(.k-svg-i-more-horizontal) id` | Associates the title of the section toggle button. |

## Resources

Expand Down
1 change: 0 additions & 1 deletion components/treeview/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ If the tree supports the load-more functionality, the **Load More** button is re
| | `aria-checked=true/false` | Rendered only when checkboxes are enabled. Announces the checked state of the node. If the checkbox is indeterminate, the value is `mixed`. |
| `.k-treeview-item:has(> span > .k-selected, > div > .k-selected) ` | `aria-selected=true` | Rendered only when selection is enabled. Announces the selected state of the node. |
| `.k-checkbox` | `role=none/presentation` | Added to the wrapper element of the checkbox to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`. |
| | `aria-hidden=true` | Added to the checkbox element to prevent duplicated information announced to the user. The checked state is controlled by `aria-checked`. |

## Resources

Expand Down
Loading