From 0b7fc660c4ea935e47df8715a3bee4b2b8a674ef Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Fri, 10 Apr 2026 18:07:08 +0300
Subject: [PATCH] Fix: add semantics to snippets search box

---
 .../SnippetsTable/SnippetsListTable.tsx       | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
index 6df6385f..706165a2 100644
--- a/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
+++ b/src/js/components/ManageMenu/SnippetsTable/SnippetsListTable.tsx
@@ -204,17 +204,19 @@ const SearchBox = () => {
 	const { searchQuery, setSearchQuery } = useSnippetsFilters()
 
 	return (
-		<p className="search-box">
-			<label className="screen-reader-text" htmlFor="snippets_search">{__('Search Snippets:', 'code-snippets')}</label>
-			<input
-				type="search"
-				id="snippets_search"
-				name="s"
-				value={searchQuery ?? ''}
-				onChange={event => setSearchQuery(event.target.value)}
-				placeholder={__('Search snippets', 'code-snippets')}
-			/>
-		</p>
+		<search aria-label={__('Search Snippets', 'code-snippets')}>
+			<p className="search-box">
+				<label className="screen-reader-text" htmlFor="snippets_search">{__('Search Snippets:', 'code-snippets')}</label>
+				<input
+					type="search"
+					id="snippets_search"
+					name="s"
+					value={searchQuery ?? ''}
+					onChange={event => setSearchQuery(event.target.value)}
+					placeholder={__('Search snippets', 'code-snippets')}
+				/>
+			</p>
+		</search>
 	)
 }