From 3efdf0139906011c3010daa6f17ca4df3d1a8d42 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <anomiex@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:01:33 -0400
Subject: [PATCH] eslint: Enable
 `@wordpress/no-base-control-with-label-without-id` rule (#39708)

When `<BaseControl>` is passed both a `label` and `id`, it makes an HTML
`<label>` so clicking the label focuses the contained element with the
corresponding `id`. Leaving off the `id` breaks that, so this rule flags
the situation for fixing.

It turns out, though, that everything it flagged in the monorepo was a
false positive.

A few cases we had something like
`<BaseControl label><TextControl /></BaseControl>`. There's no reason
for that when we can do `<TextControl label />` instead and get the
expected click-label-to-focus behavior.

The rest of the cases we were using `<BaseControl label>` to get a label
for something more complex, where there's really no `id` that makes
sense. In this case the documented thing to do is apparently
`<BaseControl><BaseControl.VisualLabel>label</BaseControl.VisualLabel></BaseControl>`
which does exactly the same thing that `<BaseControl label>` with no
`id` does internally.
---
 ...ress-no-base-control-with-label-without-id |  5 ++++
 .../generated-image-preview/index.js          |  8 ++---
 .../src/components/media-section/index.js     |  7 ++---
 .../social-image-generator/panel/modal.js     |  7 ++---
 ...ress-no-base-control-with-label-without-id |  5 ++++
 .../components/jetpack-field-width.js         |  2 +-
 ...ress-no-base-control-with-label-without-id |  5 ++++
 .../videopress-uploader/uploader-editor.js    |  5 +++-
 ...ress-no-base-control-with-label-without-id |  5 ++++
 .../components/feedback-control/index.tsx     |  3 +-
 .../extensions/blocks/ai-chat/controls.js     | 29 +++++++------------
 .../blocks/map/location-search/mapbox.js      |  7 +++--
 .../blocks/map/location-search/mapkit.js      |  7 +++--
 .../whatsapp-button/configuration.js          |  2 +-
 .../blocks/simple-payments/controls.js        | 16 ++++------
 .../simple-payments/deprecated/v2/edit.js     | 18 +++++-------
 .../extensions/blocks/videopress/edit.js      |  8 ++---
 .../videopress/uploading-editor/index.js      |  5 +++-
 .../ai-assistant-plugin-sidebar/index.tsx     | 16 +++++++---
 .../components/usage-bar/index.tsx            |  3 +-
 .../components/ai-excerpt-control/index.tsx   |  6 ++--
 .../jetpack/extensions/shared/width-panel.js  |  5 +++-
 tools/js-tools/eslintrc/base.js               |  1 -
 23 files changed, 95 insertions(+), 80 deletions(-)
 create mode 100644 projects/js-packages/publicize-components/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
 create mode 100644 projects/packages/forms/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
 create mode 100644 projects/packages/videopress/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
 create mode 100644 projects/plugins/jetpack/changelog/add-eslint-wordpress-no-base-control-with-label-without-id

diff --git a/projects/js-packages/publicize-components/changelog/add-eslint-wordpress-no-base-control-with-label-without-id b/projects/js-packages/publicize-components/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
new file mode 100644
index 0000000000000..f19346531047d
--- /dev/null
+++ b/projects/js-packages/publicize-components/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Clean up `<BaseControl label>` without `id`. Should be no change in functionality.
+
+
diff --git a/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js b/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
index 0bec1f9013d68..925683f4a3e56 100644
--- a/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
+++ b/projects/js-packages/publicize-components/src/components/generated-image-preview/index.js
@@ -113,10 +113,10 @@ export default function GeneratedImagePreview( {
 
 	return (
 		<ThemeProvider>
-			<BaseControl
-				__nextHasNoMarginBottom={ true }
-				label={ _x( 'Preview', 'Heading for the generated preview image', 'jetpack' ) }
-			>
+			<BaseControl __nextHasNoMarginBottom={ true }>
+				<BaseControl.VisualLabel>
+					{ _x( 'Preview', 'Heading for the generated preview image', 'jetpack' ) }
+				</BaseControl.VisualLabel>
 				<div className={ styles.container }>
 					<img
 						className={ clsx( {
diff --git a/projects/js-packages/publicize-components/src/components/media-section/index.js b/projects/js-packages/publicize-components/src/components/media-section/index.js
index dab833db5e5b6..0f5a88461d68f 100644
--- a/projects/js-packages/publicize-components/src/components/media-section/index.js
+++ b/projects/js-packages/publicize-components/src/components/media-section/index.js
@@ -68,11 +68,8 @@ export default function MediaSection( {
 
 	return (
 		<ThemeProvider>
-			<BaseControl
-				__nextHasNoMarginBottom={ true }
-				label={ __( 'Attached Media', 'jetpack' ) }
-				className={ styles.wrapper }
-			>
+			<BaseControl __nextHasNoMarginBottom={ true } className={ styles.wrapper }>
+				<BaseControl.VisualLabel>{ __( 'Attached Media', 'jetpack' ) }</BaseControl.VisualLabel>
 				{ renderHeaderSection() }
 				<MediaWrapper { ...mediaWrapperProps }>
 					<MediaPicker
diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js
index 1866770663bad..ed6f8b475f6f0 100644
--- a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js
+++ b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/modal.js
@@ -93,11 +93,8 @@ const SocialImageGeneratorSettingsModal = ( { onClose } ) => {
 						'jetpack'
 					) }
 				/>
-				<BaseControl
-					__nextHasNoMarginBottom={ true }
-					label={ __( 'Templates', 'jetpack' ) }
-					className={ styles.templateControl }
-				>
+				<BaseControl __nextHasNoMarginBottom={ true } className={ styles.templateControl }>
+					<BaseControl.VisualLabel>{ __( 'Templates', 'jetpack' ) }</BaseControl.VisualLabel>
 					<TemplatePicker value={ localTemplate } onTemplateSelected={ setEditedTemplate } />
 				</BaseControl>
 				<Button onClick={ onClose } variant="tertiary">
diff --git a/projects/packages/forms/changelog/add-eslint-wordpress-no-base-control-with-label-without-id b/projects/packages/forms/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
new file mode 100644
index 0000000000000..f19346531047d
--- /dev/null
+++ b/projects/packages/forms/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Clean up `<BaseControl label>` without `id`. Should be no change in functionality.
+
+
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js
index 92ac3a8b0c8ae..c6c3eaf69fc19 100644
--- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js
+++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js
@@ -4,13 +4,13 @@ import { __ } from '@wordpress/i18n';
 export default function JetpackFieldWidth( { setAttributes, width } ) {
 	return (
 		<BaseControl
-			label={ __( 'Field Width', 'jetpack-forms' ) }
 			help={ __(
 				'Adjust the width of the field to include multiple fields on a single line.',
 				'jetpack-forms'
 			) }
 			className="jetpack-field-label__width"
 		>
+			<BaseControl.VisualLabel>{ __( 'Field Width', 'jetpack-forms' ) }</BaseControl.VisualLabel>
 			<ButtonGroup aria-label={ __( 'Field Width', 'jetpack-forms' ) }>
 				{ [ 25, 50, 75, 100 ].map( widthValue => {
 					return (
diff --git a/projects/packages/videopress/changelog/add-eslint-wordpress-no-base-control-with-label-without-id b/projects/packages/videopress/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
new file mode 100644
index 0000000000000..f19346531047d
--- /dev/null
+++ b/projects/packages/videopress/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Clean up `<BaseControl label>` without `id`. Should be no change in functionality.
+
+
diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
index 6806537b8c3b5..9488d3f91140d 100644
--- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
+++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/uploader-editor.js
@@ -88,7 +88,10 @@ const UploadingEditor = props => {
 
 	return (
 		<div className="uploading-editor">
-			<BaseControl label={ __( 'Video poster (optional)', 'jetpack-videopress-pkg' ) }>
+			<BaseControl>
+				<BaseControl.VisualLabel>
+					{ __( 'Video poster (optional)', 'jetpack-videopress-pkg' ) }
+				</BaseControl.VisualLabel>
 				<Poster
 					file={ file }
 					videoPosterImageData={ videoPosterImageData }
diff --git a/projects/plugins/jetpack/changelog/add-eslint-wordpress-no-base-control-with-label-without-id b/projects/plugins/jetpack/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
new file mode 100644
index 0000000000000..146a89ee3b33a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-eslint-wordpress-no-base-control-with-label-without-id
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Clean up `<BaseControl label>` without `id`. Should be no change in functionality, other than in a few cases being able to click the label to focus the field now.
+
+
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/feedback-control/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/feedback-control/index.tsx
index 7656ae66ca74b..42e3bf61ea97e 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/feedback-control/index.tsx
+++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/components/feedback-control/index.tsx
@@ -14,7 +14,8 @@ function FeedbackControl() {
 
 	return (
 		<div className="jetpack-ai-feedback-control">
-			<BaseControl label={ __( 'Feedback', 'jetpack' ) }>
+			<BaseControl>
+				<BaseControl.VisualLabel>{ __( 'Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
 				<p>
 					{ __(
 						'Your feedback is valuable in our commitment to refine and improve this feature.',
diff --git a/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js b/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js
index 1b6cfb306c694..a28bc1e3a5a95 100644
--- a/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js
+++ b/projects/plugins/jetpack/extensions/blocks/ai-chat/controls.js
@@ -1,11 +1,5 @@
 import { InspectorAdvancedControls, InspectorControls } from '@wordpress/block-editor';
-import {
-	BaseControl,
-	PanelBody,
-	TextControl,
-	TextareaControl,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, TextControl, TextareaControl, ToggleControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { DEFAULT_PLACEHOLDER } from './constants';
@@ -26,28 +20,25 @@ export function AiChatControls( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack' ) } initialOpen={ false }>
-					<BaseControl
+					<TextControl
 						label={ __( 'Placeholder Text', 'jetpack' ) }
 						className="jetpack-ai-chat__ask-button-text"
-					>
-						<TextControl
-							placeholder={ DEFAULT_PLACEHOLDER }
-							onChange={ newPlaceholder => setAttributes( { placeholder: newPlaceholder } ) }
-							value={ placeholder }
-						/>
-					</BaseControl>
+						placeholder={ DEFAULT_PLACEHOLDER }
+						onChange={ newPlaceholder => setAttributes( { placeholder: newPlaceholder } ) }
+						value={ placeholder }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<InspectorAdvancedControls>
-				<BaseControl
+				<TextareaControl
 					label={ __( 'Additional instructions', 'jetpack' ) }
 					help={ __(
 						'Give Jetpack AI additional instructions for answer length, format, and tone.',
 						'jetpack'
 					) }
-				>
-					<TextareaControl value={ promptOverride } onChange={ setPromptOverride } />
-				</BaseControl>
+					value={ promptOverride }
+					onChange={ setPromptOverride }
+				/>
 				<ToggleControl
 					label={ __( 'Show copy answer button.', 'jetpack' ) }
 					help={ __( 'Allow users to easily copy the answer.', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapbox.js b/projects/plugins/jetpack/extensions/blocks/map/location-search/mapbox.js
index 75ebd48cb1f37..d17a9dd07354a 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapbox.js
+++ b/projects/plugins/jetpack/extensions/blocks/map/location-search/mapbox.js
@@ -1,4 +1,4 @@
-import { BaseControl, TextControl } from '@wordpress/components';
+import { TextControl } from '@wordpress/components';
 import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Lookup from '../lookup';
@@ -74,10 +74,11 @@ export class MapboxLocationSearch extends Component {
 		const { label } = this.props;
 		return (
 			<div ref={ this.containerRef }>
-				<BaseControl label={ label } className="components-location-search">
+				<div className="components-location-search">
 					<Lookup completer={ this.autocompleter } onReset={ this.onReset }>
 						{ ( { isExpanded, listBoxId, activeId, onChange, onKeyDown } ) => (
 							<TextControl
+								label={ label }
 								placeholder={ placeholderText }
 								ref={ this.textRef }
 								onChange={ onChange }
@@ -88,7 +89,7 @@ export class MapboxLocationSearch extends Component {
 							/>
 						) }
 					</Lookup>
-				</BaseControl>
+				</div>
 			</div>
 		);
 	}
diff --git a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js b/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js
index 06ad73be79362..e8a9c7e259052 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js
+++ b/projects/plugins/jetpack/extensions/blocks/map/location-search/mapkit.js
@@ -1,4 +1,4 @@
-import { BaseControl, TextControl } from '@wordpress/components';
+import { TextControl } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Lookup from '../lookup';
@@ -88,10 +88,11 @@ const MapkitLocationSearch = ( { label, onAddPoint } ) => {
 
 	return (
 		<div ref={ containerRef }>
-			<BaseControl label={ label } className="components-location-search">
+			<div className="components-location-search">
 				<Lookup completer={ autocompleter } onReset={ onReset }>
 					{ ( { isExpanded, listBoxId, activeId, onChange, onKeyDown } ) => (
 						<TextControl
+							label={ label }
 							placeholder={ placeholderText }
 							ref={ textRef }
 							onChange={ onChange }
@@ -102,7 +103,7 @@ const MapkitLocationSearch = ( { label, onAddPoint } ) => {
 						/>
 					) }
 				</Lookup>
-			</BaseControl>
+			</div>
 		</div>
 	);
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
index 04d9e1b9b6d87..d13a1b460df7d 100644
--- a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
+++ b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/configuration.js
@@ -75,13 +75,13 @@ export default function WhatsAppButtonConfiguration( { attributes, setAttributes
 		<>
 			<BaseControl
 				__nextHasNoMarginBottom={ true }
-				label={ __( 'Phone Number', 'jetpack' ) }
 				help={ __(
 					'Enter the phone number you use for WhatsApp and would like to be contacted on.',
 					'jetpack'
 				) }
 				className="jetpack-whatsapp-button__phonenumber"
 			>
+				<BaseControl.VisualLabel>{ __( 'Phone Number', 'jetpack' ) }</BaseControl.VisualLabel>
 				<SelectControl
 					__nextHasNoMarginBottom={ true }
 					label={ __( 'Country code', 'jetpack' ) }
diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/controls.js b/projects/plugins/jetpack/extensions/blocks/simple-payments/controls.js
index 26afaef0f36c2..735425077ab92 100644
--- a/projects/plugins/jetpack/extensions/blocks/simple-payments/controls.js
+++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/controls.js
@@ -1,10 +1,10 @@
-import { BaseControl, PanelBody, TextControl } from '@wordpress/components';
+import { PanelBody, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export function PanelControls( { setAttributes, postLinkText } ) {
 	return (
 		<PanelBody title={ __( 'Settings', 'jetpack' ) } initialOpen={ false }>
-			<BaseControl
+			<TextControl
 				__nextHasNoMarginBottom={ true }
 				label={ __( 'Purchase link text', 'jetpack' ) }
 				help={ __(
@@ -12,14 +12,10 @@ export function PanelControls( { setAttributes, postLinkText } ) {
 					'jetpack'
 				) }
 				className="jetpack-simple-payments__purchase-link-text"
-			>
-				<TextControl
-					__nextHasNoMarginBottom={ true }
-					placeholder={ __( 'Click here to purchase', 'jetpack' ) }
-					onChange={ newPostLinkText => setAttributes( { postLinkText: newPostLinkText } ) }
-					value={ postLinkText }
-				/>
-			</BaseControl>
+				placeholder={ __( 'Click here to purchase', 'jetpack' ) }
+				onChange={ newPostLinkText => setAttributes( { postLinkText: newPostLinkText } ) }
+				value={ postLinkText }
+			/>
 		</PanelBody>
 	);
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js b/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
index f10b7e37c09de..5ab00fa397164 100644
--- a/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/deprecated/v2/edit.js
@@ -1,7 +1,6 @@
 import { getCurrencyDefaults } from '@automattic/format-currency';
 import { InspectorControls } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	Disabled,
 	ExternalLink,
 	PanelBody,
@@ -412,22 +411,19 @@ class SimplePaymentsEdit extends Component {
 	renderSettings = () => (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings', 'jetpack' ) } initialOpen={ false }>
-				<BaseControl
+				<TextControl
 					label={ __( 'Purchase link text', 'jetpack' ) }
 					help={ __(
 						'Enter the text you want to display on a purchase link used as fallback when the PayPal button cannot be used (e.g. emails, AMP, etc.)',
 						'jetpack'
 					) }
 					className="jetpack-simple-payments__purchase-link-text"
-				>
-					<TextControl
-						placeholder={ __( 'Click here to purchase', 'jetpack' ) }
-						onChange={ newPostLinkText =>
-							this.props.setAttributes( { postLinkText: newPostLinkText } )
-						}
-						value={ this.props.attributes.postLinkText }
-					/>
-				</BaseControl>
+					placeholder={ __( 'Click here to purchase', 'jetpack' ) }
+					onChange={ newPostLinkText =>
+						this.props.setAttributes( { postLinkText: newPostLinkText } )
+					}
+					value={ this.props.attributes.postLinkText }
+				/>
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
index 2858aa73e53eb..ac008dd090fd4 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/edit.js
@@ -567,10 +567,10 @@ const VideoPressEdit = CoreVideoEdit =>
 								help={ this.getPreloadHelp() }
 							/>
 							<MediaUploadCheck>
-								<BaseControl
-									className="editor-video-poster-control"
-									label={ __( 'Poster Image', 'jetpack' ) }
-								>
+								<BaseControl className="editor-video-poster-control">
+									<BaseControl.VisualLabel>
+										{ __( 'Poster Image', 'jetpack' ) }
+									</BaseControl.VisualLabel>
 									<MediaUpload
 										title={ __( 'Select Poster Image', 'jetpack' ) }
 										onSelect={ this.onSelectPoster }
diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
index 8735d7d8ecd01..23447babdc06d 100644
--- a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/index.js
@@ -129,7 +129,10 @@ export const UploadingEditor = props => {
 						value={ title }
 					/>
 					<div className="uploading-editor__content">
-						<BaseControl label={ __( 'Video poster (optional)', 'jetpack' ) }>
+						<BaseControl>
+							<BaseControl.VisualLabel>
+								{ __( 'Video poster (optional)', 'jetpack' ) }
+							</BaseControl.VisualLabel>
 							{ canDisplayThumbnailScrubber ? (
 								<>
 									<div className="uploading-editor__video-container">
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
index a7be8feb411de..c3d44c1491ac5 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
@@ -90,28 +90,36 @@ const JetpackAndSettingsContent = ( {
 
 			{ canWriteBriefBeEnabled() && isBreveAvailable && (
 				<PanelRow>
-					<BaseControl label={ __( 'Write Brief with AI (BETA)', 'jetpack' ) }>
+					<BaseControl>
+						<BaseControl.VisualLabel>
+							{ __( 'Write Brief with AI (BETA)', 'jetpack' ) }
+						</BaseControl.VisualLabel>
 						<Breve />
 					</BaseControl>
 				</PanelRow>
 			) }
 
 			<PanelRow className="jetpack-ai-sidebar__feature-section">
-				<BaseControl label={ __( 'AI Feedback', 'jetpack' ) }>
+				<BaseControl>
+					<BaseControl.VisualLabel>{ __( 'AI Feedback', 'jetpack' ) }</BaseControl.VisualLabel>
 					<Feedback placement={ placement } busy={ false } disabled={ requireUpgrade } />
 				</BaseControl>
 			</PanelRow>
 
 			{ isAITitleOptimizationAvailable && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
-					<BaseControl label={ titleOptimizationSectionLabel }>
+					<BaseControl>
+						<BaseControl.VisualLabel>{ titleOptimizationSectionLabel }</BaseControl.VisualLabel>
 						<TitleOptimization placement={ placement } busy={ false } disabled={ requireUpgrade } />
 					</BaseControl>
 				</PanelRow>
 			) }
 			{ isAIFeaturedImageAvailable && (
 				<PanelRow className="jetpack-ai-sidebar__feature-section">
-					<BaseControl label={ __( 'AI Featured Image', 'jetpack' ) }>
+					<BaseControl>
+						<BaseControl.VisualLabel>
+							{ __( 'AI Featured Image', 'jetpack' ) }
+						</BaseControl.VisualLabel>
 						<FeaturedImage busy={ false } disabled={ requireUpgrade } placement={ placement } />
 					</BaseControl>
 				</PanelRow>
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
index 769fd3ebffe5a..13499251344f0 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/index.tsx
@@ -121,7 +121,8 @@ function UsageControl( {
 	);
 
 	return (
-		<BaseControl help={ help } label={ __( 'Available Requests', 'jetpack' ) }>
+		<BaseControl help={ help }>
+			<BaseControl.VisualLabel>{ __( 'Available Requests', 'jetpack' ) }</BaseControl.VisualLabel>
 			{ ! loading && usageDisplay }
 			{ loading && loadingPlaceholder }
 		</BaseControl>
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-content-lens/components/ai-excerpt-control/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-content-lens/components/ai-excerpt-control/index.tsx
index 8ffcd3bf9b4a9..692c30e32761d 100644
--- a/projects/plugins/jetpack/extensions/plugins/ai-content-lens/components/ai-excerpt-control/index.tsx
+++ b/projects/plugins/jetpack/extensions/plugins/ai-content-lens/components/ai-excerpt-control/index.tsx
@@ -90,10 +90,8 @@ export function AiExcerptControl( {
 
 	return (
 		<div className="jetpack-ai-generate-excerpt-control">
-			<BaseControl
-				className="jetpack-ai-generate-excerpt-control__header"
-				label={ __( 'Settings', 'jetpack' ) }
-			>
+			<BaseControl className="jetpack-ai-generate-excerpt-control__header">
+				<BaseControl.VisualLabel>{ __( 'Settings', 'jetpack' ) }</BaseControl.VisualLabel>
 				<Button
 					label={ __( 'Advanced AI options', 'jetpack' ) }
 					icon={ aiAssistantIcon }
diff --git a/projects/plugins/jetpack/extensions/shared/width-panel.js b/projects/plugins/jetpack/extensions/shared/width-panel.js
index 3cb7918d54917..c6a91a784ed96 100644
--- a/projects/plugins/jetpack/extensions/shared/width-panel.js
+++ b/projects/plugins/jetpack/extensions/shared/width-panel.js
@@ -56,7 +56,10 @@ export function WidthControl( { align, width, onChange, showLabel = true } ) {
 	}
 
 	return (
-		<BaseControl __nextHasNoMarginBottom={ true } label={ showLabel && __( 'Width', 'jetpack' ) }>
+		<BaseControl __nextHasNoMarginBottom={ true }>
+			{ showLabel && (
+				<BaseControl.VisualLabel>{ __( 'Width', 'jetpack' ) }</BaseControl.VisualLabel>
+			) }
 			<div
 				className={ clsx( 'jetpack-block-width-controls', {
 					'is-aligned': isAlignedLeftOrRight,
diff --git a/tools/js-tools/eslintrc/base.js b/tools/js-tools/eslintrc/base.js
index 787248e1cda3a..646d78d08122d 100644
--- a/tools/js-tools/eslintrc/base.js
+++ b/tools/js-tools/eslintrc/base.js
@@ -210,6 +210,5 @@ module.exports = {
 		// 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',
-		'@wordpress/no-base-control-with-label-without-id': 'off',
 	},
 };