js-packages: Fix some JS lints ahead of the eslint 9 upgrade

To make the eslint 9 upgrade PR smaller, let's fix some of the lints
that it'll complain about ahead of time.

Of particular note is that, when we added 'plugin:@wordpress/jsx-a11y'
in #38436, we accidentally left 'plugin:jsx-a11y/recommended' in place
after it which overrides some of the configuration that
'plugin:@wordpress/jsx-a11y' does. Fixing that disables a few rules we
had been inline-ignoring in various places: jsx-a11y/media-has-caption,
jsx-a11y/no-noninteractive-tabindex, and
jsx-a11y/role-has-required-aria-props.

projects/github-actions/repo-gardening/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/github-actions/repo-gardening/src/tasks/flag-oss/index.js

@@ -28,7 +28,7 @@ async function flagOss( payload, octokit ) {
 			org: owner.login,
 			username: head.user.login,
 		} );
-	} catch ( error ) {
+	} catch {
 		debug( `flag-oss: Adding OSS Citizen label to PR #${ number }` );
 		await octokit.rest.issues.addLabels( {
 			owner: owner.login,

projects/github-actions/repo-gardening/src/tasks/triage-issues/index.js

@@ -38,7 +38,7 @@ async function addCommentAskLabels( octokit, ownerLogin, authorLogin, repo, issu
 			org: ownerLogin,
 			username: authorLogin,
 		} );
-	} catch ( error ) {
+	} catch {
 		debug(
 			`triage-issues > auto-label: Author ${ authorLogin } is not an org member. Skipping comment.`
 		);

projects/js-packages/ai-client/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/ai-client/src/data-flow/context.tsx

@@ -8,8 +8,7 @@ import React, { createContext } from 'react';
 import SuggestionsEventSource from '../suggestions-event-source/index.js';
 import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
 import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.js';
-import type { PromptProp } from '../types.js';
-import type { RequestingStateProp } from '../types.js';
+import type { PromptProp, RequestingStateProp } from '../types.js';
 
 export type AiDataContextProps = {
 	/*

projects/js-packages/ai-client/src/hooks/use-ai-suggestions/index.ts

@@ -21,8 +21,7 @@ import {
  */
 import type { AskQuestionOptionsArgProps } from '../../ask-question/index.js';
 import type SuggestionsEventSource from '../../suggestions-event-source/index.js';
-import type { PromptProp, SuggestionErrorCode } from '../../types.js';
-import type { RequestingStateProp } from '../../types.js';
+import type { PromptProp, SuggestionErrorCode, RequestingStateProp } from '../../types.js';
 
 export type RequestingErrorProps = {
 	/*

projects/js-packages/ai-client/src/logo-generator/components/logo-presenter.tsx

@@ -200,7 +200,6 @@ export const LogoPresenter: React.FC< LogoPresenterProps > = ( {
 	logoAccepted = false,
 	siteId,
 } ) => {
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return -- @todo Start extending jetpack-js-tools/eslintrc/react in eslintrc, then we can remove this disable comment.
 	const { isRequestingImage } = useLogoGenerator();
 	const { saveToLibraryError, logoUpdateError } = useRequestErrors();
 

projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx

@@ -6,8 +6,7 @@ import { Button, Tooltip, SelectControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
 import debugFactory from 'debug';
-import { useCallback, useEffect, useState, useRef } from 'react';
-import { Dispatch, SetStateAction } from 'react';
+import { useCallback, useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
 /**
  * Internal dependencies
  */

projects/js-packages/babel-plugin-replace-textdomain/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/babel-plugin-replace-textdomain/tests/plugin.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/order */
-
 const mockOrigDebug = jest.requireActual( 'debug' );
 const mockDebug = jest.fn();
 jest.mock( 'debug', () => {

projects/js-packages/boost-score-api/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/boost-score-api/src/utils/json-types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 /**
  * Generic type for handling JSON-like objects.
  *

projects/js-packages/components/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/components/components/boost-score-bar/test/component.tsx

@@ -18,14 +18,12 @@ describe( 'BoostScrollBar', () => {
 	it( 'renders the boost scroll bar when active is true', () => {
 		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
 
-		// eslint-disable-next-line testing-library/no-node-access
 		expect( container.firstChild ).toHaveAttribute( 'class', 'jb-score-bar jb-score-bar--desktop' );
 	} );
 
 	it( 'does not render the boost scroll bar when active is false', () => {
 		const { container } = render( <BoostScoreBar { ...defaultProps } active={ false } /> );
 
-		// eslint-disable-next-line testing-library/no-node-access
 		expect( container ).toBeEmptyDOMElement();
 	} );
 

projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts

@@ -17,10 +17,9 @@ export function tooltipsPlugin( periods ) {
 	/**
 	 * Initializes the tooltips plugin.
 	 *
-	 * @param {uPlot}  u     - The uPlot instance.
-	 * @param {object} _opts - Options for the uPlot instance.
+	 * @param {uPlot} u - The uPlot instance.
 	 */
-	function init( u: uPlot, _opts: object ) {
+	function init( u: uPlot ) {
 		container.classList.add( 'jb-score-tooltips-container' );
 		if ( ! reactDom ) {
 			reactDom = ReactDOM.createRoot( reactRoot );

projects/js-packages/components/components/dialog/stories/index.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
 import Dialog from '..';
 import ProductOffer from '../../product-offer';

projects/js-packages/components/components/diff-viewer/stories/index.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
 import DiffViewer from '..';
 

projects/js-packages/components/components/number-slider/index.tsx

@@ -68,7 +68,7 @@ const NumberSlider: React.FC< NumberSliderProps > = ( {
 				min={ minValue }
 				step={ step }
 				renderThumb={ renderThumbCallback } // eslint-disable-line react/jsx-no-bind
-				onChange={ onChange } // eslint-disable-line react/jsx-no-bind
+				onChange={ onChange }
 				onBeforeChange={ onBeforeChangeCallback } // eslint-disable-line react/jsx-no-bind
 				onAfterChange={ onAfterChangeCallback } // eslint-disable-line react/jsx-no-bind
 			/>

projects/js-packages/components/components/pricing-table/index.tsx

@@ -1,15 +1,15 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
-import {
+import React, {
 	createContext,
 	useContext,
 	Children,
 	cloneElement,
 	PropsWithChildren,
 	ReactElement,
+	CSSProperties,
 } from 'react';
-import React, { CSSProperties } from 'react';
 import IconTooltip from '../icon-tooltip';
 import useBreakpointMatch from '../layout/use-breakpoint-match';
 import TermsOfService from '../terms-of-service';

projects/js-packages/components/components/pricing-table/test/component.tsx

@@ -36,6 +36,6 @@ describe( 'PricingTable', () => {
 		render( <PricingTable { ...testProps }></PricingTable> );
 		expect( screen.getAllByText( 'Dummy Item 1' ) ).toHaveLength( 2 );
 		expect( screen.getAllByText( 'Dummy Item 2' ) ).toHaveLength( 2 );
-		expect( screen.getAllByText( 'Dummy Item 3' ) ).toHaveLength( 1 ); // eslint-disable-line jest-dom/prefer-in-document
+		expect( screen.getAllByText( 'Dummy Item 3' ) ).toHaveLength( 1 );
 	} );
 } );

projects/js-packages/components/components/spinner/stories/index.stories.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import React from 'react';
 import Spinner from '../index.jsx';
 

projects/js-packages/components/components/upsell-banner/stories/index.stories.tsx

@@ -9,7 +9,6 @@ export default {
 	},
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const BannerTemplate = args => {
 	// Set up the first CTA
 	const secondaryCtaLabel = 'Learn more';

projects/js-packages/connection/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/connection/components/connect-screen/basic/stories/index.stories.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import ConnectScreenVisual from '../visual';

projects/js-packages/connection/components/connect-screen/basic/visual.tsx

@@ -1,5 +1,4 @@
-import { ActionButton, TermsOfService } from '@automattic/jetpack-components';
-import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';

projects/js-packages/connection/components/connect-screen/required-plan/stories/index.stories.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/react-in-jsx-scope */
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import ConnectScreenRequiredPlanVisual from '../visual';

projects/js-packages/connection/components/disconnect-dialog/steps/step-survey.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';

projects/js-packages/eslint-config-target-es/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/eslint-config-target-es/src/flatconfig/base.js

@@ -14,7 +14,7 @@ try {
 	if ( globals?.es2022 ) {
 		flatBase.languageOptions.globals = globals.es2022;
 	}
-} catch ( e ) {
+} catch {
 	// `globals` is optional.
 }
 

projects/js-packages/i18n-loader-webpack-plugin/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/i18n-loader-webpack-plugin/tests/globals.js

@@ -23,7 +23,7 @@ class I18nLoader {
 		if ( ret === null ) {
 			throw new Error( `Path ${ path } was requested multiple times` );
 		}
-		this.expect[ expect ] = null;
+		this.expect[ path ] = null;
 		return ret( domain );
 	}
 

projects/js-packages/licensing/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/licensing/components/golden-token-modal/index.jsx

@@ -79,7 +79,6 @@ function GoldenTokenModal( {
 							onClick={ maybeReanimate }
 							role="presentation"
 						>
-							{ /* eslint-disable-next-line jsx-a11y/media-has-caption */ }
 							<video
 								ref={ videoRef }
 								src="https://videos.files.wordpress.com/oSlNIBQO/jetpack-golden-token.mp4"

projects/js-packages/publicize-components/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/publicize-components/src/components/connection-management/tests/pageObjects/PanelPage.js

@@ -1,4 +1,4 @@
-import { getByRole, queryByRole, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 export class Panel {
@@ -11,19 +11,21 @@ export class Panel {
 	}
 
 	get disconnectButton() {
-		return queryByRole( this.container, 'button', { name: 'Disconnect' } );
+		return screen.queryByRole( this.container, 'button', { name: 'Disconnect' } );
 	}
 
 	get closeButton() {
-		return getByRole( this.container, 'button', { name: 'Close panel' } );
+		return screen.getByRole( this.container, 'button', { name: 'Close panel' } );
 	}
 
 	get openButton() {
-		return getByRole( this.container, 'button', { name: 'Open panel' } );
+		return screen.getByRole( this.container, 'button', { name: 'Open panel' } );
 	}
 
 	get markAsSharedToggle() {
-		return queryByRole( this.container, 'checkbox', { name: 'Mark the connection as shared' } );
+		return screen.queryByRole( this.container, 'checkbox', {
+			name: 'Mark the connection as shared',
+		} );
 	}
 
 	isOpen() {

projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx

@@ -1,11 +1,10 @@
-import { Button, useGlobalNotices } from '@automattic/jetpack-components';
-import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, useGlobalNotices, getRedirectUrl } from '@automattic/jetpack-components';
 import {
 	BaseControl,
 	FlexBlock,
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	ExternalLink,
 } from '@wordpress/components';
-import { ExternalLink } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';

projects/js-packages/publicize-components/src/components/share-buttons/share-buttons.tsx

@@ -1,5 +1,4 @@
-import { SocialServiceIcon, Button, Text } from '@automattic/jetpack-components';
-import { CopyToClipboard } from '@automattic/jetpack-components';
+import { SocialServiceIcon, Button, Text, CopyToClipboard } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';

projects/js-packages/publicize-components/src/components/social-post-modal/preview-section.tsx

@@ -1,6 +1,5 @@
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { TabPanel } from '@wordpress/components';
-import { ToggleControl } from '@wordpress/components';
+import { TabPanel, ToggleControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { useCallback } from 'react';

projects/js-packages/publicize-components/src/components/video-preview/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
 import styles from './styles.module.scss';
 

projects/js-packages/react-data-sync-client/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/react-data-sync-client/src/DataSync.ts

@@ -223,7 +223,6 @@ export class DataSync< Schema extends z.ZodSchema, Value extends z.infer< Schema
 		try {
 			data = JSON.parse( text );
 		} catch ( error ) {
-			// eslint-disable-next-line no-console
 			throw new DataSyncError( 'Failed to JSON.parse() the response from the server.', {
 				...this.describeSelf(),
 				location: url,

projects/js-packages/react-data-sync-client/src/DataSyncHooks.ts

@@ -8,8 +8,7 @@ import {
 	useMutation,
 	QueryClientProvider,
 } from '@tanstack/react-query';
-import React from 'react';
-import { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { z } from 'zod';
 import { DataSync } from './DataSync';
 import { DataSyncError } from './DataSyncError';

projects/js-packages/react-data-sync-client/tests/jest.config.cjs

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require( 'path' );
 const coverageConfig = require( 'jetpack-js-tools/jest/config.coverage.js' );
 

projects/js-packages/react-data-sync-client/webpack.config.cjs

@@ -1,6 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require( 'path' );
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
 
 module.exports = {

projects/js-packages/shared-extension-utils/changelog/update-js-packages-fix-eslint-9-lints

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fix some JS lints ahead of eslint 9 upgrade.
+
+

projects/js-packages/shared-extension-utils/src/modules-state/actions.js

@@ -25,7 +25,7 @@ export function* updateJetpackModuleStatus( settings ) {
 		const data = yield fetchJetpackModules();
 		yield setJetpackModules( { data } );
 		return true;
-	} catch ( e ) {
+	} catch {
 		const oldSettings = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
 		yield setJetpackModules( oldSettings );
 		return false;
@@ -49,7 +49,7 @@ export function* fetchModules() {
 		const data = yield fetchJetpackModules();
 		yield setJetpackModules( { data } );
 		return true;
-	} catch ( e ) {
+	} catch {
 		const oldSettings = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
 		yield setJetpackModules( oldSettings );
 		return false;

projects/js-packages/shared-extension-utils/src/register-jetpack-plugin.js

@@ -13,6 +13,7 @@ export default function registerJetpackPlugin( name, settings ) {
 	const unavailable = ! available;
 
 	if ( unavailable ) {
+		// eslint-disable-next-line no-undef -- webpack defines it
 		if ( 'production' !== process.env.NODE_ENV ) {
 			// eslint-disable-next-line no-console
 			console.warn(