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

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

Out of the box, the Kendo React FilterMenu provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.


The FilterMenu 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 FilterMenu Button/Header

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-grid-filter-menu` | `aria-haspopup=dialog` | Specifies that the button opens a dialog. |
|  | `aria-expanded=true/false` | Announces the current state of the popup. |
|  | `aria-controls=.k-popup.k-grid-filter-popup id` | Points to the popup that the button toggles. |
| `.k-header.k-filterable` | `aria-haspopup=dialog` | Specifies that the header cell opens a dialog. |
|  | `aria-expanded=true/false` | Announces the current state of the popup. |
|  | `aria-controls=.k-popup.k-grid-filter-popup id` | Points to the popup that the button toggles. |
|  | `aria-keyshortcuts=Alt + ArrowDown` | Announces the available filter-menu shortcut. |

### The FilterMenu Popup

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-popup.k-grid-filter-popup` | `id` | Unique and deterministic id linked to the button or header cell aria-controls attribute. |
|  | `role=dialog` | Sets the dialog role of the popup. |
|  | `aria-label` | Contains descriptive information about the filter menu purpose - e.g. 'Column Title Filter Menu' |

### The FilterMenu Popup Content


All internal elements and components follow their respective specification rules, and additionally have suitable aria-label attributes, describing what menu they are part of.

## Resources

[MDN reference for the dialog role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)

## Section 508


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

## Testing


The FilterMenu 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 FilterMenu has been tested with the following screen readers and browsers combinations:

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