From 24011bfd7a677798c25620efb1397b9f9bc966f0 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Tue, 27 Oct 2026 13:56:29 +0200
Subject: [PATCH] fix: add aria-labels and headings for improved accessibility
 in forms

---
 src/js/components/EditMenu/SnippetForm/SnippetForm.tsx        | 2 +-
 src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx   | 4 ++--
 .../ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx   | 4 ++--
 src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx   | 2 +-
 .../components/ManageMenu/SnippetsTable/useApplyBulkAction.ts | 1 +
 .../ManageMenu/UnifiedSnippetsDemo/demoFoundItems.ts          | 2 +-
 src/js/components/common/ListTable/TablePagination.tsx        | 2 +-
 src/js/components/common/snippets/SnippetPriorityInput.tsx    | 2 +-
 src/php/Admin/Menus/Settings_Menu.php                         | 4 ++--
 9 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
index f66440aaa..ee44023e4 100644
--- a/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/EditMenu/SnippetForm/SnippetForm.tsx
@@ -123,7 +123,7 @@ const EditForm: React.FC<EditFormProps> = ({ children, className }) => {
 
 	return (
 		<>
-			<form id="snippet-form" method="post" onSubmit={handleSubmit} className={className}>
+			<form aria-labelledby="snippet-form-heading" id="snippet-form" method="post" onSubmit={handleSubmit} className={className}>
 				{children}
 			</form>
 
diff --git a/src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx b/src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx
index aab5ee60e..c74c061e7 100644
--- a/src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx
+++ b/src/js/components/EditMenu/SnippetForm/page/PageHeading.tsx
@@ -32,7 +32,7 @@ export const PageHeading: React.FC = () => {
 				<h1>
 					{snippet.id
 						? <>
-							{`${getPageHeading(snippet)} `}
+							<span id="snippet-form-heading">{getPageHeading(snippet)}</span>{' '}
 
 							<a
 								href={window.CODE_SNIPPETS?.urls.addNew}
@@ -52,7 +52,7 @@ export const PageHeading: React.FC = () => {
 								{_x('Add New', 'snippet', 'code-snippets')}
 							</a>
 						</>
-						: getAddNewHeading(snippet)}
+						: <span id="snippet-form-heading">{getAddNewHeading(snippet)}</span>}
 
 					{OPTIONS?.pageTitleActions && Object.entries(OPTIONS.pageTitleActions).map(([label, url]) =>
 						<>
diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
index 4f8ecb846..68ee5e315 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SelectSnippets.tsx
@@ -76,7 +76,7 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 	<>
 		<div className="tablenav top">
 			<div>
-				<h2>{// translators: %d: number of available snippets.
+				<h2 id="import-available-snippets-heading">{// translators: %d: number of available snippets.
 					sprintf(__('Available snippets (%d)', 'code-snippets'), availableSnippets.length)}</h2>
 				<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 			</div>
@@ -141,7 +141,7 @@ const SubmitForm: React.FC<SubmitFormProps> = ({ children, duplicateAction, setI
 		}
 	}
 
-	return <form onSubmit={handleImportSelected}>{children}</form>
+	return <form aria-labelledby="import-available-snippets-heading" onSubmit={handleImportSelected}>{children}</form>
 }
 
 export interface SelectSnippetsStepProps {
diff --git a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
index a39faf545..6d740651f 100644
--- a/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
+++ b/src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
@@ -30,7 +30,7 @@ const SearchBox = () => {
 	}
 
 	return (
-		<form className="cloud-search-form" onSubmit={handleSubmit}>
+		<form aria-label={__('Search Cloud Library', 'code-snippets')} className="cloud-search-form" onSubmit={handleSubmit}>
 			<label htmlFor={searchMethodId} className="screen-reader-text">
 				{__('Search method', 'code-snippets')}
 			</label>
diff --git a/src/js/components/ManageMenu/SnippetsTable/useApplyBulkAction.ts b/src/js/components/ManageMenu/SnippetsTable/useApplyBulkAction.ts
index 4c5735063..77b82dcc7 100644
--- a/src/js/components/ManageMenu/SnippetsTable/useApplyBulkAction.ts
+++ b/src/js/components/ManageMenu/SnippetsTable/useApplyBulkAction.ts
@@ -35,6 +35,7 @@ const submitBulkSnippetDownload = (snippets: readonly Snippet[]): Promise<void>
 	}
 
 	const form = document.createElement('form')
+	form.setAttribute('aria-label', __('Download snippets', 'code-snippets'))
 
 	const appendHiddenField = (name: string, value: string) => {
 		const input = document.createElement('input')
diff --git a/src/js/components/ManageMenu/UnifiedSnippetsDemo/demoFoundItems.ts b/src/js/components/ManageMenu/UnifiedSnippetsDemo/demoFoundItems.ts
index 85afd12ca..1395fb193 100644
--- a/src/js/components/ManageMenu/UnifiedSnippetsDemo/demoFoundItems.ts
+++ b/src/js/components/ManageMenu/UnifiedSnippetsDemo/demoFoundItems.ts
@@ -87,7 +87,7 @@ export const getDemoFoundItems = (): DemoFoundItem[] => [
 		key: 'newsletter-form',
 		name: __('Newsletter sign-up form', 'code-snippets'),
 		code: [
-			'<form class="newsletter" action="/subscribe" method="post">',
+			'<form aria-label="Newsletter sign-up" class="newsletter" action="/subscribe" method="post">',
 			'\t<label for="newsletter-email">Get our weekly tips</label>',
 			'\t<input id="newsletter-email" type="email" name="email" required>',
 			'\t<button type="submit">Subscribe</button>',
diff --git a/src/js/components/common/ListTable/TablePagination.tsx b/src/js/components/common/ListTable/TablePagination.tsx
index a6278999d..fe8b62acc 100644
--- a/src/js/components/common/ListTable/TablePagination.tsx
+++ b/src/js/components/common/ListTable/TablePagination.tsx
@@ -33,7 +33,7 @@ const PaginationControls: React.FC<PaginationControlsProps> = ({
 
 	return (
 		<nav className="tablenav-pages-nav" aria-label={navLabel}>
-			<form
+			<form aria-label={navLabel}
 				className={classnames('tablenav-pages', {
 					'one-page': totalPages && 1 === totalPages,
 					'no-pages': !totalPages
diff --git a/src/js/components/common/snippets/SnippetPriorityInput.tsx b/src/js/components/common/snippets/SnippetPriorityInput.tsx
index 8efd1056c..ee8e3f696 100644
--- a/src/js/components/common/snippets/SnippetPriorityInput.tsx
+++ b/src/js/components/common/snippets/SnippetPriorityInput.tsx
@@ -38,7 +38,7 @@ export const SnippetPriorityInput: React.FC<SnippetPriorityInputProps> = ({ snip
 	}
 
 	return (
-		<form onSubmit={event => {
+		<form aria-label={__('Snippet priority', 'code-snippets')} onSubmit={event => {
 			event.preventDefault()
 			handleUpdate()
 		}}>
diff --git a/src/php/Admin/Menus/Settings_Menu.php b/src/php/Admin/Menus/Settings_Menu.php
index a00f054ba..6d7f4ff0a 100644
--- a/src/php/Admin/Menus/Settings_Menu.php
+++ b/src/php/Admin/Menus/Settings_Menu.php
@@ -241,7 +241,7 @@ public function render() {
 			<?php $this->render_section_tabs(); ?>
 
 			<div class="snippets-page-header">
-				<h1><?php esc_html_e( 'Snippets Settings', 'code-snippets' ); ?></h1>
+				<h1 id="snippets-settings-heading"><?php esc_html_e( 'Snippets Settings', 'code-snippets' ); ?></h1>
 			</div>
 
 			<?php
@@ -270,7 +270,7 @@ public function render() {
 
 			<?php settings_errors( OPTION_NAME ); ?>
 
-			<form action="<?php echo esc_url( $update_url ); ?>" method="post">
+			<form aria-labelledby="snippets-settings-heading" action="<?php echo esc_url( $update_url ); ?>" method="post">
 				<input type="hidden" name="section" value="<?php echo esc_attr( $current_section ); ?>">
 				<?php