jsx-a11y/control-has-associated-label throws an error on table elements

[elianarlivingston]

Hello! I'm experiencing an issue with lint on the 'td' or 'th' elements. Is it correct that this error is being generated? Thank you in advance!

[christopher-william]

I have the same problem, with this version 6.8

[AlanGreene]

I've just run into the same issue updating to 6.8.0.

From a quick review of the changelog and recent history it looks like an intentional change, or at the very least a side effect of an intentional change: #919

In my case it's triggered by an empty <td> used in a skeleton loading state.

[ZeeshanTamboli]

Same issue for us in Material UI - mui/material-ui#39752.

[frantic1048]

We are sticking to the older 6.7.1 version to avoid this issue.

Versions 6.8 and the recent 6.9 still encounter this issue.

[ljharb]

@elianarlivingston @christopher-william @frantic1048 can you provide some code that reproduces the issue?

[frantic1048]

Here's reproduction repo: https://github.com/frantic1048/eslint-plugin-jsx-a11y-issue-959

• ESLint output: https://github.com/frantic1048/eslint-plugin-jsx-a11y-issue-959/actions/runs/9739279809/job/26874221357
• Code: https://github.com/frantic1048/eslint-plugin-jsx-a11y-issue-959/blob/master/src/App.tsx

It appears that this issue is related to the case where a <th> element has only one self-closing child tag.

[ZeeshanTamboli]

Shouldn't th and td be added to ignoreElements in the rule here since they are non-interactive? Would that fix the issue?

[ljharb]

I suppose that'd be one solution.