Skip to content
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

chore: bump @progress/wct-a11y-spec from 2.13.0 to 2.14.0 in /src-a11y #2301

Merged
Merged
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
2 changes: 2 additions & 0 deletions components/checkbox/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-checkbox` | `role=checkbox` or `type=checkbox` | Announces the `checkbox` role of the element. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name to which it will be assigned. |
| | `aria-required=true` | The attribute is rendered only when the CheckBox is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the checkbox, or if the value of the checkbox is invalid, to the error message. This attribute should only be present when a hint is set or when the checkbox value is invalid. |
| | `aria-checked=true` or `checked=checked` | Announces the checked state of the CheckBox. |
| | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the CheckBox is disabled. |
| `.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. |
Expand Down
3 changes: 3 additions & 0 deletions components/dateinput/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=input` | The element should either be an `<input type="text">` element or should have `role="textbox"` assigned. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the DateInput is in a `form` HTML element and announces the required state of the component. |
| | `aria-invalid=true` | Attribute is rendered only when the DateInput is in form and announces the valid state of the component. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DateInput is readonly. |
| | `tabindex=0` | The element should be focusable. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DateInput is disabled. |
Expand Down
4 changes: 3 additions & 1 deletion components/datepicker/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the DatePicker is in a `form` HTML element and announces the required state of the component. |
| | `aria-haspopup=grid` | Indicates the component has a Calendar Popup that implements `role="grid"`. |
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
| | `aria-controls=.k-animation-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
| | `aria-activedescendant=.k-calendar-td.k-focus id` | Points to the focused item (date/month/year) in the Calendar Popup. Should only be present when the Popup is open. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DatePicker is readonly. |
| | `aria-invalid=true` | Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
| | `aria-invalid=true` | Attribute is rendered only when the DatePicker is in form and announces the valid state of the component. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

| | `tabindex=0` | The element must be focusable. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DatePicker is disabled. |
| `.k-input-button` | `role=button` or `nodeName=button` | The element should either be a `<button>` element or should have `role="button"` assigned. |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the DateRangePicker is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-haspopup=grid` | Indicates the component has a Calendar Popup that implements `role="grid"`. |
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
| | `aria-controls=.k-calendar-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=combobox` | The input element should follow the `combobox` specification. |
| | `label for` or `aria-label` or `aria-labelledby` | The input needs an accessible name to be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the DateTimePicker is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-haspopup=dialog` | Indicates the component has a Dialog Popup. |
| | `aria-expanded=true/false` | Announces whether the Popup is visible or not. |
| | `aria-controls=.k-calendar-container id` | Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`. |
| | `aria-activedescendant=.k-calendar-td.k-focus id` | Points to the focused item (date/month/year/hour/minute) in the Calendar Popup or the Time Popup. Should only be present when the Popup is open. |
| | `readonly=readonly` or `aria-readonly=true` | Attribute is rendered only when the DateTimePicker is readonly. |
| | `aria-invalid=true` | Attribute is rendered only when the combobox is in form and announces the valid state of the component. |
| | `aria-invalid=true` | Attribute is rendered only when the DateTimePicker is in form and announces the valid state of the component. |
| | `tabindex=0` | The element should be focusable. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | Attribute is rendered only when the DateTimePicker is disabled. |
| `.k-input-button` | `role=button` or `nodeName=button` | The element should either be a `<button>` element or should have `role="button"` assigned. |
Expand Down
2 changes: 2 additions & 0 deletions components/maskedtextbox/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ The following table summarizes the selectors and attributes supported by the `in
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=input` | Specifies the role of the component. Not required if the `<input type=text`> configuration is used. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the MaskedTextBox is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-placeholder` | Announces the mask or placeolder for the component. |
| `.k-invalid .k-input-inner,.ng-invalid .k-input-inner` | `aria-invalid=true` | The attribute is rendered only when the MaskedTextBox is in a form and announces the valid state of the component. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the MaskedTextBox is disabled. |
Expand Down
2 changes: 2 additions & 0 deletions components/numerictextbox/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=spinbutton` | Announces the spin button capabilities of the NumericTextBox. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the NumericTextBox is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-valuemnow` | Announces the value for the component. |
| | `aria-valuemin` | Announces the minimum value allowed for the component. |
| | `aria-valuemax` | Announces the maximum value allowed for the component. |
Expand Down
1 change: 0 additions & 1 deletion components/pager/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ The `Page` select, which is present for mobile devices and smaller screens with
| `.k-pager-nav` | `role=button` or `nodeName=button` | Specifies the role of the element. |
| | `aria-disabled=true` | The attribute is present when the the `Arrow` button is disabled, for example, present on the **Previous** button when the current page is the first one. |
| | `title` | Specifies the purpose of each button. |
| `.k-pager-numbers>.k-link` | `role=button` or `nodeName=button` | Specifies the role of the element. |
| | `aria-label` or `title` | Specifies the purpose of each link, for example, `Page 6`. |
| | `aria-current=page` | The attribute must be present on the currently selected page element. |
| `.k-pager-sizes>.k-dropdownlist` | `aria-label` | The element requires an `aria-label` to specify its purpose. |
Expand Down
12 changes: 6 additions & 6 deletions components/pdfviewer/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ position: 50



