Commit c39e8805d0c for woocommerce

commit c39e8805d0cfa2111589c0c7a66f6f7420f5f931
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date:   Fri Jul 3 08:53:57 2026 +0200

    Fix hierarchical selection and expansion in SearchListControl for multi-level categories (#66023)

    * Fix hierarchical selection and expansion in SearchListControl for multi-level categories

    * Accessibility fixes

    * Add tests

    * Add changelog

    * Update snapshots

    * Fix tests

    * Fix selecting Product Attributes

    * Simplify code

    * Fix attribute selectors not looking selected when required

    * Add tests to isSelectable prop

    * Make whole row clickable

    * Update e2e tests

    * Fix issue if term and attribute ids collide

    * Set expanded panel id to null when none is expanded instead to -1

    * Minor improvements

    * Harden checks that IDs are number

    * Remove unnecessary stopPropagation

    * Set some optional types to undefined

    * Fix weird behaviors when expanding and collapsing items

    * Prevent collapsing/expanding rows when checking/unchecking the checkbox using the keyboard

    * Make check and uncheck utils more specific

    * Make sure we accept string IDs

    * Linting

    * Fix some oddities in ProductControl

    * Pass className and disabled props conditionally

diff --git a/plugins/woocommerce/changelog/add-search-list-control-depth-fixes b/plugins/woocommerce/changelog/add-search-list-control-depth-fixes
new file mode 100644
index 00000000000..f2076690961
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-search-list-control-depth-fixes
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix hierarchical selection and expansion in SearchListControl for multi-level categories
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
index 2ab5498159a..c3975c62230 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/expandable-search-list-item/expandable-search-list-item.tsx
@@ -24,11 +24,11 @@ const ExpandableSearchListItem = ( {
 			<SearchListItem
 				{ ...rest }
 				key={ item.id }
-				className={ className }
+				{ ...( className && { className } ) }
 				isSelected={ isSelected }
 				item={ item }
 				onSelect={ onSelect }
-				disabled={ disabled }
+				{ ...( disabled && { disabled } ) }
 			/>
 			{ isSelected && isLoading && (
 				<div
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-attribute-term-control/index.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
index d5ebcfc6f64..34c5534d343 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-attribute-term-control/index.tsx
@@ -18,6 +18,7 @@ import {
 	SearchListItem as SearchListItemProps,
 } from '@woocommerce/editor-components/search-list-control/types';
 import { convertAttributeObjectToSearchItem } from '@woocommerce/utils';
+import type { AttributeObject, AttributeTerm } from '@woocommerce/types';

 /**
  * Internal dependencies
@@ -41,6 +42,26 @@ interface Props
 	selected: { id: number }[];
 }

+/**
+ * Attribute rows use negative IDs so they do not collide with term IDs in the
+ * flat list consumed by SearchListControl (keys, expansion, buildTermsTree).
+ */
+const toAttributeListItem = (
+	attribute: AttributeObject
+): SearchListItemProps => ( {
+	...convertAttributeObjectToSearchItem( attribute ),
+	id: -attribute.id,
+	parent: 0,
+} );
+
+const toTermListItem = (
+	term: AttributeTerm,
+	attributeId: number
+): SearchListItemProps => ( {
+	...convertAttributeObjectToSearchItem( term ),
+	parent: -attributeId,
+} );
+
 const ProductAttributeTermControl = ( {
 	onChange,
 	onOperatorChange,
@@ -73,6 +94,7 @@ const ProductAttributeTermControl = ( {
 					className={ clsx( classes ) }
 					item={ item }
 					isLoading={ isLoadingAttributes }
+					isSelectable={ false }
 					disabled={ item.count === 0 }
 					name={ `attributes-${ instanceId }` }
 					countLabel={ sprintf(
@@ -123,12 +145,12 @@ const ProductAttributeTermControl = ( {
 	};

 	const list = productsAttributes.reduce( ( acc, curr ) => {
-		const { terms, ...props } = curr;
+		const { terms, ...attribute } = curr;

 		return [
 			...acc,
-			convertAttributeObjectToSearchItem( props ),
-			...terms.map( convertAttributeObjectToSearchItem ),
+			toAttributeListItem( attribute ),
+			...terms.map( ( term ) => toTermListItem( term, attribute.id ) ),
 		];
 	}, [] as SearchListItemProps[] );

diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/index.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/index.tsx
index 8c5c7540889..75dd2fe4570 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/index.tsx
@@ -32,6 +32,7 @@ import ExpandableSearchListItem from '@woocommerce/editor-components/expandable-
  * Internal dependencies
  */
 import './style.scss';
+import { isExpandedOrDescendantIsExpanded } from '../search-list-control/utils';

 interface ProductControlProps {
 	/**
@@ -116,7 +117,23 @@ const ProductControl = (
 	const renderItemWithVariations = (
 		args: RenderItemArgs< ProductResponseItem >
 	) => {
-		const { item, search, depth = 0, isSelected, onSelect } = args;
+		const {
+			item,
+			search,
+			depth = 0,
+			isSelected,
+			onSelect,
+			useExpandedPanelId,
+		} = args;
+		const [ expandedPanelId, setExpandedPanelId ] = useExpandedPanelId ?? [
+			null,
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			() => {},
+		];
+		const isExpanded = isExpandedOrDescendantIsExpanded(
+			item,
+			expandedPanelId
+		);
 		const variationsCount =
 			item.details?.variations && Array.isArray( item.details.variations )
 				? item.details.variations.length
@@ -149,6 +166,9 @@ const ProductControl = (
 					onSelect={ () => {
 						return () => {
 							onSelect( item )();
+							if ( ! isExpanded ) {
+								setExpandedPanelId( item.id );
+							}
 						};
 					} }
 					isLoading={ isLoading || variationsLoading }
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/style.scss b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/style.scss
index ad50ccedd19..e0e4cc68a5a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/product-control/style.scss
@@ -39,7 +39,7 @@
 		background-size: contain;
 	}

-	&.depth-0.is-variable.is-selected::after {
+	&.depth-0.is-variable.is-expanded::after {
 		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
 	}
 }
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/item.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/item.tsx
index 4f28595c081..506f1bc7e87 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/item.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/item.tsx
@@ -3,7 +3,7 @@
  */
 import clsx from 'clsx';
 import { CheckboxControl } from '@wordpress/components';
-import { useCallback, useEffect } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { arrayDifferenceBy, arrayUnionBy } from '@woocommerce/utils';
 import { decodeEntities } from '@wordpress/html-entities';

@@ -14,7 +14,44 @@ import type {
 	RenderItemArgs,
 	SearchListItem as SearchListItemProps,
 } from './types';
-import { getHighlightedName, getBreadcrumbsForDisplay } from './utils';
+import {
+	getHighlightedName,
+	getBreadcrumbsForDisplay,
+	isExpandedOrDescendantIsExpanded,
+} from './utils';
+
+const getItemDescendants = (
+	item: SearchListItemProps
+): SearchListItemProps[] => {
+	const descendants = item.children?.map( ( child ) => [
+		child,
+		...getItemDescendants( child ),
+	] );
+	if ( ! descendants ) {
+		return [];
+	}
+	return descendants.flat();
+};
+
+const areSomeDescendantsSelected = (
+	item: SearchListItemProps,
+	selected: SearchListItemProps[]
+): boolean => {
+	const descendants = getItemDescendants( item );
+	return descendants.some( ( descendant ) =>
+		selected.find( ( selectedItem ) => selectedItem.id === descendant.id )
+	);
+};
+
+const areAllDescendantsSelected = (
+	item: SearchListItemProps,
+	selected: SearchListItemProps[]
+): boolean => {
+	const descendants = getItemDescendants( item );
+	return descendants.every( ( descendant ) =>
+		selected.find( ( selectedItem ) => selectedItem.id === descendant.id )
+	);
+};

 const Count = ( { label }: { label: string | React.ReactNode | number } ) => {
 	return (
@@ -45,8 +82,10 @@ export const SearchListItem = < T extends object = object >( {
 	className,
 	depth = 0,
 	controlId = '',
+	disabled = false,
 	item,
 	isSelected,
+	isSelectable = true,
 	isSingle,
 	onSelect,
 	search = '',
@@ -62,7 +101,10 @@ export const SearchListItem = < T extends object = object >( {
 		item.count !== null;
 	const hasBreadcrumbs = !! item.breadcrumbs?.length;
 	const hasChildren = !! item.children?.length;
-	const isExpanded = expandedPanelId === item.id;
+	const isExpanded = isExpandedOrDescendantIsExpanded(
+		item,
+		expandedPanelId
+	);
 	const classes = clsx(
 		[ 'woocommerce-search-list__item', `depth-${ depth }`, className ],
 		{
@@ -74,18 +116,34 @@ export const SearchListItem = < T extends object = object >( {
 		}
 	);

-	useEffect( () => {
-		if ( hasChildren && isSelected ) {
-			setExpandedPanelId( item.id as number );
-		}
-	}, [ item, hasChildren, isSelected, setExpandedPanelId ] );
-
 	const name = props.name || `search-list-item-${ controlId }`;
 	const id = `${ name }-${ item.id }`;

 	const togglePanel = useCallback( () => {
-		setExpandedPanelId( isExpanded ? -1 : Number( item.id ) );
-	}, [ isExpanded, item.id, setExpandedPanelId ] );
+		if (
+			! isExpanded &&
+			( typeof item.id === 'number' || typeof item.id === 'string' )
+		) {
+			setExpandedPanelId( item.id );
+			return;
+		}
+		if (
+			item.parent &&
+			( typeof item.parent === 'number' ||
+				typeof item.parent === 'string' )
+		) {
+			setExpandedPanelId( item.parent );
+			return;
+		}
+		setExpandedPanelId( null );
+	}, [ isExpanded, item.id, item.parent, setExpandedPanelId ] );
+
+	// Non-selectable items (like Product Attributes) should look selected when
+	// all their descendants are selected, but look indeterminate when only some
+	// are selected.
+	const looksSelected =
+		( isSelected || ! isSelectable ) &&
+		areAllDescendantsSelected( item, selected );

 	return hasChildren ? (
 		<div
@@ -104,9 +162,15 @@ export const SearchListItem = < T extends object = object >( {
 						id={ id }
 						name={ name }
 						value={ item.value }
-						onChange={ onSelect( item ) }
+						onChange={ () => {
+							onSelect( item )();
+							if ( ! isExpanded ) {
+								setExpandedPanelId( item.id );
+							}
+						} }
 						onClick={ ( e ) => e.stopPropagation() }
 						checked={ isSelected }
+						disabled={ disabled }
 						className="woocommerce-search-list__item-input"
 						{ ...props }
 					/>
@@ -121,29 +185,34 @@ export const SearchListItem = < T extends object = object >( {
 				<>
 					<CheckboxControl
 						className="woocommerce-search-list__item-input"
-						checked={ isSelected }
-						{ ...( ! isSelected &&
-						// We know that `item.children` is not `undefined` because
-						// we are here only if `hasChildren` is `true`.
-						( item.children as SearchListItemProps[] ).some(
-							( child ) =>
-								selected.find(
-									( selectedItem ) =>
-										selectedItem.id === child.id
-								)
-						)
-							? { indeterminate: true }
-							: {} ) }
+						checked={ looksSelected }
+						disabled={ disabled }
+						indeterminate={
+							! looksSelected &&
+							( isSelected ||
+								areSomeDescendantsSelected( item, selected ) )
+						}
 						label={ getHighlightedName(
 							decodeEntities( item.name ),
 							search
 						) }
+						onClick={ ( e ) => e.stopPropagation() }
+						onKeyDown={ ( e ) => e.stopPropagation() }
 						onChange={ () => {
-							if ( isSelected ) {
+							const descendants = getItemDescendants( item );
+							const itemsToToggle = isSelectable
+								? [ item, ...descendants ]
+								: [ ...descendants ];
+							const allDescendantsAreSelected =
+								areAllDescendantsSelected( item, selected );
+							if (
+								( isSelectable && isSelected ) ||
+								( ! isSelectable && allDescendantsAreSelected )
+							) {
 								onSelect(
 									arrayDifferenceBy(
 										selected,
-										item.children as SearchListItemProps[],
+										itemsToToggle,
 										'id'
 									)
 								)();
@@ -151,13 +220,16 @@ export const SearchListItem = < T extends object = object >( {
 								onSelect(
 									arrayUnionBy(
 										selected,
-										item.children as SearchListItemProps[],
+										itemsToToggle,
 										'id'
 									)
 								)();
+								if ( ! isExpanded ) {
+									setExpandedPanelId( item.id );
+								}
 							}
 						} }
-						onClick={ ( e ) => e.stopPropagation() }
+						__nextHasNoMarginBottom={ true }
 					/>

 					{ showCount ? (
@@ -167,7 +239,13 @@ export const SearchListItem = < T extends object = object >( {
 			) }
 		</div>
 	) : (
-		<label htmlFor={ id } className={ classes }>
+		// Items can be enabled via the radios and checkboxes. But we make the
+		// whole row clickable for convenience.
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+		<div
+			className={ classes }
+			onClick={ disabled ? undefined : onSelect( item ) }
+		>
 			{ isSingle ? (
 				<>
 					<input
@@ -178,10 +256,14 @@ export const SearchListItem = < T extends object = object >( {
 						value={ item.value }
 						onChange={ onSelect( item ) }
 						checked={ isSelected }
+						disabled={ disabled }
 						className="woocommerce-search-list__item-input"
-					></input>
+						onClick={ ( e ) => e.stopPropagation() }
+					/>

-					<ItemLabel item={ item } search={ search } />
+					<label htmlFor={ id }>
+						<ItemLabel item={ item } search={ search } />
+					</label>
 				</>
 			) : (
 				<CheckboxControl
@@ -194,13 +276,21 @@ export const SearchListItem = < T extends object = object >( {
 						decodeEntities( item.name ),
 						search
 					) }
-					onChange={ onSelect( item ) }
+					onChange={ () => {
+						onSelect( item )();
+						if ( ! isExpanded ) {
+							setExpandedPanelId( item.id );
+						}
+					} }
 					checked={ isSelected }
+					disabled={ disabled }
+					__nextHasNoMarginBottom={ true }
+					onClick={ ( e ) => e.stopPropagation() }
 				/>
 			) }

 			{ showCount ? <Count label={ countLabel || item.count } /> : null }
-		</label>
+		</div>
 	);
 };

diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
index 19dfbbaae5f..99a0f4d41ea 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/search-list-control.tsx
@@ -23,7 +23,11 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getFilteredList, defaultMessages } from './utils';
+import {
+	getFilteredList,
+	defaultMessages,
+	isExpandedOrDescendantIsExpanded,
+} from './utils';
 import SearchListItem from './item';
 import Tag from '../tag';
 import type {
@@ -65,15 +69,13 @@ const ListItems = ( props: ListItemsProps ): JSX.Element | null => {
 		<>
 			{ list.map( ( item ) => {
 				const childrenCount = item.children?.length ?? 0;
-				const isSelected =
-					childrenCount && ! isSingle
-						? item.children?.every( ( { id } ) =>
-								selected.find(
-									( selectedItem ) => selectedItem.id === id
-								)
-						  )
-						: !! selected.find( ( { id } ) => id === item.id );
-				const isExpanded = childrenCount && expandedPanelId === item.id;
+				const isSelected = !! selected.find(
+					( { id } ) => id === item.id
+				);
+				const isExpanded = isExpandedOrDescendantIsExpanded(
+					item,
+					expandedPanelId
+				);
 				const totalChildrenForItem = totalChildren?.[ item.id ];
 				const hasMoreChildren =
 					typeof totalChildrenForItem === 'number' &&
@@ -252,7 +254,7 @@ export const SearchListControl = < T extends object = object >(
 	} = props;

 	const [ search, setSearch ] = useState( '' );
-	const useExpandedPanelId = useState< number >( -1 );
+	const useExpandedPanelId = useState< string | number | null >( null );
 	const instanceId = useInstanceId( SearchListControl );
 	const messages = useMemo(
 		() => ( { ...defaultMessages, ...customMessages } ),
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
index bf342caa1c9..96468a97e22 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/style.scss
@@ -211,6 +211,10 @@
 			margin: 0;
 		}

+		> label:has(.woocommerce-search-list__item-label) {
+			display: contents;
+		}
+
 		.woocommerce-search-list__item-label {
 			display: flex;
 			flex: 1;
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
index 34fa36bc273..eba0794b04a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/__snapshots__/index.js.snap
@@ -80,7 +80,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -109,15 +109,14 @@ exports[`SearchListControl should render a search box and list of hierarchical o
             </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-11-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -144,18 +143,17 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-11-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -182,7 +180,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -240,7 +238,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -269,15 +267,14 @@ exports[`SearchListControl should render a search box and list of hierarchical o
           </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-11-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -304,18 +301,17 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-11-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -342,7 +338,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -472,15 +468,14 @@ exports[`SearchListControl should render a search box and list of options 1`] =
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -507,18 +502,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -545,18 +539,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -583,18 +576,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -621,18 +613,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -659,18 +650,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-0-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -697,7 +687,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -746,15 +736,14 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -781,18 +770,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -819,18 +807,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -857,18 +844,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -895,18 +881,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -933,18 +918,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-0-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -971,7 +955,7 @@ exports[`SearchListControl should render a search box and list of options 1`] =
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -1101,15 +1085,14 @@ exports[`SearchListControl should render a search box and list of options with a
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1136,18 +1119,17 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1174,18 +1156,17 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1212,18 +1193,17 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1250,18 +1230,17 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1288,18 +1267,17 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-1-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1326,7 +1304,7 @@ exports[`SearchListControl should render a search box and list of options with a
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -1375,15 +1353,14 @@ exports[`SearchListControl should render a search box and list of options with a
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1410,18 +1387,17 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1448,18 +1424,17 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1486,18 +1461,17 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1524,18 +1498,17 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1562,18 +1535,17 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-1-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -1600,7 +1572,7 @@ exports[`SearchListControl should render a search box and list of options with a
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -1975,15 +1947,14 @@ exports[`SearchListControl should render a search box and list of options, with
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2010,18 +1981,17 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2048,18 +2018,17 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2086,18 +2055,17 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2124,18 +2092,17 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2162,18 +2129,17 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-9-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2200,7 +2166,7 @@ exports[`SearchListControl should render a search box and list of options, with
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -2249,15 +2215,14 @@ exports[`SearchListControl should render a search box and list of options, with
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2284,18 +2249,17 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2322,18 +2286,17 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2360,18 +2323,17 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2398,18 +2360,17 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2436,18 +2397,17 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-9-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2474,7 +2434,7 @@ exports[`SearchListControl should render a search box and list of options, with
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -2825,15 +2785,14 @@ exports[`SearchListControl should render a search box with a search term, and no
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2860,18 +2819,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2898,18 +2856,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2936,18 +2893,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -2974,18 +2930,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3012,18 +2967,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-8-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3050,7 +3004,7 @@ exports[`SearchListControl should render a search box with a search term, and no
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -3099,15 +3053,14 @@ exports[`SearchListControl should render a search box with a search term, and no
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3134,18 +3087,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3172,18 +3124,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3210,18 +3161,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3248,18 +3198,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3286,18 +3235,17 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-8-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3324,7 +3272,7 @@ exports[`SearchListControl should render a search box with a search term, and no
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -3454,15 +3402,14 @@ exports[`SearchListControl should render a search box with a search term, and on
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3489,18 +3436,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3527,18 +3473,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3565,18 +3510,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3603,18 +3547,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3641,18 +3584,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-5-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3679,7 +3621,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -3728,15 +3670,14 @@ exports[`SearchListControl should render a search box with a search term, and on
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3763,18 +3704,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3801,18 +3741,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3839,18 +3778,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3877,18 +3815,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3915,18 +3852,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-5-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -3953,7 +3889,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -4083,15 +4019,14 @@ exports[`SearchListControl should render a search box with a search term, and on
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-6-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4121,18 +4056,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-6-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4162,7 +4096,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -4211,15 +4145,14 @@ exports[`SearchListControl should render a search box with a search term, and on
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-6-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4249,18 +4182,17 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-6-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4290,7 +4222,7 @@ exports[`SearchListControl should render a search box with a search term, and on
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -4471,15 +4403,14 @@ exports[`SearchListControl should render a search box, a list of options, and 1
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4506,18 +4437,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4559,18 +4489,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4597,18 +4526,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4635,18 +4563,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4673,18 +4600,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-2-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4711,7 +4637,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -4811,15 +4737,14 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4846,18 +4771,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4899,18 +4823,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4937,18 +4860,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -4975,18 +4897,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5013,18 +4934,17 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-2-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5051,7 +4971,7 @@ exports[`SearchListControl should render a search box, a list of options, and 1
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
@@ -5274,15 +5194,14 @@ exports[`SearchListControl should render a search box, a list of options, and 2
           class="woocommerce-search-list__list"
         >
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-1"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5309,18 +5228,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-2"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5362,18 +5280,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-3"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5400,18 +5317,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-4"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5453,18 +5369,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-5"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5491,18 +5406,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
           <li>
-            <label
+            <div
               class="woocommerce-search-list__item depth-0"
-              for="search-list-item-3-6"
             >
               <div
                 class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
               >
                 <div
-                  class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                  class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
                 >
                   <div
                     class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5529,7 +5443,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </li>
         </ul>
       </div>
@@ -5671,15 +5585,14 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         class="woocommerce-search-list__list"
       >
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-1"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5706,18 +5619,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-2"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5759,18 +5671,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-3"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5797,18 +5708,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-4"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5850,18 +5760,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-5"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5888,18 +5797,17 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
         <li>
-          <label
+          <div
             class="woocommerce-search-list__item depth-0"
-            for="search-list-item-3-6"
           >
             <div
               class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-1ymh5rp-Wrapper-boxSizingReset ej5x27r4"
             >
               <div
-                class="components-base-control__field css-1s74ogk-StyledField-deprecatedMarginField ej5x27r3"
+                class="components-base-control__field css-sa9iwi-StyledField ej5x27r3"
               >
                 <div
                   class="components-flex components-h-stack css-56qjkt-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
@@ -5926,7 +5834,7 @@ exports[`SearchListControl should render a search box, a list of options, and 2
                 </div>
               </div>
             </div>
-          </label>
+          </div>
         </li>
       </ul>
     </div>
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/hierarchy-interaction.test.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/hierarchy-interaction.test.tsx
new file mode 100644
index 00000000000..14da6af650e
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/hierarchy-interaction.test.tsx
@@ -0,0 +1,245 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { SearchListControl, SearchListItem } from '..';
+import type {
+	RenderItemArgs,
+	SearchListItem as SearchListItemType,
+} from '../types';
+
+const hierarchicalList = [
+	{ id: 1, name: 'Apricots', parent: 0, value: 'apricots' },
+	{ id: 2, name: 'Clementine', parent: 1, value: 'clementine' },
+	{ id: 3, name: 'Elderberry', parent: 1, value: 'elderberry' },
+	{ id: 4, name: 'Guava', parent: 3, value: 'guava' },
+	{ id: 5, name: 'Lychee', parent: 0, value: 'lychee' },
+	{ id: 6, name: 'Mulberry', parent: 0, value: 'mulberry' },
+] as SearchListItemType[];
+
+const renderNonSelectableParentItem = ( args: RenderItemArgs ) => (
+	<SearchListItem { ...args } isSelectable={ ! args.item.children?.length } />
+);
+
+const renderHierarchicalControl = ( {
+	selected = [] as SearchListItemType[],
+	onChange = jest.fn(),
+	renderItem = undefined as
+		| ( ( args: RenderItemArgs ) => JSX.Element )
+		| undefined,
+} = {} ) =>
+	render(
+		<SearchListControl
+			isHierarchical
+			isSingle={ false }
+			isCompact
+			list={ hierarchicalList }
+			selected={ selected }
+			onChange={ onChange }
+			renderItem={ renderItem }
+		/>
+	);
+
+const getTreeItemByName = ( container: HTMLElement, name: string ) =>
+	Array.from( container.querySelectorAll( '[role="treeitem"]' ) ).find(
+		( element ) => element.textContent.includes( name )
+	);
+
+const expandCategory = ( container: HTMLElement, name: string ) => {
+	const treeItem = getTreeItemByName( container, name );
+	if ( treeItem ) {
+		fireEvent.click( treeItem );
+	}
+};
+
+describe( 'SearchListControl hierarchy interactions', () => {
+	test( 'keeps ancestor branches open when expanding nested categories', () => {
+		const { container } = renderHierarchicalControl();
+
+		expandCategory( container, 'Apricots' );
+		expandCategory( container, 'Elderberry' );
+
+		expect(
+			screen.getByRole( 'checkbox', { name: 'Guava' } )
+		).toBeInTheDocument();
+	} );
+
+	test( 'selects a leaf category at depth greater than one', () => {
+		const onChange = jest.fn();
+		const { container } = renderHierarchicalControl( { onChange } );
+
+		expandCategory( container, 'Apricots' );
+		expandCategory( container, 'Elderberry' );
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Guava' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.arrayContaining( [
+				expect.objectContaining( { id: 4, name: 'Guava' } ),
+			] )
+		);
+	} );
+
+	test( 'selects a parent category and all descendants when its checkbox is checked', () => {
+		const onChange = jest.fn();
+		const { container } = renderHierarchicalControl( { onChange } );
+
+		expandCategory( container, 'Apricots' );
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Apricots' } ) );
+
+		const selectedIds = onChange.mock.calls[ 0 ][ 0 ].map(
+			( item: SearchListItemType ) => item.id
+		);
+		expect( selectedIds ).toEqual( [ 1, 2, 3, 4 ] );
+	} );
+
+	test( 'does not collapse an expanded parent when its checkbox is clicked', () => {
+		const { container } = renderHierarchicalControl();
+
+		expandCategory( container, 'Apricots' );
+		expect(
+			screen.getByRole( 'checkbox', { name: 'Elderberry' } )
+		).toBeInTheDocument();
+
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Apricots' } ) );
+
+		expect(
+			screen.getByRole( 'checkbox', { name: 'Elderberry' } )
+		).toBeInTheDocument();
+	} );
+
+	test( 'deselects a parent category and all descendants when its checkbox is unchecked', () => {
+		const onChange = jest.fn();
+		const selected = hierarchicalList.filter( ( { id } ) =>
+			[ 1, 2, 3, 4 ].includes( Number( id ) )
+		);
+		const { container } = renderHierarchicalControl( {
+			onChange,
+			selected,
+		} );
+
+		expandCategory( container, 'Apricots' );
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Apricots' } ) );
+
+		expect( onChange ).toHaveBeenCalledWith( [] );
+	} );
+
+	test( 'shows an indeterminate parent when only a descendant is selected', () => {
+		const { container } = renderHierarchicalControl( {
+			selected: hierarchicalList.filter(
+				( { id } ) => Number( id ) === 4
+			),
+		} );
+
+		expandCategory( container, 'Apricots' );
+
+		const apricotsCheckbox = screen.getByRole( 'checkbox', {
+			name: 'Apricots',
+		} );
+		const elderberryCheckbox = screen.getByRole( 'checkbox', {
+			name: 'Elderberry',
+		} );
+
+		expect( apricotsCheckbox ).toBePartiallyChecked();
+		expect( elderberryCheckbox ).toBePartiallyChecked();
+	} );
+
+	describe( 'isSelectable', () => {
+		test( 'shows a non-selectable parent as checked when all descendants are selected', () => {
+			const { container } = renderHierarchicalControl( {
+				selected: hierarchicalList.filter( ( { id } ) =>
+					[ 2, 3, 4 ].includes( Number( id ) )
+				),
+				renderItem: renderNonSelectableParentItem,
+			} );
+
+			expandCategory( container, 'Apricots' );
+
+			expect(
+				screen.getByRole( 'checkbox', { name: 'Apricots' } )
+			).toBeChecked();
+		} );
+
+		test( 'shows a non-selectable parent as indeterminate when only some descendants are selected', () => {
+			const { container } = renderHierarchicalControl( {
+				selected: hierarchicalList.filter(
+					( { id } ) => Number( id ) === 4
+				),
+				renderItem: renderNonSelectableParentItem,
+			} );
+
+			expandCategory( container, 'Apricots' );
+
+			expect(
+				screen.getByRole( 'checkbox', { name: 'Apricots' } )
+			).toBePartiallyChecked();
+			expect(
+				screen.getByRole( 'checkbox', { name: 'Elderberry' } )
+			).toBeChecked();
+		} );
+
+		test( 'selects only descendants when a non-selectable parent checkbox is checked', () => {
+			const onChange = jest.fn();
+			const { container } = renderHierarchicalControl( {
+				onChange,
+				renderItem: renderNonSelectableParentItem,
+			} );
+
+			expandCategory( container, 'Apricots' );
+			fireEvent.click(
+				screen.getByRole( 'checkbox', { name: 'Apricots' } )
+			);
+
+			const selectedIds = onChange.mock.calls[ 0 ][ 0 ].map(
+				( item: SearchListItemType ) => item.id
+			);
+			expect( selectedIds ).toEqual( [ 2, 3, 4 ] );
+			expect( selectedIds ).not.toContain( 1 );
+		} );
+
+		test( 'deselects only descendants when a non-selectable parent checkbox is unchecked', () => {
+			const onChange = jest.fn();
+			const selected = hierarchicalList.filter( ( { id } ) =>
+				[ 2, 3, 4 ].includes( Number( id ) )
+			);
+			const { container } = renderHierarchicalControl( {
+				onChange,
+				selected,
+				renderItem: renderNonSelectableParentItem,
+			} );
+
+			expandCategory( container, 'Apricots' );
+			fireEvent.click(
+				screen.getByRole( 'checkbox', { name: 'Apricots' } )
+			);
+
+			expect( onChange ).toHaveBeenCalledWith( [] );
+		} );
+
+		test( 'selects remaining descendants when a partially selected non-selectable parent is checked', () => {
+			const onChange = jest.fn();
+			const selected = hierarchicalList.filter(
+				( { id } ) => Number( id ) === 4
+			);
+			const { container } = renderHierarchicalControl( {
+				onChange,
+				selected,
+				renderItem: renderNonSelectableParentItem,
+			} );
+
+			expandCategory( container, 'Apricots' );
+			fireEvent.click(
+				screen.getByRole( 'checkbox', { name: 'Apricots' } )
+			);
+
+			const selectedIds = onChange.mock.calls[ 0 ][ 0 ].map(
+				( item: SearchListItemType ) => item.id
+			);
+			expect( selectedIds ).toEqual( [ 4, 2, 3 ] );
+			expect( selectedIds ).not.toContain( 1 );
+		} );
+	} );
+} );
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/index.js b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/index.js
index a4d1778f798..3bd73660326 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/index.js
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/test/index.js
@@ -44,10 +44,6 @@ describe( 'SearchListControl', () => {
 			/>
 		);
 		expect( component ).toMatchSnapshot();
-
-		// wp-6.8: upstream @wordpress/* deprecation warnings that we cannot
-		// opt out of without changing the visual output.
-		expect( console ).toHaveWarned();
 	} );

 	test( 'should render a search box and list of options with a custom className', () => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/types.ts b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/types.ts
index df6d88410ec..e5195c29948 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/types.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/types.ts
@@ -21,8 +21,8 @@ interface ItemProps< T extends object = object > {
 	// Search string, used to highlight the substring in the item name.
 	search: string;
 	useExpandedPanelId: [
-		number,
-		React.Dispatch< React.SetStateAction< number > >
+		string | number | null,
+		React.Dispatch< React.SetStateAction< string | number | null > >
 	];
 }

@@ -97,6 +97,8 @@ export interface RenderItemArgs< T extends object = object >
 	item: SearchListItem< T >;
 	// Whether this item is selected.
 	isSelected: boolean;
+	// Whether this item is selectable.
+	isSelectable?: boolean;
 	// Whether this should only display a single item (controls radio vs checkbox icon).
 	isSingle: boolean;
 	// The list of currently selected items.
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/utils.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/utils.tsx
index d9f590cc7e3..ff1d2d63bd3 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/utils.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/search-list-control/utils.tsx
@@ -25,6 +25,28 @@ export const defaultMessages = {
 	updated: __( 'Search results updated.', 'woocommerce' ),
 };

+/**
+ * Whether a tree item should show as expanded: it matches expandedPanelId or
+ * contains a descendant that does.
+ */
+export const isExpandedOrDescendantIsExpanded = (
+	item: SearchListItem,
+	expandedPanelId: string | number | null
+): boolean => {
+	if ( expandedPanelId === null ) {
+		return false;
+	}
+	if ( item.id === expandedPanelId ) {
+		return true;
+	}
+	if ( Array.isArray( item.children ) && item.children.length > 0 ) {
+		return item.children.some( ( child ) =>
+			isExpandedOrDescendantIsExpanded( child, expandedPanelId )
+		);
+	}
+	return false;
+};
+
 /**
  * Returns terms in a tree form.
  *
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/handpicked-products/handpicked-products.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/handpicked-products/handpicked-products.block_theme.spec.ts
index 58b3d2714e9..211051c451b 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/handpicked-products/handpicked-products.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/handpicked-products/handpicked-products.block_theme.spec.ts
@@ -17,7 +17,9 @@ test.describe( `${ blockData.slug } Block`, () => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: blockData.slug } );
 		const blockLocator = await editor.getBlockByName( blockData.slug );
-		await blockLocator.getByText( 'Album' ).click();
+		await blockLocator
+			.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+			.click();
 		await blockLocator.getByText( 'Done' ).click();
 		await editor.publishAndVisitPost();
 		const blockLocatorFrontend = await frontendUtils.getBlockByName(
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-category/product-category.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-category/product-category.block_theme.spec.ts
index ad3c4823778..b1c5a4a2903 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-category/product-category.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-category/product-category.block_theme.spec.ts
@@ -17,7 +17,9 @@ test.describe( `${ blockData.slug } Block`, () => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: blockData.slug } );
 		const blockLocator = await editor.getBlockByName( blockData.slug );
-		await blockLocator.getByText( 'Accessories' ).click();
+		await blockLocator
+			.getByRole( 'checkbox', { name: 'Accessories' } )
+			.click();
 		await blockLocator.getByText( 'Done' ).click();
 		await expect( blockLocator.getByRole( 'listitem' ) ).toHaveCount( 5 );
 		await editor.publishAndVisitPost();
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/collection-pickers.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/collection-pickers.block_theme.spec.ts
index fa59e4966b1..dec7e2c0127 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/collection-pickers.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/collection-pickers.block_theme.spec.ts
@@ -77,13 +77,17 @@ test.describe( 'Product Collection: Collection Pickers', () => {
 			await expect( doneButton ).toBeDisabled();

 			// Select first product
-			await productPicker.getByText( 'Album (woo-album)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+				.click();

 			// Done button should now be enabled
 			await expect( doneButton ).toBeEnabled();

 			// Select second product
-			await productPicker.getByText( 'Beanie (woo-beanie)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Beanie (woo-beanie)' } )
+				.click();

 			// Click Done
 			await doneButton.click();
@@ -108,7 +112,9 @@ test.describe( 'Product Collection: Collection Pickers', () => {
 			const productPicker = editor.canvas.locator(
 				SELECTORS.productPicker
 			);
-			await productPicker.getByText( 'Album (woo-album)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+				.click();
 			await productPicker.locator( SELECTORS.pickerDoneButton ).click();

 			// Save and refresh
@@ -146,8 +152,12 @@ test.describe( 'Product Collection: Collection Pickers', () => {
 			const productPicker = editor.canvas.locator(
 				SELECTORS.productPicker
 			);
-			await productPicker.getByText( 'Album (woo-album)' ).click();
-			await productPicker.getByText( 'Beanie (woo-beanie)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+				.click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Beanie (woo-beanie)' } )
+				.click();
 			await productPicker.locator( SELECTORS.pickerDoneButton ).click();

 			await pageObject.refreshLocators( 'editor' );
@@ -239,7 +249,9 @@ test.describe( 'Product Collection: Collection Pickers', () => {
 			const productPicker = editor.canvas.locator(
 				SELECTORS.productPicker
 			);
-			await productPicker.getByText( 'Album (woo-album)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+				.click();
 			await productPicker.locator( SELECTORS.pickerDoneButton ).click();

 			// Switch to Products by Category using toolbar
@@ -267,7 +279,9 @@ test.describe( 'Product Collection: Collection Pickers', () => {
 			const productPicker = editor.canvas.locator(
 				SELECTORS.productPicker
 			);
-			await productPicker.getByText( 'Album (woo-album)' ).click();
+			await productPicker
+				.getByRole( 'checkbox', { name: 'Album (woo-album)' } )
+				.click();
 			await productPicker.locator( SELECTORS.pickerDoneButton ).click();

 			// Switch to Featured Products (no picker needed)
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/inspector-controls.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/inspector-controls.block_theme.spec.ts
index d048182174b..b661fd9e14e 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/inspector-controls.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/inspector-controls.block_theme.spec.ts
@@ -136,7 +136,7 @@ test.describe( 'Product Collection: Inspector Controls', () => {

 		await pageObject.addFilter( 'Show product categories' );
 		await pageObject.checkTaxonomyTerm( 'categories', 'Clothing' );
-		await expect( pageObject.products ).toHaveCount( 8 );
+		await expect( pageObject.products ).toHaveCount( 9 );

 		// Switch to Accessories
 		await pageObject.uncheckTaxonomyTerm( 'categories', 'Clothing' );
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/product-collection.page.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/product-collection.page.ts
index d661ba9ddd2..d61bfe9588f 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/product-collection.page.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-collection/product-collection.page.ts
@@ -691,7 +691,12 @@ class ProductCollectionPage {
 			`.woocommerce-product-${ taxonomy }`
 		);
 		await taxonomyContainer.waitFor();
-		await taxonomyContainer.getByText( term, { exact: true } ).check();
+		const checkbox = taxonomyContainer
+			.getByRole( 'checkbox', { name: term } )
+			.first();
+		if ( ! ( await checkbox.isChecked() ) ) {
+			await checkbox.click();
+		}
 		await this.refreshLocators( 'editor' );
 	}

@@ -707,7 +712,13 @@ class ProductCollectionPage {
 			`.woocommerce-product-${ taxonomy }`
 		);
 		await taxonomyContainer.waitFor();
-		await taxonomyContainer.getByText( term, { exact: true } ).uncheck();
+
+		const checkbox = taxonomyContainer
+			.getByRole( 'checkbox', { name: term } )
+			.first();
+		if ( await checkbox.isChecked() ) {
+			await checkbox.click();
+		}
 		await this.refreshLocators( 'editor' );
 	}

diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/product-tag/product-tag.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/product-tag/product-tag.block_theme.spec.ts
index ff3b61da936..9b89b76663c 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/product-tag/product-tag.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/product-tag/product-tag.block_theme.spec.ts
@@ -17,7 +17,9 @@ test.describe( `${ blockData.slug } Block`, () => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: blockData.slug } );
 		const blockLocator = await editor.getBlockByName( blockData.slug );
-		await blockLocator.getByText( 'Recommended' ).click();
+		await blockLocator
+			.getByRole( 'checkbox', { name: 'Recommended' } )
+			.check();
 		await blockLocator.getByText( 'Done' ).click();
 		await expect( blockLocator.getByRole( 'listitem' ) ).toHaveCount( 2 );
 		await editor.publishAndVisitPost();
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/reviews-by-category/reviews-by-category.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/reviews-by-category/reviews-by-category.block_theme.spec.ts
index 53903405bf9..fa8a07c2611 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/reviews-by-category/reviews-by-category.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/reviews-by-category/reviews-by-category.block_theme.spec.ts
@@ -30,10 +30,14 @@ test.describe( `${ BLOCK_NAME } Block`, () => {
 		page,
 		editor,
 	} ) => {
-		const categoryCheckbox = editor.canvas.getByLabel( 'Clothing' ).first();
+		const blockLocator = await editor.getBlockByName( BLOCK_NAME );
+		const categoryCheckbox = blockLocator.getByRole( 'checkbox', {
+			name: 'Clothing',
+			exact: true,
+		} );
 		await categoryCheckbox.check();
 		await expect( categoryCheckbox ).toBeChecked();
-		const doneButton = editor.canvas.getByRole( 'button', {
+		const doneButton = blockLocator.getByRole( 'button', {
 			name: 'Done',
 		} );
 		await doneButton.click();