eslint: Remove jsx-a11y/label-has-associated-control override (#39736)

`@wordpress/eslint-plugin` sets `jsx-a11y/label-has-associated-control`
to "htmlFor", while we had it overridden to "either". Turns out there
was only place that wasn't already doing "htmlFor", so let's fix that
one place and go for it.

This also removes `jsx-a11y/label-has-for` which is deprecated in favor
of `jsx-a11y/label-has-associated-control`. The former config was
equivalent to "either".

projects/packages/jetpack-mu-wpcom/changelog/add-eslint-jsx-a11y-label-has-associated-control

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Replace eslint:disable for `jsx-a11y/label-has-for` with `jsx-a11y/label-has-associated-control`.
+
+

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/form-label.tsx

@@ -21,7 +21,7 @@ const FormLabel: FunctionComponent< Props & LabelProps > = ( {
 	const hasChildren: boolean = Children.count( children ) > 0;
 
 	return (
-		// eslint-disable-next-line jsx-a11y/label-has-for
+		// eslint-disable-next-line jsx-a11y/label-has-associated-control
 		<label { ...labelProps } className={ clsx( className, 'form-label' ) }>
 			{ children }
 			{ hasChildren && required && (

projects/packages/search/changelog/add-eslint-jsx-a11y-label-has-associated-control

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Add auto-generated id in `MockedFilterOption`. No other change to functionality.
+
+

projects/packages/search/src/dashboard/components/mocked-search/mocked-instant-search.jsx

@@ -1,6 +1,6 @@
 import { Gridicon } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
-import React from 'react';
+import React, { useId } from 'react';
 import TextRowPlaceHolder from './placeholder';
 import './mocked-instant-search.scss';
 
@@ -62,14 +62,18 @@ export default function MockedInstantSearch() {
 	);
 }
 
-const MockedFilterOption = () => (
-	<div className="jp-mocked-instant-search__search-filter">
-		<label>
-			<input type="checkbox" disabled="disabled" />{ ' ' }
-			<TextRowPlaceHolder style={ { width: '30%' } } />
-		</label>
-	</div>
-);
+const MockedFilterOption = () => {
+	const id = useId();
+
+	return (
+		<div className="jp-mocked-instant-search__search-filter">
+			<label htmlFor={ id }>
+				<input id={ id } type="checkbox" disabled="disabled" />{ ' ' }
+				<TextRowPlaceHolder style={ { width: '30%' } } />
+			</label>
+		</div>
+	);
+};
 
 const MockedSearchResult = () => (
 	<div className="jp-mocked-instant-search__search-result">

projects/plugins/jetpack/_inc/client/components/select-dropdown/label.jsx

@@ -1,6 +1,6 @@
 /** @ssr-ready **/
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable jsx-a11y/label-has-associated-control */
 
 import React from 'react';
 

projects/plugins/jetpack/changelog/add-eslint-jsx-a11y-label-has-associated-control

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Replace eslint:disable for `jsx-a11y/label-has-for` with `jsx-a11y/label-has-associated-control`.
+
+

tools/js-tools/eslintrc/base.js

@@ -140,14 +140,6 @@ module.exports = {
 
 		'jsx-a11y/anchor-has-content': 'off',
 		'jsx-a11y/anchor-is-valid': 'off',
-		'jsx-a11y/label-has-for': [
-			'error',
-			{
-				required: {
-					some: [ 'nesting', 'id' ],
-				},
-			},
-		],
 		// Redundant roles are sometimes necessary for screen reader support. For instance, VoiceOver
 		// on Safari requires `role=list` to announce the list if the style is overwritten.
 		'jsx-a11y/no-redundant-roles': 'off',
@@ -207,8 +199,6 @@ module.exports = {
 		// We may want to keep these overrides. To decide later.
 		eqeqeq: [ 'error', 'always', { null: 'ignore' } ],
 		'no-unused-expressions': [ 'error', { allowShortCircuit: true, allowTernary: true } ],
-		// Temporarily override plugin:@wordpress/* so we can clean up failing stuff in separate PRs.
-		'jsx-a11y/label-has-associated-control': [ 'error', { assert: 'either' } ],
 		'object-shorthand': 'off',
 	},
 };