Out of the box, the Telerik UI for Blazor PDFViewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
Out of the box, the Telerik UI for Blazor PDF Viewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.


The PDFViewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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.
The PDF Viewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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.

## WAI-ARIA


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


The PDFViewer component contains two inner elements - a toolbar and a page container.
The PDF Viewer component contains two inner elements - a toolbar and a page container.

[ToolBar accessibility specification]({{toolbar_a11y_link}})

Expand All @@ -40,19 +40,19 @@ The PDFViewer component contains two inner elements - a toolbar and a page conta
## Section 508


The PDFViewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
The PDF Viewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).

## Testing


The PDFViewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
The PDF Viewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.

> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).

### Screen Readers


The PDFViewer has been tested with the following screen readers and browsers combinations:
The PDF Viewer has been tested with the following screen readers and browsers combinations:

| Environment | Tool |
| ----------- | ---- |
Expand Down
8 changes: 4 additions & 4 deletions components/slider/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ This section lists the selectors, attributes, and behavior patterns supported by

### Slider Buttons


When present, the Slider Buttons must implement the specification for the **Button** component.

[Button accessibility specification]({{button_a11y_link}})
| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-slider .k-button-decrease, .k-slider .k-button-increase` | `aria-hidden=true` | Hides the decrease/increase button elements and all their children from assistive technologies. |
| | `tabindex=-1` | Excludes the decorative decrease/increase buttons from the natural tab order of the page. |

## Resources

Expand Down
1 change: 1 addition & 0 deletions components/splitter/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ This section lists the selectors, attributes, and behavior patterns supported by
| `.k-splitbar` | `role=separator` | Sets the proper role for the Splitter split-bar element. |
| | `aria-label` | An accessible name, with aria-label should be included if there is more than one focusable separator. The value is set through the corresponding SplitterPane API. |
| `.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. Further information on this complicated scenario could be found in the following WAI-ARIA GitHub issue:

Expand Down
4 changes: 2 additions & 2 deletions components/stepper/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ The Stepper component is a landmark `<nav>` element or an element with `role="na
| `.k-stepper` | `role=navigation` or `nodeName=nav` | The landmark role `navigation` must be assigned to the component. |
| `.k-step-disabled>.k-step-link` | `aria-disabled=true` | A disabled (inactive) link. |
| `.k-step-current>.k-step-link` | `aria-current=step` | The currently selected link. |
| `.k-step.k-focus .k-step-link` | `tabindex=0` | Add element to the page Tab sequence. Set based on the Roving tabindex navigation when the tab is focused. |
| `.k-step:not(.k-focus) .k-step-link` | `tabindex=-1` | Removes the element from the page Tab sequence. Set based on the Roving tabindex navigation when a tab is not focused. |
| `.k-step.k-focus .k-step-link` | `tabindex=0` | Adds an element to the page's tab order. Set based on the roving tabindex navigation when the tab is focused. |
| `.k-step:not(.k-focus) .k-step-link` | `tabindex=-1` | Removes the element from the page's tab order. Set based on the roving tabindex navigation when a tab is not focused. |


No aria attributes should be applied to the Stepper as the ProgressBar serves a purely aesthetic purpose.
Expand Down
2 changes: 2 additions & 0 deletions components/switch/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-switch` | `role=switch` | Announces the switch role of the element. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the Switch is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-checked` | Announces the checked state of the Switch. |
| | `tabindex=0` | The element must be focusable. |
| | `aria-invalid=true` | The attribute is rendered only when the Switch is in a form and announces the valid state of the component. |
Expand Down
2 changes: 2 additions & 0 deletions components/textarea/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ This section lists the selectors, attributes, and behavior patterns supported by
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=textarea` | Describes the role of the component. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the TextArea is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-multiline=true` | Announces the multi-line behavior of the TextArea. |
| | `aria-invalid=true` | The attribute is rendered only when the TextArea is in a form and announces the valid state of the component. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the TextArea is disabled. |
Expand Down
2 changes: 2 additions & 0 deletions components/textbox/accessibility/wai-aria-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ No role attribute is implemented as the `html input type="text"` element is suff
| -------- | --------- | ----- |
| `.k-input-inner` | `role=textbox` or `nodeName=input` | Describes the role of the component. |
| | `label for` or `aria-label` or `aria-labelledby` | The input requires an accessible name that will be assigned to it. |
| | `aria-required=true` | The attribute is rendered only when the TextBox is in a `form` HTML element and announces the required state of the component. |
| | `aria-describedby=.k-form-hint id/.k-form-error id` | Points to the hint for the input, or if the input is invalid, to the error message. This attribute should only be present when a hint is set or when the input is invalid. |
| | `aria-invalid=true` | The attribute is rendered only when the TextBox is in a form and announces the valid state of the component. |
| `.k-disabled .k-input-inner` | `disabled=disabled` or `aria-disabled=true` | The attribute is rendered only when the TextBox is disabled. |

Expand Down
Loading
Loading