Eslint "control-has-associated-label" error on non-label tag

[ashtonisher]

Inappropriate eslint error

There's no tag in this component, only table & div elements. But i got eslint error on th tag, which is, "A control must be associated with a text label.eslint[jsx-a11y/control-has-associated-label]"

I think this comes from " "part, but i have to use   or empty space ' ' in thtag cause of layout. And also there's no label in this code!

Is this bug ? or can i fix this?

• MyComponent.tsx

<table>
      <thead>
          <tr>
              <th>&nbsp;</th> /* no content. just for table layout */
              <th>content</th>
              <th>price</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                <img src="icon.png" alt="" />
              </td>
              <td>content1</td>
              <td>content2</td>
          </tr>
     </tbody>
</table>

• .eslintrc.js (in monorepo)

  module.exports = {
  rules: {
  'no-console': 'off',
  'no-plusplus': 'off',
  'import/no-duplicates': 'off',
  'import/prefer-default-export': 'off',
  'react/prop-types': 'off',
  'react/destructuring-assignment': 'off',
  'react/require-default-props': 'off',
  'react-hooks/rules-of-hooks': 'error',
  'react-hooks/exhaustive-deps': 'warn',
  'react/react-in-jsx-scope': 'off',
  'react/jsx-props-no-spreading': 'off',
  'no-underscore-dangle': 'off',
  'guard-for-in': 'off',
  'react/function-component-definition': ['error', { namedComponents: ['arrow-function', 'function-declaration'] }],
  'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
  '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  '@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
  '@typescript-eslint/naming-convention': [
    'error',
    {
      selector: 'variable',
      format: ['camelCase', 'UPPER_CASE', 'PascalCase', 'snake_case'],
      leadingUnderscore: 'allow',
    },
  ],
  '@typescript-eslint/no-use-before-define': 'off',
  'jsx-a11y/label-has-associated-control': [
    'error',
    {
      labelAttributes: ['htmlFor'],
    },
  ],
  'jsx-a11y/media-has-caption': 'off',
  'no-param-reassign': 'off',
  'no-return-assign': 'off', 
  'react/no-array-index-key': 'off', 
  'arrow-body-style': 'off',
  'react/jsx-pascal-case': 'off',
  'no-alert': 'off',
  'consistent-return': 'off',
  'react/no-unescaped-entities': [2, { forbid: ['>', '}'] }],
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
  project: ['./tsconfig.json', './packages/**/tsconfig.json', './apps/**/tsconfig.json'],
  createDefaultProgram: true,
  },
  ...

[ljharb]

This is a duplicate of #959. When I take a look at it, I'll include your repro code.