Bug - Table - hoverable example invalid markup and selection not announced on navigation
Describe the problem Followup to #7732
The hoverable selectable Table example throws the following warning in the dev environment:
Warning: validateDOMNesting(...): <output> cannot appear as a child of <tbody>
Additionally, due to the way screen readers navigate tables (by cell rather than by row), the row that is selected only gets announced when a row is selected via a cell. Using Tab to navigate between rows (as the table caption instructs) does announce whether the row is selected, but it only announces the aria-label and not the content of the row.
Some possible alternatives:
- Add a hidden input to each row, similar to the implementation seen in Data list selectable rows example. To avoid invalid markup, I believe this might require having an empty column similar to the table examples that use visible radio inputs.
- Add a hidden input to the first cell of a row, and add styling so that when the radio input has focus it looks like the row has focus.
- Move the current
outputelement to the first<td>element of a row
How do you reproduce the problem? Navigate the Hoverable selectable table example with a screen reader
Expected behavior Markup is valid, and users can be notified whether the current row is selected as best as possible
Is this issue blocking you? No
Screenshots N/A
What is your environment? N/A
What is your product and what release date are you targeting? N/A
Any other information? N/A
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.