Table - empty/non-text Th components need a11y updates

[thatblindgeye]

Describe the problem
Related to patternfly/patternfly#6272
A concern with our selectable with checkbox Table implementation was brought to us, with the "select all rows" checkbox in the thead being flagged by Lighthouse/Browserstack, as well as the fact that React's Th component was being transformed into a td element unexpectedly. This - in addition to empty td elements being used in the thead, as seen in our "Actions" example - was cause for concern regarding whether the output from screen readers may be confusing/inaccessible.

How do you reproduce the problem?
Test either our selectable with checkbox example or actions table example with Lighthouse/browserstack and/or screen reader. An issue may be flagged for td elements needing a table header in tables larger than 3x3, or the output from screen reader may be confusing/not provide enough context.

Any other information?
In order to resolve issues mentioned here:

• The Th/selectable utility logic needs to be updated to prevent a Th component from being transformed into a td element
• All examples need to be updated to use a Th inside of the Thead component; no longer should we use a Td
  • If a Th component is intended to be visually empty (such as in our "Actions" example), visually-hidden/screen reader text MUST be passed to the Th. This will preserve the visual design, while also avoiding the error of an empty Th + providing improved context via assistive tech.

    <Th>
      <span class="pf-v5-screen-reader">Visually hidden header text</span>
    </Th>
    

  • If a Th component contains non-text, interactive content (checkbox, expand all toggle, etc), in addition to the interactive element requiring an aria-label, the Th should have an aria-label as well. In a case like our "select all rows" checkbox, without the Th's aria-label then other checkbox cells end up being announced as, "Select row 0, select all rows". By adding an aria-label such as "Row select", the announcement becomes "Row select, select row 0" (or in the case of the select all checkbox, "Row select, select all rows").

    <Th aria-label="Row select">
      <label><input  type="checkbox" aria-label="Select all rows" /></label>
    </Th>