sl-design-system
[Data grid] Add keyboard navigation
(see: https://www.w3.org/WAI/ARIA/apg/patterns/grid/#keyboardinteraction-settingfocusandnavigatinginsidecells)
Some interesting examples: https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/ https://codepen.io/dianabroeders/pen/NWQqWdZ?editors=1010
- [ ] Set tab-index of all elements that are only child of cell to -1 and focus that element when the cell is active
when navigating: arrow keys: move around enter -> go in edit mode
when in edit mode: enter-> confirm and go to cell below, already in edit mode esc -> exit edit mode and focus current cell arrow keys -> like in "normal, single" input field/select
https://inclusive-components.design/data-tables/
https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html#Update02 I think the link option would be quite close to how we are using the row-click event right now.
Table Pattern Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. The grid pattern is used to make an interactive widget that has a tabular structure (a calendar for example).
research screenreader usage virtual list, both in role table and role grid
table only data, no edit fields or selection column clickable row sorting filtering
grid interactive; edit fields, selection columns clickable row sorting filtering selection (multi select row) all cells focusable by keyboard?
In both NVDA and voiceover there is no difference in navigating a table when it has role grid and when it has not. Tested on https://cdpn.io/pen/debug/mdNwqNQ?authentication_hash=VGkWNpwEgaeA
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/table_role An element with role="table" is a static tabular structure with rows containing cells. The cells are not focusable or selectable, though widgets within individual cells of the table can be interactive. If the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role The grid role is a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys. Accessibility concerns Even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys. Make sure that the functionality and interaction needed can be best achieved using the grid role.
https://inclusive-components.design/data-tables/ You do not need to use the grid role to make most tables accessible to screen readers. The grid-related behavior should only be implemented where users not running screen reader software need to easily access each cell to interact with it. One example might be a date picker where each date is clickable within a grid representation of a calendar month.
https://x.com/stevefaulkner/status/1016319282609782784 role=grid if the (grid) cells ARE interactive controls role=table if the cells CONTAIN interactive controls Bonus tip: sortable data tables are not grids🖖🏽
Conclusion:
- [x] use role table
- [x] Skip table button https://www.w3.org/WAI/WCAG21/Techniques/general/G123
Skip table link:
Skip links work with hash links; <a href="#content">... and a tag that has id="content". This adds the #content in the url and jumps to the element in the page. In frameworks/sites with a complex routing this might cause problems.
https://medium.com/@belwerks/a-quick-note-on-skip-links-in-angular-3641a0e32a7a
Together with Roald, I created a design for the skip link to further improve keyboard navigation in Grid (see design). For this, we introduced 3 new tokens within our new contextual token setup:
- color.background.focused (Used for the background color of navigation aids, such as skip links, to ensure contrast and visibility on focus.)
- color.text.focused (Used for the text color of navigation aids, such as skip links, when they are focused or visible.)
- color.border.focused (Used for focus rings of elements in a focus state.)
Because the skip link is behind the table (because of the animation when showing it) I can't get the focus border to lay above the table, as it is in the design:
I've moved the button a bit from the edge of the table, so the outline doesn't look so weird, poking out on the side of the table
Also, it is not possible to have a round outline on a square corner (at the bottom here):