[EuiBasicTable] row actions are inaccessible

[myasonik]

Summary

When row actions are define, EuiBasicTable sets role=button onto each <tr> (which are natively of role=row and are within the fairly strict rules of table semantics). The solution largely works for keyboard users but can cause a muck for screen reader users.

Proposed solutions

The ideal solution for clickable rows looks something:

<tr onClick={rowActionButton.click()}>
  <td>{name}</td>
  <td>{phoneNumber}</td>
  <td>{rowActionButton}</td>
</tr>

With some CSS, you make the rows appear clickable for mouse users but screen reader and keyboard users get deferred to button within a cell. (Also makes the action more obvious to mouse users.)

Other solutions

Defining a structure like that might be a pretty big breaking change for EUI so I'm not sure about the practicalities of it. At the very least, it would be nice if EUI had an official way to create the accessible pattern.

Other options that could be explored are visually hidden buttons (but those can cause havoc for keyboard only users, so maybe something like a skiplink where it comes into view on focus?) or some custom gymnastics with a lot of aria-live (but this can be brittle and cause further confusion if not clear from the gate).