From b9acb84628c98e6449da54d7f20a0a66d556e0eb Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 9 Nov 2023 14:39:28 +0000
Subject: [PATCH] Add labels to data views "in" filters

All user inputs should have an accessible name, ideally provided by a visible label. This patch ensures that data views "in" filters semantically associate the visible label with the select input, ensuring that the input has an accessible name.

Resolves #55963
Closes #55977
---
 .../edit-site/src/components/dataviews/in-filter.js   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
index 9abd9a2ee21f10..289a6a2652dbbb 100644
--- a/packages/edit-site/src/components/dataviews/in-filter.js
+++ b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -5,10 +5,11 @@ import {
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	SelectControl,
 } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 
 export const OPERATOR_IN = 'in';
 
-export default ( { filter, view, onChangeView } ) => {
+export default function InFilter( { filter, view, onChangeView } ) {
 	const valueFound = view.filters.find(
 		( f ) => f.field === filter.field && f.operator === OPERATOR_IN
 	);
@@ -18,12 +19,16 @@ export default ( { filter, view, onChangeView } ) => {
 			? ''
 			: valueFound.value;
 
+	const id = useInstanceId( InFilter, 'dataviews__filters-in' );
+
 	return (
 		<SelectControl
+			id={ id }
 			value={ activeValue }
 			prefix={
 				<InputControlPrefixWrapper
-					as="span"
+					as="label"
+					htmlFor={ id }
 					className="dataviews__select-control-prefix"
 				>
 					{ filter.name + ':' }
@@ -51,4 +56,4 @@ export default ( { filter, view, onChangeView } ) => {
 			} }
 		/>
 	);
-};
+}