@progress/wct-a11y-spec

[ { "h2": "Accessibility Support" }, { "p": "Out of the box, the Telerik and Kendo UI Grid provides extensive accessibility support and enables users with disabilities to acquire complete control over its features." }, { "p": "The Grid 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 Grid is a composite component that consists of 4 logically separated structural elements:" }, { "ul": [ "Toolbar (`role=toolbar`);", "Group header (`role=toolbar`);", "Data Grid (`role=grid`);", "Pager (`role=application`);" ] }, { "h4": "Grid Toolbar" }, { "p": "Grid Toolbar 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": "Pointing to the id of the element with `role=grid`." } ] } }, { "h4": "Grid Grouping Header" }, { "p": "Grid Grouping Header follows the specification of the ToolBar component." }, { "link": { "title": "ToolBar accessibility specification", "source": "{{toolbar_a11y_link}}" } }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grouping-header`", "Attribute": "`role=toolbar`", "Usage": "The Grouping header is a ToolBar (collection of buttons)." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Clarifies the purpose of the header." }, { "Selector": "", "Attribute": "`aria-controls=.k-grid-aria-root id`", "Usage": "Pointing to the id of the element with `role=grid`." }, { "Selector": "`.k-grouping-header .k-chip-list .k-chip`", "Attribute": "`role=button`", "Usage": "If the element used is not `<button>`, then the role must be specified." }, { "Selector": "`.k-grouping-header .k-chip-list`", "Attribute": "`role=none/`", "Usage": "The ChipList default listbox role is removed to keep the toolbar --> button roles hierarchy." }, { "Selector": "", "Attribute": "`title`", "Usage": "Present on the element or its child if sorting is enabled for that field." } ] } }, { "h4": "Data Grid (excluding Toolbars and Pager)" }, { "p": "The element with `role=grid` must not include the ToolBar and the Pager elements as those do not belong to the `role=grid` element itself." }, { "h5": "Grid element" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid:not(.k-treelist) .k-grid-aria-root`", "Attribute": "`role=grid`", "Usage": "The role specifies the element is a Data Grid." }, { "Selector": "`.k-grid-aria-root`", "Attribute": "`aria-colcount`", "Usage": "The total number of columns in the Grid. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. If the total number of columns is unknown, the value of `aria-colcount` must be set to -1." }, { "Selector": "", "Attribute": "`aria-rowcount`", "Usage": "The total number of rows in the table (header rows + master rows + detail rows + data rows + footer rows + aggregates rows). Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper number of all rows could not be calculated. In that case the value must be set to -1." } ] } }, { "p": "In scenarios when master and detail rows are present in the Grid (Hierarchical Grid, Detail Template Grid), the `aria-rowcount` (the total number of rows) must be calculated: 2 * (total number of items) + header rows + footer rows. That is because for each item in the Grid there is a master row and a detail row duplicating this way the number of rows." }, { "p": "If the Grid is composed of a single table (there is no separate `<table>` element for its header), no `role` attributes should be set on its inner elements(`<thead>`, `<body>`, `<tr>`, `<th>`, and `<td>`). Their semantic meaning will be used instead." }, { "h5": "Grid header" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-header-wrap>table`", "Attribute": "`role=presentation/none`", "Usage": "Negates the default semantic role of the `<table>` element." }, { "Selector": "`.k-grid-header-wrap>table>thead`", "Attribute": "`role=rowgroup`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "`.k-grid-header-wrap>table>thead>tr`", "Attribute": "`role=row`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-rowindex`", "Usage": "Row number including all headers, data (including master and detail) rows, and footers starting from 1. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set." }, { "Selector": "`.k-grid-header-wrap>table>thead>tr>th:not(.k-hierarchy-cell):not(.k-group-cell):not(.k-drag-cell)`", "Attribute": "`role=columnheader`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-sort=none/ascending/descending`", "Usage": "Present if sorting is enabled for that column." }, { "Selector": "", "Attribute": "`title` or `aria-label`", "Usage": "Present on the element or its child if sorting is enabled for that field." }, { "Selector": "", "Attribute": "`aria-colindex`", "Usage": "Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans." }, { "Selector": "", "Attribute": "`aria-haspopup=dialog`", "Usage": "The attribute must be present if the column has a ColumnMenu." }, { "Selector": "", "Attribute": "`aria-haspopup=dialog`", "Usage": "The attribute must be present if the column has a FilterMenu and no ColumnMenu." } ] } }, { "h5": "Grid filter row" }, { "p": "Even if part of the `<thead>`, the Filter row must be composed of `<td>` elements." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-header-wrap>table>thead>tr.k-filter-row>td`", "Attribute": "`role=gridcell`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-label`", "Usage": "Has a label indicating that the cell is part of a filter row." } ] } }, { "h5": "Grid filter menu" }, { "p": "Implements the FilterMenu specification." }, { "link": { "title": "FilterMenu accessibility specification", "source": "{{filtermenu_a11y_link}}" } }, { "h5": "Grid column menu" }, { "p": "Implements the ColumnMenu specification." }, { "link": { "title": "ColumnMenu accessibility specification", "source": "{{columnmenu_a11y_link}}" } }, { "h5": "Grid content" }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-content>table`", "Attribute": "`role=none/presentation`", "Usage": "Negates the default semantic role of the `<table>` element." }, { "Selector": "`.k-grid-content>table>tbody`", "Attribute": "`role=rowgroup`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "`.k-grid-content>table>tbody>tr`", "Attribute": "`role=row`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-rowindex`", "Usage": "Row number including all headers, data (including master and detail) rows, and footers starting from 1. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set. In scenarios when master and detail rows are present in the Grid (Hierarchical Grid, Detail Template Grid), both master and detail rows must always be indexed. For example, if the first master row has `aria-rowindex=2`, even if its detail row is not present in the DOM, the next master row must have `aria-rowindex=4`. When rendered, the detail row must receive the missing index between the two master rows. In this example it would be `aria-rowindex=3`." }, { "Selector": "`.k-grid-content tr.k-selected`", "Attribute": "`aria-selected=true`", "Usage": "Set on the currently selected row(s). Only used wen selection mode is set to `row`." }, { "Selector": "`.k-grid-content>table>tbody>tr>td`", "Attribute": "`role=gridcell`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-colindex`", "Usage": "Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans." }, { "Selector": "`td.k-selected`", "Attribute": "`aria-selected=true`", "Usage": "Set on the currently selected cell(s). Only used when selection mode is set to cell." }, { "Selector": "`.k-master-row .k-hierarchy-cell,.k-grouping-row>td`", "Attribute": "`aria-expanded=true/false`", "Usage": "Optionally for cells holding grouping criteria values and for Master row cells in Detail template scenario." }, { "Selector": "`.k-drag-cell`", "Attribute": "`aria-label`", "Usage": "Must be present in a Drag Row scenario on the cell containing the drag handle." }, { "Selector": "`.k-grid-header-locked .k-grid-header-table .k-table-row`", "Attribute": "`aria-owns`", "Usage": "When there are locked columns, the rows from the `locked` header table should `own` the cells from the corresponding non-locked header table rows. Value should be a space-separated list of `id`s." }, { "Selector": "`.k-grid-content-locked .k-grid-table .k-table-row`", "Attribute": "`aria-owns`", "Usage": "When there are locked columns, the rows from the `locked` content table should `own` the cells from the corresponding non-locked content table rows. Value should be a space-separated list of `id`s." }, { "Selector": "`.k-grid-header-wrap .k-grid-header-table .k-table-row`", "Attribute": "`role=presentation/none`", "Usage": "When there are locked columns, the rows from the non-locked header table should have their default semantic role removed, as their children are owned by the corresponding row from the locked table." }, { "Selector": "`.k-grid-content .k-grid-table .k-table-row`", "Attribute": "`role=presentation/none`", "Usage": "When there are locked columns, the rows from the non-locked content table should have their default semantic role removed, as their children are owned by the corresponding row from the locked table." } ] } }, { "h5": "Grid footer" }, { "p": "The Aggregates totals are placed within a `<tfoot>` element in the Content `<table>`." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`tfoot`", "Attribute": "`role=rowgroup`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "`tfoot>tr`", "Attribute": "`role=row`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-rowindex`", "Usage": "Row number including all headers, data (including master and detail) rows, and footers starting from 1. Footer rows are always the last ones in a Grid. Needed only when Paging (and more that 1 page is present in the component), Virtual rows, or Master/Detail rows (Hierarchical Grid, Detail Template Grid) are enabled. If data is also Grouped, the proper indexing could not be calculated. Hence, the attribute must not be set." }, { "Selector": "`tfoot>tr>td`", "Attribute": "`role=gridcell`", "Usage": "Required as the owner `<table>` element has its semantic role removed." }, { "Selector": "", "Attribute": "`aria-colindex`", "Usage": "Col number, based on leaf columns, starting from 1. Needed only for Virtual columns and Hidden columns scenarios, when not all columns are rendered in the DOM. Otherwise, can be interpreted from the DOM structure. Can be calculated by summing previous columns colspans." } ] } }, { "h4": "Pager" }, { "p": "For the Grid Pager WAI-ARIA spec, please review the Pager component." }, { "link": { "title": "Pager accessibility specification", "source": "{{pager_a11y_link}}" } }, { "h5": "Grid selection aggregates" }, { "p": "The selection aggregates are placed within a `.k-grid-selection-aggregates` element after the Grid `.k-grid-aria-root` element." }, { "table": { "headers": [ "Selector", "Attribute", "Usage" ], "rows": [ { "Selector": "`.k-grid-selection-aggregates`", "Attribute": "`aria-live=polite`", "Usage": "Ensures that changes in the calculated selection aggregates are announced by assistive technologies." } ] } }, { "h3": "Managing the Focus" }, { "p": "The Grid component is a container that consists of 4 logically separated structural elements:" }, { "ul": [ "Toolbar (`role=\"toolbar\"`);", "Group header (`role=\"toolbar\"`);", "Data Grid (`role=\"grid\"`);", "Pager (`role=\"application\"`);" ] }, { "p": "Each of them is part of the page tab sequence and can be navigated to using the `Tab` key of the keyboard." }, { "p": "The `Toolbar` implements the keyboard navigation specification for a ToolBar component. Additionally, when the focus is on the search box, pressing the `Esc` key once clears the value, and pressing it a second time shifts the focus back to the ToolBar." }, { "p": "The `Group heder` implements the keyboard navigation specification for a ToolBar component. Delete buttons in the Field buttons should not be focusable. Deleting can be executed when Field name button is focused by pressing `Delete` or `Backspace`. After deleting a group (field button), the focus should be moved to the next field button (if present), or to the previous one. Upon deleting the last group (field button), the focus should be moved to the top-left data cell of the Grid." }, { "p": "The `Pager` implements the keyboard navigation specification for a Pager component." }, { "p": "The below description focuses only on the `Data Grid` part (the element with `role=\"grid\"`) of the composite component." }, { "h3": "Data Grid Focus" }, { "p": "The Data Grid is a single tab stop component. Upon focusing the Data Grid, the initial focus is set to either the previously focused cell (if any), or the first data (`<td>`) cell in the Data Grid. The change of the focused cell should be implemented using one of the following two techniques:" }, { "ul": [ "Roving TabIndex components Practice for managing the focus. Meaning that going through the cells will update the tabindex of the cell.", "Active descendant - keeping the focus always on the Data Grid and using the `aria-activedescendant` on the Data Grid element which points to the id of the currently focused cell." ] }, { "p": "If a cell contains only one focusable element that does not itself require arrow keys for its inner navigation - focus goes to that element instead of its parent `<td>`." }, { "p": "If column header cells do not provide functions, such as sort, filter, grouping, or column menu, they may not be focusable." }, { "p": "If the Grid contains no items (empty Grid), the `No data` element in the Grid should be focused. That applies also for the scenario when the last item in the Grid has been deleted." }, { "h3": "Keyboard Shortcuts" }, { "h4": "All 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": "`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 grid." }, { "Shortcut": "`Ctrl/Cmd(Mac) + End`", "Behavior": "Moves focus to the last cell in the last **loaded** row of the Grid." }, { "Shortcut": "`Page Down`", "Behavior": "Loads and displays the next page of data. If virtual scrolling is used, scrolls down with the number of visible items." }, { "Shortcut": "`Page Up`", "Behavior": "Loads and displays the previous page of data. If virtual scrolling is used, scrolls up with the number of visible items." }, { "Shortcut": "`Ctrl/Cmd(MacOS) + Down Arrow`", "Behavior": "(Optional) Moves focus 5 rows down (if possible) or to the last row (for faster navigation)." }, { "Shortcut": "`Ctrl/Cmd(MacOS) + Up Arrow`", "Behavior": "(Optional) Moves focus 5 rows down (if possible) or to the first row (for faster navigation)." } ] } }, { "h4": "Grid data cells" }, { "h5": "All scenarios" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "When the grid is in InCell EditMode - EditMode is activated. In hierarchy cell - expands /collapses the detail row. In grouping cell - expands /collapses the group. If the cell contains a focusable elements - focus moves to the first focusable element inside." }, { "Shortcut": "`F2`", "Behavior": "Enters edit mode when the Grid is in InCell EditMode." }, { "Shortcut": "`Esc`", "Behavior": "If editor is opened, cancels the edit and closes the editor. If focus is on an element inside a cell, returns the focus back to the cell." } ] } }, { "h5": "In a row selection scenario" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Space`", "Behavior": "Selects the row holding the currently focused cell." }, { "Shortcut": "`Ctrl + Space` or `Cmd + Enter`(MacOS)", "Behavior": "Selects or deselects the current row, while persisting previously selected rows (only for selection mode \"multiple\")." }, { "Shortcut": "`Shift + Space`", "Behavior": "Performs range selection, selects all the rows between the last selected one (with SPACE or mouse click) and the one holding the focused cell." }, { "Shortcut": "`Shift + Up Arrow`", "Behavior": "Selects the row above. When multiple selection is enabled, extends the selection to that row." }, { "Shortcut": "`Shift + Down Arrow`", "Behavior": "Selects the row below. When multiple selection is enabled, extends the selection to that row." } ] } }, { "h5": "In a cell selection scenario" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Space`", "Behavior": "Selects the currently focused cell." }, { "Shortcut": "`Ctrl + Space` or `Cmd + Enter`(MacOS)", "Behavior": "Selects or deselects the currently focused cell, while persisting previously selected cells (only for selection mode \"multiple\")." }, { "Shortcut": "`Shift + Space`", "Behavior": "Performs range selection, selects all the cells between the last selected one (with SPACE or mouse click) and the focused cell." }, { "Shortcut": "`Shift + Up Arrow`", "Behavior": "Selects the cell above. When multiple selection is enabled, extends the selection to that cell." }, { "Shortcut": "`Shift + Down Arrow`", "Behavior": "Selects the cell below. When multiple selection is enabled, extends the selection to that cell." }, { "Shortcut": "`Shift + Left Arrow`", "Behavior": "Selects the cell to the left. When multiple selection is enabled, extends the selection to that cell." }, { "Shortcut": "`Shift + Right Arrow`", "Behavior": "Selects the cell to the right. When multiple selection is enabled, extends the selection to that cell." } ] } }, { "h4": "Grid header cells" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "If sorting is enabled, Sort is applied." }, { "Shortcut": "`Alt` + `Down`", "Behavior": "Opens the Column menu / Filter menu and moves focus to that menu." }, { "Shortcut": "`Esc`", "Behavior": "Closes Filter or Column menu." }, { "Shortcut": "`Ctrl + Space` or `Cmd + Enter`(MacOS)", "Behavior": "Group/ungroup the focused column." }, { "Shortcut": "`Ctrl/Cmd(Mac)` + `Left Arrow`", "Behavior": "Reorders the column with the previous one." }, { "Shortcut": "`Ctrl/Cmd(Mac)` + `Right Arrow`", "Behavior": "Reorders the column with the next one." }, { "Shortcut": "`Alt/Option(Mac)` + `Left Arrow`", "Behavior": "Resizes the column (decreases width in LTR, increases width RTL)." }, { "Shortcut": "`Alt/Option(Mac)` + `Right Arrow`", "Behavior": "Resizes the column (increases width in LTR, decreases width RTL)." } ] } }, { "p": "Note that header cells can't contain arbitrary focusable elements if the Grid is sortable, as the `Enter` key is reserved for sorting. There should be an option to remap the `Enter` key if a user scenario requires focusable elements in the header." }, { "h4": "Command column cells" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "Moves focus inside the command column, and can trap the tab sequence. First button is focused. If a button is focused, triggers the button action." }, { "Shortcut": "`Esc`", "Behavior": "If a button is focused, returns focus to the command cell." }, { "Shortcut": "`Tab`", "Behavior": "Moves focus to the next button in the column." }, { "Shortcut": "`Shift + Tab`", "Behavior": "Moves focus to the previous button in the column." } ] } }, { "p": "When deleting Grid item (row) after focusing and pressing Enter on a `Delete` button, the focus should go to the cell in the same column on the next (if present), or the previous row (item)." }, { "h4": "Inline Edit Row" }, { "p": "Triggering an edit in Inline mode focuses the first editor." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Tab`", "Behavior": "Moves to the next editor in the row." }, { "Shortcut": "`Escape`", "Behavior": "Cancels the row edit. The focus goes to the command cell from where the row edit was triggered." } ] } }, { "h4": "Incell Edit Cell" }, { "p": "When editing mode is incell, we have an excel-like navigation. 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). It skips cells with `Editable='false'` and command columns. 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. If we're already on the last row of the grid, focus remains on the cell, with the editor closed." }, { "Shortcut": "`Shift + Tab`", "Behavior": "Moves to the previous editor in the row (closing current editor). It skips cells with `Editable='false'` and command columns. 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. If we're already on the first row of the grid, focus remains on the cell, with the editor closed." }, { "Shortcut": "`Enter`", "Behavior": "Commits changes for the edited item, and moves focus to the same cell on the row below, opening it for edit." }, { "Shortcut": "`Escape`", "Behavior": "Cancels the edit. The focus goes to the current cell." } ] } }, { "h4": "Popup editor" }, { "p": "Opening the popup editor focuses the first editor." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Tab`", "Behavior": "Moves to the next editor in the form." }, { "Shortcut": "`Escape`", "Behavior": "Closes the editor. The focus goes to the command cell from where the popup was opened." }, { "Shortcut": "`Enter`", "Behavior": "Triggers a submit action for the editor, including validation." } ] } }, { "h4": "Filter Row" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Arrow Keys`", "Behavior": "`td` elements receive focus as standard navigation in Grid." }, { "Shortcut": "`Enter`", "Behavior": "Enters in the `td` and focuses the first focusable element in it. All filter row components gain `tabindex=0`. Focus remains trapped inside the filter row." }, { "Shortcut": "`Tab`", "Behavior": "Goes through the filter row components." }, { "Shortcut": "`Esc`", "Behavior": "Focus goes to the `td` element wrapping the currently focused filter component." } ] } }, { "h4": "Column Menu" }, { "p": "The Grid Column menu implements the Column menu keyboard navigation spec." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Alt` + `Down Arrow`", "Behavior": "Opens the ColumnMenu Popup when focus is on the Grid header cell or on the main column 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 column menu items, executes the currently focused item action. If item is expandable, expands or collapses the item." }, { "Shortcut": "`Escape`", "Behavior": "Closes the ColumnMenu Popup and returns focus to the header cell or the main button." }, { "Shortcut": "`Down Arrow` & `Up Arrow`", "Behavior": "Moves the focus to the next/previous item when focus is in the ColumnChooser list of options." }, { "Shortcut": "`Space`", "Behavior": "Toggles the checked state of the focused ColumnChooser option." } ] } }, { "blockquote": "All internal components follow their own keyboard navigation when focused." }, { "h4": "Filter Menu" }, { "p": "The Filter menu implements the Filter menu keyboard navigation spec. After focusing the Filter menu, the focus is trapped within its contents. The user should not be allowed to tab-out of the menu." }, { "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." }, { "h4": "Group row" }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "Expands/Collapses the row" } ] } }, { "h4": "Detail Template master row" }, { "p": "Detail template is accessed through the detail cell." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Enter`", "Behavior": "Toggles the detail template." }, { "Shortcut": "`Arrow Down`", "Behavior": "Focuses the detailed cell." }, { "Shortcut": "`Enter`", "Behavior": "If on detail cell, focus the first focusable element inside the detail template (if any)." }, { "Shortcut": "`Esc`", "Behavior": "Returns the focus to the detail cell." } ] } }, { "h4": "Checkbox column" }, { "p": "The CheckBoxes in a Checkbox column always receive focus instead of their `<td>` parents. That is because they are the only element in the cell, which is also focusable." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Space`", "Behavior": "Toggle checkbox. Toggling the checkbox selects/deselects a row." }, { "Shortcut": "`Esc`", "Behavior": "Returns focus to the cell." } ] } }, { "h4": "Row reordering column" }, { "h5": "Row reordering scenarios" }, { "p": "The cells, containing the drag handles in a dedicated Row reordering column, allow row reordering when focused." }, { "table": { "headers": [ "Shortcut", "Behavior" ], "rows": [ { "Shortcut": "`Ctrl/Cmd(MacOS) + Shift + Down Arrow`", "Behavior": "Reorders the row with the next one when such is present." }, { "Shortcut": "`Ctrl/Cmd(MacOS) + Shift + Up Arrow`", "Behavior": "Reorders the row with the previous one when such is present." } ] } }, { "h3": "Testing" }, { "p": "The Grid 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 Grid 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": { "title": "WAI-ARIA specification for grid", "source": "https://www.w3.org/TR/wai-aria-1.2/#grid" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/", "title": "ARIA Authoring Practices: Grid Pattern" } }, { "link": { "source": "https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/dataGrids/", "title": "ARIA Authoring Practices: Data Grid" } } ] } ]