[EuiDataGrid][KEYBOARD]: Buttons must be able to receive keyboard focus in table rows

[1Copenut]

UPDATE
The EUI team was discussing another aspect of data grid navigation, and linked to the WAI-ARIA Authoring Practices for Data Grid keyboard navigation. The section on grid cell navigation was new information, and highly relevant to this issue.

Specifically I'd like to explore using the F2 key to place focus on the first <button> element and allow users to navigate widgets inside the cell using the TAB key or SHIFT + TAB to traverse backwards by focusable elements. Pressing ESC would return users to the standard data grid navigation by arrow keys.

Steps to reproduce

1. Start a Kibana data set with tables that include inline buttons or filters
2. Tab to the table, then use arrow keys to navigate through cells
3. Verify pressing TAB in the focused cell does not set keyboard focus on a button in the cell.
4. Current focus can be tested easily in developer tools by typing document.activeElement in the console

Actual Result

• The inline buttons are ignored in the focus order

Expected Result

• Buttons of the focused table cell will receive keyboard focus before focus is set out of the table

Kibana Version:
v8.0.0

OS:
MacOS Big Sur

Browser:
Chrome

Relevant WCAG Criteria:
Understanding Success Criterion 2.1.1: Keyboard - Level A

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[1Copenut]

I'm going to close this issue. After a discussion with @chandlerprall I learned our data grid cells have the ability to set focus on buttons by pressing ENTER or F2. The focusable items (if multiple) are enabled in a popover, or if the cell contains no focusable elements, the cell data is shown in the popover. Verified this on a cloud instance of Kibana, v7.16.0. Moving to close.