@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI PropertyGrid provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The PropertyGrid 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." }, { "p": "The PropertyGrid is a composite component that consists of two logically separated structural elements:" }, { "ul": [ "Toolbar (`role=toolbar`);", "Tree Grid (`role=treegrid`);" ] }, { "h4": "PropertyGrid Toolbar" }, { "p": "The Toolbar of the PropertyGrid follows the specification of the ToolBar component." }, { "link": { "title": "ToolBar accessibility specification", "source": "{{toolbar_a11y_link}}" } }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-toolbar`", "Attribute": "`role=toolbar`", "Usage": "The toolbar is a collection of command buttons and inputs." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Clarifies the purpose of the toolbar." }, { "Selector": "", "Attribute": "`aria-controls=.k-grid-aria-root id`", "Usage": "Points to the id of the element with `role=treegrid`." } ] } }, { "h4": "Tree Grid" }, { "p": "The element with `role=treegrid` must not include the ToolBar element as it does not belong to the `role=treegrid` element itself. It implements the ARIA specification for the TreeList component with some exceptions listed below." }, { "link": { "title": "TreeList accessibility specification", "source": "{{treelist_a11y_link}}" } }, { "p": "The below table lists the ARIA requirements for the PropertyGrid which are not present in the TreeList specification:" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-property-grid .k-grid-aria-root`", "Attribute": "`role=treegrid`", "Usage": "Sets the proper role for the PropertyGrid component." } ] } }, { "h3": "Managing the Focus" }, { "p": "The PropertyGrid component is a container that consists of two logically separated structural elements:" }, { "ul": [ "Toolbar (`role=\"toolbar\"`);", "Tree Grid (`role=\"treegrid\"`);" ] }, { "p": "Each of them is part of the page's tab sequence and you can navigate to them using the keyboard's `Tab` key." }, { "p": "The `Toolbar` implements the keyboard navigation specification for a ToolBar component." }, { "p": "The below description focuses only on the Tree Grid part (the element with `role=\"treegrid\"`) of the composite component." }, { "h3": "Tree Grid Focus" }, { "p": "The Tree Grid is a single tab stop component. Upon focusing the Tree Grid, the initial focus is set to either the previously focused cell (if any), or the first data (`<td>`) cell in the Tree Grid. The change of the focused cell should be implemented using one of the following two techniques:" }, { "ul": [ "Roving `tabindex`—Use the roving tabindex pattern to manage focus. This means that as users navigate through the cells, the tabindex is dynamically updated to reflect the currently focused cell.", "Active descendant—Keep the focus on the Data Grid element itself, and use the `aria-activedescendant` attribute to point to the id of the currently focused cell." ] }, { "p": "If a cell contains only one focusable element that does not require arrow keys itself for its inner navigation, focus goes to that element instead of its parent `<td>`." }, { "h3": "Keyboard Shortcuts" }, { "h4": "All Tree Grid cells" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Right Arrow`", "Behavior": "Moves focus one cell to the right (if any)." }, { "Shortcut": "`Left Arrow`", "Behavior": "Moves focus one cell to the left (if any)." }, { "Shortcut": "`Down Arrow`", "Behavior": "Moves focus one cell down (if any)." }, { "Shortcut": "`Up Arrow`", "Behavior": "Moves focus one cell up (if any)." }, { "Shortcut": "`Enter`", "Behavior": "When the grid is in InCell EditMode, then EditMode is activated. If the cell contains focusable elements, focus moves to the first focusable element inside." }, { "Shortcut": "`Home`", "Behavior": "Moves focus to the first cell in the row that contains focus." }, { "Shortcut": "`End`", "Behavior": "Moves focus to the last cell in the row that contains focus." }, { "Shortcut": "`Ctrl/Cmd(Mac) + Home`", "Behavior": "Moves focus to the first (top-left) data cell in the PropertyGrid." }, { "Shortcut": "`Ctrl/Cmd(Mac) + End`", "Behavior": "Moves focus to the last cell in the last row of the PropertyGrid." }, { "Shortcut": "`Alt/Option(Mac)` + `Left Arrow`", "Behavior": "Collapses the currently focused item." }, { "Shortcut": "`Alt/Option(Mac)` + `Right Arrow`", "Behavior": "Expands the currently focused item." } ] } }, { "h4": "InCell Edit Cell" }, { "p": "When the editing mode is InCell, the navigation is similar to Excel. When an editor is opened and focus is inside it, the following key combinations are in use." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Tab`", "Behavior": "Moves to the next editor in the row (closing current editor). If focus is already on the last editable cell on the row, focus is moved to the first editable cell on the next row, and it's editor is opened." }, { "Shortcut": "`Shift + Tab`", "Behavior": "Moves to the previous editor in the row (closing current editor). If focus is already on the first editable cell on the row, focus is moved to the last editable cell on the previous row, and it's editor is opened." }, { "Shortcut": "`Enter`", "Behavior": "Commits changes for the edited item, and moves focus back to the edited cell." }, { "Shortcut": "`Escape`", "Behavior": "Cancels the edit. The focus goes to the current cell." } ] } }, { "h3": "Testing" }, { "p": "The PropertyGrid 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 PropertyGrid 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://www.w3.org/TR/wai-aria-1.2/#treegrid", "title": "WAI-ARIA specification for tree grid" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/", "title": "ARIA Authoring Practices: Treegrid Pattern" } } ] } ]