From 67b501c7c851ec580b6698ff44cb9d6fdf19b2d9 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Sat, 26 Oct 2024 14:38:05 -0400
Subject: [PATCH] Clean up some workarounds for old upstream bugs

* We no longer need to care about nanoid v3 thinking "browser === esm",
  because the GB package that had that dep no longer does.
* Various `jsx-a11y/label-has-associated-control` ignores referring to
  jsx-eslint/eslint-plugin-jsx-a11y#869 seem to be fixed now that #39736
  requires we use `htmlFor`. The one place still needing an ignore is
  jsx-eslint/eslint-plugin-jsx-a11y#578 instead.
* Remove reference to deleted renovate issue.
* Move reference to a Storybook bug to the code actually implementing
  the workaround.
* Update Storybook FAQ reference.
* Remove TODO references to a fixed Storybook bug (and fix a wrong prop
  in one story).
* Remove workaround for WordPress/WordPress-Coding-Standards#2390.
---
 .github/files/renovate-post-upgrade.sh        |  4 +---
 .../update-cleanup-some-old-workarounds       |  5 +++++
 .../action-button/stories/index.stories.jsx   |  5 ++---
 .../pricing-card/stories/index.stories.tsx    |  1 -
 .../update-cleanup-some-old-workarounds       |  4 ++++
 .../confirmation-form/index.tsx               |  9 ++++++--
 .../update-cleanup-some-old-workarounds       |  4 ++++
 .../social-logos/src/react/example.tsx        | 22 ++++++++++++++-----
 .../update-cleanup-some-old-workarounds       |  5 +++++
 .../update-cleanup-some-old-workarounds#2     |  4 ++++
 .../js-packages/storybook/storybook/main.js   |  5 ++---
 .../update-cleanup-some-old-workarounds       |  5 +++++
 .../forms/src/contact-form/class-admin.php    |  3 +--
 .../update-cleanup-some-old-workarounds       |  4 ++++
 .../update-cleanup-some-old-workarounds#2     |  4 ++++
 .../src/components/EmailForm/index.tsx        | 12 +++++-----
 .../src/recommended-tags-modal/form-label.tsx |  4 ++--
 tools/js-tools/jest/jest-resolver.js          |  2 --
 18 files changed, 72 insertions(+), 30 deletions(-)
 create mode 100644 projects/js-packages/components/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/js-packages/publicize-components/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/js-packages/social-logos/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds#2
 create mode 100644 projects/packages/forms/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds#2

