Accessible Multiheader Flex Table?
I’m trying to build an interactive accessible multi-header table using CSS Flexbox. I’m using TypeScript and React but the issue is HTML and CSS based. The goal is to have a column header for "Attacking" and a second row below that for each Pokemon type. Similarly, a "Defending" header and each Pokemon type for each row. Each cell should have the damage multiplier applied between those two types, and be expandable to provide a mnemonic that will help people remember which types have the advantage. IE Electric Pokemon have an advantage over Flying Pokemon because "Flaps get zaps". Here is the idea:
The issue is that when using Flex to handle table responsiveness and expansion of the cells, I cannot orient the "Defending" header to visually or programatically match the expected rowspan. The "Defending" header only applies to the first row, not all of the rows.
Here is the codesandbox: https://codesandbox.io/s/pokemon-type-matchups-2lceh
Theoretically, I want to create an element that contains the table body and have that set to flex:column, with two columns representing the table ("Defending" and all of the rows with their row headers). But using <tbody> set to flex:column and using th as a child gives the error:
validateDOMNesting(...): <th> cannot appear as a child of <tbody>.
Here’s the codesandbox for tbody as two columns
Without CSS, the table works as expected, except of course, without the responsiveness and cell resizing.
Can I use Flexbox to build this multiheader table? Chrome 80 no longer drops accessibility information on tables when changing the display property, so I am trying to stick with native table elements.
I’ve been using the below example multi-header tables as guidance:
