fix: add aria-labels and headings for improved accessibility in forms

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>
 

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]) =>
 						<>

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 {

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>

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')

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>',

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

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()
 		}}>

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