@progress/wct-a11y-spec/dist/react/aria/pivotgrid_aria.md

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

The Kendo React PivotGrid component is [WCAG 2.1 AA](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


The PivotGrid is a composite component that consists of two logically separated structural elements:


 - Data Grid (`role="grid"`);
 - Configurator (`role="application"`); // TBD

### Data Grid


The element with `role="grid"` - includes the row headers, column headers, and data tables.

#### Grid element

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-pivotgrid | `role=grid` | The role specifies the element is a Data Grid. |

#### Column Headers

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-pivotgrid-column-headers>.k-pivotgrid-table | `role=presentation/none` | Negates the default semantic role of the `<table>` element. |
| .k-pivotgrid-column-headers>.k-pivotgrid-table>thead | `role=rowgroup` | Required as the owner `<table>` element has its semantic role removed. |
| .k-pivotgrid-column-headers>.k-pivotgrid-table>thead>.k-pivotgrid-row | `role=row` | Required as the owner `<table>` element has its semantic role removed. |
| .k-pivotgrid-column-headers>.k-pivotgrid-table>thead>.k-pivotgrid-row>th | `role=columnheader` | Required as the owner `<table>` element has its semantic role removed. |
|  | `aria-expanded=true/false` | Indicates the current expanded state of the header. |
|  | `id` | Unique and deterministic identifier, used to associate the header cell with respective data cells. |
| .k-i-arrow-chevron-up | `aria-hidden=true` | Excludes the collapse icon from the screen reader output. |
| .k-i-arrow-chevron-down | `aria-hidden=true` | Excludes the expand icon from the screen reader output. |

#### Row Headers

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-pivotgrid-row-headers>.k-pivotgrid-table | `role=none/presentation` | Negates the default semantic role of the `<table>` element. |
| .k-pivotgrid-row-headers>.k-pivotgrid-table>thead | `role=rowgroup` | Required as the owner `<table>` element has its semantic role removed. |
| .k-pivotgrid-row-headers>.k-pivotgrid-table>thead>.k-pivotgrid-row | `role=row` | Required as the owner `<table>` element has its semantic role removed. |
|  | `aria-owns=[IDs of corresponding data cells]` | Used to associate row header cells with the corresponding data cells. |
| .k-pivotgrid-row-headers>.k-pivotgrid-table>thead>.k-pivotgrid-row>th | `role=rowheader` | Required as the owner `<table>` element has its semantic role removed. |
|  | `aria-expanded=true/false` | Indicates the current expanded state of the header. |
| .k-i-arrow-chevron-up | `aria-hidden=true` | Excludes the collapse icon from the screen reader output. |
| .k-i-arrow-chevron-down | `aria-hidden=true` | Excludes the expand icon from the screen reader output. |

#### Grid Data Table

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| .k-pivotgrid-values>.k-pivotgrid-table | `role=none/presentation` | Negates the default semantic role of the `<table>` element. |
| .k-pivotgrid-values>.k-pivotgrid-table>tbody | `role=none/presentation` | The contained rows are associated with their headers through alternative mechanics. |
| .k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row | `role=none/presentation` | The rows are associated with their headers through alternative mechanics. |
| .k-pivotgrid-values>.k-pivotgrid-table>tbody>.k-pivotgrid-row>td | `role=gridcell` | Required as the owner `<table>` element has its semantic role removed. |
|  | `id` | Unique and deterministic identifier, used to associate the data cell with respective row header cells. |
|  | `aria-describedby=[IDs of corresponding column header cells]` | Used to associate the data cells with the respective column header cells. |

### Configurator - TBD

## Resources

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

## Section 508


The PivotGrid 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 |