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.