[Data grid] Add keyboard navigation

[DanielleRameau]

(see: https://www.w3.org/WAI/ARIA/apg/patterns/grid/#keyboardinteraction-settingfocusandnavigatinginsidecells)

Patterns and documentation:

Pagination When using pagination it is a good idea to let the user know there is pagination and on which page they are before "entering" the table. If a teacher opens the page with a table of all students in a class, of which they know there are 30, it might be confusing to start reading the table and have the table say it's "row 1 of 11". If thesl-paginator-status is placed above the table a screen reader, but also a low vision user using a magnifier will know they are not getting the full table. compare: With Because of shadow dom boundaries i couldn't get it to work with aria-described by and point to the sl-paginator-status

Size and tabstops Be clear there is a limit on the amount of rows and tab stops per row. 300 rows, with a text field and 3 buttons means 1200 tabstops, it is better make selectable rows and make the actions bulk actions or use pagination.

### Tasks
- [ ] styling of skip links (Roald)

[Diaan]

Some interesting examples: https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/ https://codepen.io/dianabroeders/pen/NWQqWdZ?editors=1010

[Diaan]

• [ ] Set tab-index of all elements that are only child of cell to -1 and focus that element when the cell is active

[Diaan]

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

[Diaan]

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).

[Diaan]

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

[Diaan]

pagination: add total number of items/ pages to caption/ aria-described by

[Diaan]

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