patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Bug - Table - hoverable example invalid markup and selection not announced on navigation

Open thatblindgeye opened this issue 3 years ago • 3 comments

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 output element 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

thatblindgeye avatar Jul 25 '22 20:07 thatblindgeye

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Jan 28 '25 11:01 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Mar 31 '25 11:03 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Jun 01 '25 11:06 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Aug 06 '25 11:08 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Oct 08 '25 11:10 github-actions[bot]