From 80c7e004ef4359b7ccae0ffd6b80184cf42d9288 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Fri, 10 Nov 2023 14:58:05 +0000
Subject: [PATCH] Add labels to data views "in-filters" (#56001)

* 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.
---
 packages/edit-site/src/components/dataviews/in-filter.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
index 9abd9a2ee21f10..06e6360e9d5a81 100644
--- a/packages/edit-site/src/components/dataviews/in-filter.js
+++ b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -18,12 +18,16 @@ export default ( { filter, view, onChangeView } ) => {
 			? ''
 			: valueFound.value;
 
+	const id = `dataviews__filters-in-${ filter.field }`;
+
 	return (
 		<SelectControl
+			id={ id }
 			value={ activeValue }
 			prefix={
 				<InputControlPrefixWrapper
-					as="span"
+					as="label"
+					htmlFor={ id }
 					className="dataviews__select-control-prefix"
 				>
 					{ filter.name + ':' }