@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
190 lines • 7.06 kB
JSON
[
{
"h2": "Accessibility Support"
},
{
"p": "Out of the box, the Telerik and Kendo UI FilterMenu provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
},
{
"p": "The FilterMenu is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://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](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)."
},
{
"h3": "WAI-ARIA"
},
{
"p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any."
},
{
"h4": "The FilterMenu Button/Header"
},
{
"table": {
"headers": [
"Selector",
"Attribute",
"Usage"
],
"rows": [
{
"Selector": "`.k-grid-filter-menu`",
"Attribute": "`aria-haspopup=dialog`",
"Usage": "Specifies that the button opens a dialog."
},
{
"Selector": "",
"Attribute": "`aria-expanded=true/false`",
"Usage": "Announces the current state of the popup."
},
{
"Selector": "",
"Attribute": "`aria-controls=.k-popup.k-grid-filter-popup id`",
"Usage": "Points to the popup that the button toggles."
},
{
"Selector": "`.k-header.k-filterable`",
"Attribute": "`aria-haspopup=dialog`",
"Usage": "Specifies that the header cell opens a dialog."
},
{
"Selector": "",
"Attribute": "`aria-expanded=true/false`",
"Usage": "Announces the current state of the popup."
},
{
"Selector": "",
"Attribute": "`aria-controls=.k-popup.k-grid-filter-popup id`",
"Usage": "Points to the popup that the button toggles."
},
{
"Selector": "",
"Attribute": "`aria-keyshortcuts=Alt + ArrowDown`",
"Usage": "Announces the available filter-menu shortcut."
}
]
}
},
{
"h4": "The FilterMenu Popup"
},
{
"table": {
"headers": [
"Selector",
"Attribute",
"Usage"
],
"rows": [
{
"Selector": "`.k-popup.k-grid-filter-popup`",
"Attribute": "`id`",
"Usage": "Unique and deterministic id linked to the button or header cell aria-controls attribute."
},
{
"Selector": "",
"Attribute": "`role=dialog`",
"Usage": "Sets the dialog role of the popup."
},
{
"Selector": "",
"Attribute": "`aria-label`",
"Usage": "Contains descriptive information about the filter menu purpose - e.g. 'Column Title Filter Menu'"
}
]
}
},
{
"h4": "The FilterMenu Popup Content"
},
{
"p": "All internal elements and components follow their respective specification rules, and additionally have suitable aria-label attributes, describing what menu they are part of."
},
{
"h3": "Keyboard Shortcuts"
},
{
"table": {
"headers": [
"Shortcut",
"Behavior"
],
"rows": [
{
"Shortcut": "`Alt` + `Down Arrow`",
"Behavior": "Opens the FilterMenu Popup when focus is on the Grid header cell or on the main filter menu button (depending on whether the Grid is navigable or not). Focus is trapped and wrapped within the Popup."
},
{
"Shortcut": "`Tab`",
"Behavior": "Navigates to the next focusable element in the Popup. If current focus is on the last element, moves focus to the first focusable item in the Popup."
},
{
"Shortcut": "`Shift` + `Tab`",
"Behavior": "Navigates to the previous focusable element in the Popup. If current focus is on the first element, moves focus to the last focusable item in the Popup."
},
{
"Shortcut": "`Enter`",
"Behavior": "For button items, executes the currently focused button action."
},
{
"Shortcut": "`Escape`",
"Behavior": "Closes the FilterMenu Popup and returns focus to the header cell or the main button."
}
]
}
},
{
"blockquote": "All internal components follow their own keyboard navigation when focused."
},
{
"h3": "Testing"
},
{
"p": "The FilterMenu has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers."
},
{
"h3": "Screen Readers"
},
{
"p": "The FilterMenu has been tested with the following screen readers and browsers combinations:"
},
{
"table": {
"headers": [
"Environment",
"Tool"
],
"rows": [
[
"Firefox",
"NVDA"
],
[
"Chrome",
"JAWS"
],
[
"Microsoft Edge",
"JAWS"
]
]
}
},
{
"h3": "Resources"
},
{
"ul": [
{
"link": {
"source": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role",
"title": "MDN reference for the dialog role"
}
},
{
"link": {
"source": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/",
"title": "ARIA Authoring Practices: Listbox Pattern"
}
}
]
}
]