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

dependabot[bot] · kendo-bot · web-flow · commit b9cf2337434e · 2024-08-02T20:29:30.000+03:00
* chore: bump @progress/wct-a11y-spec from 2.13.0 to 2.14.0 in /src-a11y Bumps [@progress/wct-a11y-spec](https://github.com/telerik/web-components-ux) from 2.13.0 to 2.14.0. - [Commits](https://github.com/telerik/web-components-ux/commits) --- updated-dependencies: - dependency-name: "@progress/wct-a11y-spec" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * docs: update accessibility and keyboard-nav specs --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kendo-bot <kendouiteam@progress.com>
diff --git a/components/checkbox/accessibility/wai-aria-support.md b/components/checkbox/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/dateinput/accessibility/wai-aria-support.md b/components/dateinput/accessibility/wai-aria-support.md
@@ -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. |
+|  | `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. |
diff --git a/components/datepicker/accessibility/wai-aria-support.md b/components/datepicker/accessibility/wai-aria-support.md
@@ -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. |
 |  | `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. |
diff --git a/components/daterangepicker/accessibility/wai-aria-support.md b/components/daterangepicker/accessibility/wai-aria-support.md
@@ -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`. |
diff --git a/components/datetimepicker/accessibility/wai-aria-support.md b/components/datetimepicker/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/maskedtextbox/accessibility/wai-aria-support.md b/components/maskedtextbox/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/numerictextbox/accessibility/wai-aria-support.md b/components/numerictextbox/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/pager/accessibility/wai-aria-support.md b/components/pager/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/pdfviewer/accessibility/wai-aria-support.md b/components/pdfviewer/accessibility/wai-aria-support.md
@@ -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}})
 
@@ -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 |
 | ----------- | ---- |
diff --git a/components/slider/accessibility/wai-aria-support.md b/components/slider/accessibility/wai-aria-support.md
@@ -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
 
diff --git a/components/splitter/accessibility/wai-aria-support.md b/components/splitter/accessibility/wai-aria-support.md
@@ -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:
 
diff --git a/components/stepper/accessibility/wai-aria-support.md b/components/stepper/accessibility/wai-aria-support.md
@@ -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.
diff --git a/components/switch/accessibility/wai-aria-support.md b/components/switch/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/textarea/accessibility/wai-aria-support.md b/components/textarea/accessibility/wai-aria-support.md
@@ -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. |
diff --git a/components/textbox/accessibility/wai-aria-support.md b/components/textbox/accessibility/wai-aria-support.md
@@ -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. |
 
diff --git a/components/timepicker/accessibility/wai-aria-support.md b/components/timepicker/accessibility/wai-aria-support.md
diff --git a/src-a11y/package-lock.json b/src-a11y/package-lock.json
diff --git a/src-a11y/package.json b/src-a11y/package.json
