Description

Our EuiTable component has a feature to include expanding rows. While testing this as part of the data grid expandable rows discussion #5638, I confirmed an issue @constancecchen noted where clicking a button to expand a row causes it to be removed from the screen reader cursor navigation flow.

Steps to reproduce

1. Assume MacOS - Start Safari and navigate to our EuiTables - expanding rows section
2. Start VoiceOver
3. Expand a row by clicking on the Expand button at the end of a row
4. Navigate to the next row with Ctrl + Opt + arrow key
5. Try to navigate back to the previous row by pressing Ctrl + Opt + UP_ARROW
6. Confirm the row that triggered the new row is being skipped

Possible solution example

I mocked up a new direction based on Constance's feedback in the expandable rows discussion. My basic solution does not include React, just semantic HTML and basic CSS and JS to show how we could make expandable content into an accordion-like pattern in a single table cell: https://github.com/1Copenut/vanilla-accessibility-js/tree/main/table-expandable-content

Guidance

• aria-owns is not currently supported by VoiceOver on MacOS or iOS
• Understanding Success Criterion 1.3.1: Info and Relationships