@progress/wct-a11y-spec/dist/angular/aria/infinitecalendar_aria.md

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

The Kendo UI for Angular InfiniteCalendar component is [WCAG 2.1 AAA](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component role, and is tested against the popular screen readers.

## Wai-Aria

### Calendar Table element


The wrapper of the infinite calender should follow the requirements for the `grid` role (https://www.w3.org/TR/wai-aria-1.2/#grid).

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-calendar | `role=grid` | Specifies the role of the Calendar wrapper. |
|  | `aria-label` or `aria-labelledby` | Pointing to the current view `k-calendar-title` element (e.g. `March 2022` or `2020-2029`). |
|  | `aria-activedescendant=.k-calendar-td id` | Pointing to the currently active (focused) date/month/year/decade cell in the tables. |
|  | `tabindex=0` | Makes the grid focusable. |
| .k-calendar-table | `role=none` | All `k-calendar-table` elements must have their role set to `none`. That is because their content must be made belonging to a single `grid` component. |
| .k-calendar-thead | `role=rowgroup` | The `k-calendar-thead` must explicitly have its role set to `rowgroup` as its semantics have been removed while setting its `<table>` role to `none`. |
| .k-calendar-tbody | `role=rowgroup` | The `k-calendar-tbody` elements must explicitly have their roles set to `rowgroup` as their semantics have been removed while setting their `<table>` elements role to `none`. |
| .k-calendar-tr | `role=row` | The `k-calendar-tr` elements must explicitly have their roles set to `row` as their semantics have been removed while setting their `<table>` elements role to `none`. |
| .k-calendar-th | `role=columnheader` | The `k-calendar-th` elements must explicitly have their roles set to `columnheader` as their semantics have been removed while setting their `<table>` elements role to `none`. |
|  | `scope=col` | Specifies that the header is applied to a column. |
|  | `aria-label` | Specifies the full name of the day of the week (the column header). |
| .k-calendar-caption | `role=columnheader` | The `k-calendar-caption` elements must explicitly have their roles set to `columnheader` as their semantics have been removed while setting their `<table>` elements role to `none`. |
|  | `scope=col` | Specifies that the header is applied to a column. |
| .k-calendar-td | `role=gridcell` | The cells must explicitly have their roles set to `gridcell` as their semantics have been removed while setting their `<table>` elements role to `none`. |
|  | `aria-selected` | Specifies whether the date is selected or not. |
|  | `aria-disabled` | When a date is not available for selection, its gridcell element must have the attribute set to `true`. |
|  | `aria-label ` or `title` | Applicable in year view - for better context contains the full name of the month. May also be applied in month view to specify the full text for a date. |

### Button and Link elements

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-prev-view,.k-next-view | `tabindex=-1` | The buttons must not be focusable. |
| .k-calendar-title | `tabindex=-1` | The button must not be focusable. |
| .k-nav-today | `tabindex=-1` | The link must not be focusable. |

## Resources

[ARIA practices Date Picker Dialog Example](https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html)

## Section 508


The InfiniteCalendar is compliant with the [Section 508](http://www.section508.gov/) requirements

## Testing


The component has been extensively tested automatically with static code analyzers and manually with the most popular screen readers.

> Any Accessibility Issues could be reported in [Telerik Support System](https://www.telerik.com/account/support-center).

### Screen Readers

| Environment | Tool |
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |