Eslint-plugin-jsx-a11y: control-has-associated-label false positive with <th /> tags

[Aerendir]

If I use <th /> the rule interpret it as an error.

[ljharb]

Can you provide code and the full error you get?

[Aerendir]

...
<table className="table">
                  <thead>
                    <tr>
                      <th />
                      <th className="order-col-supply">Numero (ID)</th>
                      <th className="order-col-supplier">Fornitore</th>
                      <th className="supply-col-createdOn">Creato il</th>
                      <th className="supply-col-sentOn">Inoltrato il</th>
                      <th className="supply-col-registeredOn">Registrato il</th>
                    </tr>
                  </thead>
                  <tbody>{suppliesList}</tbody>
                </table>
...

[ljharb]

and the exact error you get on the CLI?

[ZhangYiJiang]

Seeing this too. The error is associated with the line on which the empty <th /> is on

  94:15  error  A control must be associated with a text label  jsx-a11y/control-has-associated-label

I have a test cases added, and traced the error to https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/207, where somehow th started getting considered interactive elements, the validity of which I don't think I'm familiar enough with to comment on. It being considered a "control" that requires a label definitely seems like a bug though.

[ljharb]

Hmm - why do you need a column without a textual header?

[ZhangYiJiang]

The most common use case is for when both the first column and the first row are headers, in which case the cell at the top left hand corner would usually be empty. I guess they could be an empty td instead? It makes styling a bit harder though

[Aerendir]

I confirm what @ZhangYiJiang said: it is the top left cell in a matrix.

It cannot be a td because it is in the header and then the cell has to be a th, not a td.

[jessebeach]

A <th> has semantic meaning. It requires a label. The rule is correct. If you feel you have an edge case that doesn't apply, then disable the warning for this line.

Alternatively, add aria-label to the <th> element and give it a label that won't be visible. The column contains some kind of data, right?, and the column for that data should a label.

[wooly]

@jessebeach I've just come across this issue as I'm also seeing this behaviour.

I'm happy to add an exception for my table, but I felt it was worth pointing out that the Living Standard for tables has an example[1] which exhibits this very thing:

...
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
...

There doesn't appear to be anywhere in the spec that mandates the presence of a label either. Are you able to point me to where this is stipulated?

1. https://html.spec.whatwg.org/multipage/tables.html#table-examples

[jessebeach]

@wooly I see this as more of a user experience issue than a conformance issue. If a column lacks a label in the header, then a user who cannot perceive the table visually will have fewer queues to understand that table. It's always better to label.