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).
Summary
When row actions are define, EuiBasicTable sets
role=buttononto each<tr>(which are natively ofrole=rowand 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:
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).