Empty table th elements should be replaced with td

[peteharverson]

If an empty String is used for the name property of a column in an EUI table (found with EuiInMemoryTable), an empty <th> element is created. For accessibility, this empty <th> should be replaced with a <td> (see elastic/kibana#12401).

Example from the ML anomalies table where an empty header is used for the first column holding the row expand control:

cc @aphelionz

[cchaos]

In elastic/kibana#12401, referenced above, the author links to this article for details: https://webaim.org/techniques/tables/data

However, I see no where that it mentions replacing th's with td's. In fact, it explicitly says not to have empty table headers:

Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.

I would call this now a non-fix since it's no longer an approved way of handling empty header cells.

[shahzad31]

@cchaos i was testing accessibility in Uptime app and i found the same issue with wave accessibility tool
it does actually recommend replacing empty th with td in table header and it is totally a valid tag inside th.

i also found another useful discussion regarding this issue in another component library issue
primefaces/primefaces#4725
i think we can solve it by replacing th with td when name is empty or we can provide an option to use td/th as an option 'component' prop.

also in a more complicated solution, user can also use render method to render custom td, but i think that will be ugly.

[myasonik]

+1 to replacing empty <th> with <td>.

@cchaos In the same article you posted, the examples on that page use empty tds for tables similar in design to the original issue screen shot. (That is, at least that's the current state of the article. Not sure if it's been updated since last year.)

[anishagg17]

@myasonik i want to work on this issue

[myasonik]

It's yours!