rule "label-has-associated-control" from plugin:astro/jsx-a11y uses react htmlFor instead for

[capi1O]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

7.32.0 (not the latest I know but it does not matter)

What version of eslint-plugin-astro are you using?

0.20.0

What did you do?

Configuration

module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	parserOptions: {
		ecmaVersion: 11,
		sourceType: 'module',
	},
	extends: [
		'plugin:astro/recommended',
		'plugin:astro/jsx-a11y-recommended',
	],
	overrides: [
		{
			files: ['*.astro'],
			parser: 'astro-eslint-parser',
			parserOptions: {
				parser: '@typescript-eslint/parser',
				extraFileExtensions: ['.astro'],
			},
			rules: {
				// allows to declare Astro components props without warning from rule no-unused-vars
				'no-unused-vars': ['warn', { varsIgnorePattern: 'Props' }], 
			},
		},
	],
}

<form>
	<label class="label" for="address">Address</label>
	<textarea placeholder="Address" required name="address" id="address"></textarea>
	<input type="submit" value="Submit">
</form>

What did you expect to happen?

No errors from ESLint

What actually happened?

ESLint complains that htmlFor attribute is not defined on labels.

Link to Minimal Reproducible Example

https://github.com/xididri/astro-eslint-jsx-a11y

Additional comments

In React components we must use htmlFor instead of for since it is a reserved keyword (same reason why className is used instead of class). Resulting HTML has for.

In Astro there is no such a thing, therefore the rule should be adapted to check for for attribute instead of htmlFor.

edit: Forgot to include the error message:

error  A form label must be associated with a control  astro/jsx-a11y/label-has-associated-control

[ota-meshi]

Thank you for reporting the issue!
I will fix it.

[capi1O]

Wow that was quick! Thank you so much ;-)

I upgraded to latest version 0.21.0 (from the changelog 0.20.1 includes the fix) and the issue is gone!