diff --git a/.github/files/renovate-post-upgrade.sh b/.github/files/renovate-post-upgrade.sh
index 6f6aaef839d24..9c72060afd04d 100755
--- a/.github/files/renovate-post-upgrade.sh
+++ b/.github/files/renovate-post-upgrade.sh
@@ -19,9 +19,7 @@ function die {
 
 # Renovate has a bug where they modify `.npmrc` and don't clean up after themselves,
 # resulting in those modifications being included in the diff.
-# https://github.com/renovatebot/renovate/issues/23528
-# Further, it seems they're reluctant to even admit this is actually a bug, and would
-# rather cast aspersions than collaborate on a fix.
+# https://github.com/renovatebot/renovate/discussions/23489
 # So work around it by manually reverting the file.
 git restore .npmrc
 
diff --git a/projects/js-packages/components/changelog/update-cleanup-some-old-workarounds b/projects/js-packages/components/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..929341656a01b
--- /dev/null
+++ b/projects/js-packages/components/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: https://github.com/storybookjs/storybook/issues/7215 was fixed a while back, remove TODOs. And fix a wrong prop in one story.
+
+
diff --git a/projects/js-packages/components/components/action-button/stories/index.stories.jsx b/projects/js-packages/components/components/action-button/stories/index.stories.jsx
index 191798f5ea6b4..6446569935ac8 100644
--- a/projects/js-packages/components/components/action-button/stories/index.stories.jsx
+++ b/projects/js-packages/components/components/action-button/stories/index.stories.jsx
@@ -5,9 +5,8 @@ import ActionButton from '../index.jsx';
 export default {
 	title: 'JS Packages/Components/Action Button',
 	component: ActionButton,
-	// TODO: Storybook Actions are not working. See https://github.com/storybookjs/storybook/issues/7215
 	argTypes: {
-		onButtonClick: { action: 'clicked' },
+		onClick: { action: 'clicked' },
 	},
 };
 
@@ -15,7 +14,7 @@ export default {
 const Template = args => <ActionButton { ...args } />;
 
 const DefaultArgs = {
-	onButtonClick: action( 'onButtonClick' ),
+	onClick: action( 'onButtonClick' ),
 	displayError: false,
 	isLoading: false,
 	label: 'Action!',
diff --git a/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx b/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx
index e63df12ee9196..ccd27093ac072 100644
--- a/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx
+++ b/projects/js-packages/components/components/pricing-card/stories/index.stories.tsx
@@ -5,7 +5,6 @@ import type { StoryFn, Meta } from '@storybook/react';
 export default {
 	title: 'JS Packages/Components/Pricing Card',
 	component: PricingCard,
-	// TODO: Storybook Actions are not working. See https://github.com/storybookjs/storybook/issues/7215
 	argTypes: {
 		onCtaClick: { action: 'clicked' },
 	},
diff --git a/projects/js-packages/publicize-components/changelog/update-cleanup-some-old-workarounds b/projects/js-packages/publicize-components/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..36b6ed4380dff
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add missing ids to radio buttons in the confirmation form.
diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
index 6ffc93c8ca59b..4851a7c073162 100644
--- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
+++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx
@@ -220,10 +220,15 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir
 									: index === 0;
 
 								return (
-									// eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869
-									<label key={ option.value } className={ styles[ 'account-label' ] } aria-required>
+									<label
+										key={ option.value }
+										htmlFor={ `external_user_ID__${ option.value }` }
+										className={ styles[ 'account-label' ] }
+										aria-required
+									>
 										<input
 											type="radio"
+											id={ `external_user_ID__${ option.value }` }
 											name="external_user_ID"
 											value={ option.value }
 											defaultChecked={ defaultChecked }
diff --git a/projects/js-packages/social-logos/changelog/update-cleanup-some-old-workarounds b/projects/js-packages/social-logos/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..136827ed414a3
--- /dev/null
+++ b/projects/js-packages/social-logos/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update example with ids for jsx-a11y/label-has-associated-control.
diff --git a/projects/js-packages/social-logos/src/react/example.tsx b/projects/js-packages/social-logos/src/react/example.tsx
index b95241d091fb5..f88e81f6c9bce 100644
--- a/projects/js-packages/social-logos/src/react/example.tsx
+++ b/projects/js-packages/social-logos/src/react/example.tsx
@@ -68,17 +68,27 @@ function SocialLogosExample() {
 			<div className="display-control-group">
 				<div className="display-control">
 					<h4>Small icons</h4>
-					{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869 */ }
-					<label className="switch">
-						<input type="checkbox" onChange={ handleSmallIconsToggle } checked={ useSmallIcons } />
+					{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/578 */ }
+					<label className="switch" htmlFor="useSmallIcons">
+						<input
+							id="useSmallIcons"
+							type="checkbox"
+							onChange={ handleSmallIconsToggle }
+							checked={ useSmallIcons }
+						/>
 						<span className="handle"></span>
 					</label>
 				</div>
 				<div className="display-control">
 					<h4>Icon names</h4>
-					{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869 */ }
-					<label className="switch">
-						<input type="checkbox" onChange={ handleIconNamesToggle } checked={ showIconNames } />
+					{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/578 */ }
+					<label className="switch" htmlFor="showIconNames">
+						<input
+							id="showIconNames"
+							type="checkbox"
+							onChange={ handleIconNamesToggle }
+							checked={ showIconNames }
+						/>
 						<span className="handle"></span>
 						<span className="switch-label" data-on="On" data-off="Off"></span>
 					</label>
diff --git a/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds b/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..71c166f9bc1e7
--- /dev/null
+++ b/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Move reference to a Storybook bug to the code specifically for the workaround.
+
+
diff --git a/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds#2 b/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds#2
new file mode 100644
index 0000000000000..a5d74d644253f
--- /dev/null
+++ b/projects/js-packages/storybook/changelog/update-cleanup-some-old-workarounds#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Update Storybook FAQ reference.
diff --git a/projects/js-packages/storybook/storybook/main.js b/projects/js-packages/storybook/storybook/main.js
index 916279931f6d8..9101aadcc1a6f 100644
--- a/projects/js-packages/storybook/storybook/main.js
+++ b/projects/js-packages/storybook/storybook/main.js
@@ -37,8 +37,6 @@ const sbconfig = {
 		'storybook-addon-mock',
 		'@storybook/addon-webpack5-compiler-babel',
 	],
-	// Workaround:
-	// https://github.com/storybookjs/storybook/issues/12270
 	webpackFinal: async config => {
 		// Remove source maps in production builds.
 		if ( process.env.NODE_ENV === 'production' ) {
@@ -63,6 +61,7 @@ const sbconfig = {
 		// Find the DefinePlugin
 		const plugin = config.plugins.find( p => p.definitions?.[ 'process.env' ] );
 		// Add custom env variables
+		// https://github.com/storybookjs/storybook/issues/12270
 		Object.keys( customEnvVariables ).forEach( key => {
 			plugin.definitions[ 'process.env' ][ key ] = JSON.stringify( customEnvVariables[ key ] );
 		} );
@@ -127,7 +126,7 @@ const sbconfig = {
 	},
 	framework: {
 		// Workaround https://github.com/storybookjs/storybook/issues/21710
-		// from https://storybook.js.org/docs/react/faq#how-do-i-fix-module-resolution-while-using-pnpm-plug-n-play
+		// from https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
 		name: path.dirname( require.resolve( '@storybook/react-webpack5/package.json' ) ),
 		options: {},
 	},
diff --git a/projects/packages/forms/changelog/update-cleanup-some-old-workarounds b/projects/packages/forms/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..72bf9471f433c
--- /dev/null
+++ b/projects/packages/forms/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Remove workaround for fixed WPCS bug.
+
+
diff --git a/projects/packages/forms/src/contact-form/class-admin.php b/projects/packages/forms/src/contact-form/class-admin.php
index 5ed484a355738..310caab26401a 100644
--- a/projects/packages/forms/src/contact-form/class-admin.php
+++ b/projects/packages/forms/src/contact-form/class-admin.php
@@ -1411,8 +1411,7 @@ public function grunion_recheck_queue() {
 		$query = 'post_type=feedback&post_status=publish';
 
 		if ( isset( $_POST['limit'] ) && isset( $_POST['offset'] ) ) {
-			// phpcs:ignore Generic.Strings.UnnecessaryStringConcat.Found -- Avoiding https://github.com/WordPress/WordPress-Coding-Standards/issues/2390
-			$query .= '&posts_per' . '_page=' . (int) $_POST['limit'] . '&offset=' . (int) $_POST['offset'];
+			$query .= '&posts_per_page=' . (int) $_POST['limit'] . '&offset=' . (int) $_POST['offset'];
 		}
 
 		$approved_feedbacks = get_posts( $query );
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds b/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds
new file mode 100644
index 0000000000000..e79285e164a8c
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add missing ids in Verbum EmailForm.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds#2 b/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds#2
new file mode 100644
index 0000000000000..3a8d614f310ed
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/update-cleanup-some-old-workarounds#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Explicitly set `htmlFor` in recommended tags modal FormLabel.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx
index 5136b46fa4cf3..a86643b1a5de2 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/src/components/EmailForm/index.tsx
@@ -84,10 +84,10 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 			{ shouldShowEmailForm && (
 				<div className="verbum-form__wrapper">
 					<div className="verbum-form__content">
-						{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869 */ }
-						<label className="verbum__label">
+						<label htmlFor="verbum-email-form-email" className="verbum__label">
 							<Email />
 							<input
+								id="verbum-email-form-email"
 								className={ clsx( 'verbum-form__email', {
 									'invalid-form-data': isValidEmail.value === false && isEmailTouched.value,
 								} ) }
@@ -108,10 +108,10 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 							/>
 						</label>
 
-						{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869 */ }
-						<label className="verbum__label">
+						<label htmlFor="verbum-email-form-name" className="verbum__label">
 							<Name />
 							<input
+								id="verbum-email-form-name"
 								className={ clsx( 'verbum-form__name', {
 									'invalid-form-data': isValidAuthor.value === false && isNameTouched.value,
 								} ) }
@@ -130,10 +130,10 @@ export const EmailForm = ( { shouldShowEmailForm }: EmailFormProps ) => {
 							/>
 						</label>
 
-						{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control -- https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/869 */ }
-						<label className="verbum__label">
+						<label htmlFor="verbum-email-form-website" className="verbum__label">
 							<Website />
 							<input
+								id="verbum-email-form-website"
 								className="verbum-form__website"
 								type="text"
 								spellCheck={ false }
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/form-label.tsx b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/form-label.tsx
index e7a1a874c073e..c4a553f965b30 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/form-label.tsx
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/form-label.tsx
@@ -16,13 +16,13 @@ const FormLabel: FunctionComponent< Props & LabelProps > = ( {
 	required,
 	optional,
 	className, // Via LabelProps
+	htmlFor,
 	...labelProps
 } ) => {
 	const hasChildren: boolean = Children.count( children ) > 0;
 
 	return (
-		// eslint-disable-next-line jsx-a11y/label-has-associated-control
-		<label { ...labelProps } className={ clsx( className, 'form-label' ) }>
+		<label htmlFor={ htmlFor } { ...labelProps } className={ clsx( className, 'form-label' ) }>
 			{ children }
 			{ hasChildren && required && (
 				<small className="form-label__required">{ __( 'Required', 'jetpack-mu-wpcom' ) }</small>
diff --git a/tools/js-tools/jest/jest-resolver.js b/tools/js-tools/jest/jest-resolver.js
index fdebd3e0e72e0..597c41156ba88 100644
--- a/tools/js-tools/jest/jest-resolver.js
+++ b/tools/js-tools/jest/jest-resolver.js
@@ -2,8 +2,6 @@
 // List them here and the resolver will adjust the conditions to resolve them as "node" instead.
 // cf. https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
 const badBrowserPackages = new Set( [
-	// v3 is still supposed to be commonjs-compatible. https://github.com/ai/nanoid/issues/462
-	'nanoid',
 	// https://github.com/LeaVerou/parsel/issues/79
 	'parsel-js',
 ] );