Fix: accessible migrate form

src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx

@@ -25,7 +25,11 @@ export const ImportOptions: React.FC = () => {
 					</div>
 					{autoAddTags && (
 						<div className="import-tag-entry">
+							<label htmlFor="import-auto-tag" className="screen-reader-text">
+								{__('Tag to add to imported snippets', 'code-snippets')}
+							</label>
 							<input
+								id="import-auto-tag"
 								type="text"
 								value={tagValue}
 								onChange={event => setTagValue(event.target.value)}

src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx

@@ -12,11 +12,13 @@ export interface ImporterSelectorProps {
 
 export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
 	<ImportCard variant="controls" className="importer-selector-card">
-		<label htmlFor="importer-select">
-			<h3>{__('Select plugin', 'code-snippets')}</h3>
+		<h3 id="importer-select-heading">{__('Select plugin', 'code-snippets')}</h3>
+		<label htmlFor="importer-select" className="screen-reader-text">
+			{__('Select plugin to migrate from', 'code-snippets')}
 		</label>
 
 		<select
+			aria-labelledby="importer-select-heading"
 			id="importer-select"
 			value={value}
 			onChange={event => onChange(event.target.value)}
@@ -37,5 +39,5 @@ export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onCha
 				</option>)}
 		</select>
 
-		{isLoading && <p>{__('Loading snippets…', 'code-snippets')}</p>}
+		{isLoading && <p role="status" aria-live="polite">{__('Loading snippets…', 'code-snippets')}</p>}
 	</ImportCard>

src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx

@@ -16,7 +16,12 @@ interface StatusDisplayProps {
 }
 
 const StatusDisplay: React.FC<StatusDisplayProps> = ({ type, title, children }) =>
-	<ImportCard variant="controls" className="import-section-status">
+	<ImportCard
+		variant="controls"
+		className="import-section-status"
+		role={'error' === type ? 'alert' : 'status'}
+		aria-live={'error' === type ? 'assertive' : 'polite'}
+	>
 		<div className={type} aria-hidden="true"><span>{'error' === type ? '✕' : '✓'}</span></div>
 		<div>
 			<h4>{title}</h4>
@@ -52,7 +57,7 @@ const StatusMessages: React.FC = () => {
 			{selectedImporter &&
 					isWorking !== MigrationStep.FetchSnippets && error?.step !== MigrationStep.FetchSnippets &&
 					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
-				<ImportCard className="no-snippets-card">
+				<ImportCard className="no-snippets-card" role="status" aria-live="polite">
 					<div className="card-inner">
 						<div className="card-icon" aria-hidden="true">📭</div>
 						<h4>{__('No snippets found', 'code-snippets')}</h4>
@@ -68,7 +73,7 @@ const MigrateFormInner: React.FC = () => {
 	const { isWorking, error, importers, snippetSelection, importSnippets, changeSelectedImporter } = useMigrationData()
 
 	if (isWorking === MigrationStep.LoadImporters) {
-		return <p>{__('Loading importers…', 'code-snippets')}</p>
+		return <p role="status" aria-live="polite">{__('Loading importers…', 'code-snippets')}</p>
 	}
 
 	if (error?.step === MigrationStep.LoadImporters) {

src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx

@@ -52,15 +52,18 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = props => {
 					)}</h3>
 					<p>{__('We found the following snippets:', 'code-snippets')}</p>
 				</header>
-
 				<TableNav which="top" {...props} />
 			</div>
-
 			<table className="wp-list-table widefat fixed striped">
 				<thead>
 					<tr>
 						<th scope="col" className="check-column">
-							<input type="checkbox" checked={isAllSelected} onChange={selectAll} />
+							<input
+								type="checkbox"
+								checked={isAllSelected}
+								onChange={selectAll}
+								aria-label={__('Select all snippets', 'code-snippets')}
+							/>
 						</th>
 						<th scope="col" className="column-name">{__('Snippet name', 'code-snippets')}</th>
 						<th scope="col" className="column-id">{__('ID', 'code-snippets')}</th>
@@ -74,14 +77,18 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = props => {
 									type="checkbox"
 									checked={selectedItems.has(snippet.table_data.id)}
 									onChange={() => toggleItem(snippet.table_data.id)}
+									aria-label={sprintf(
+										// translators: %s: snippet name.
+										__('Select %s', 'code-snippets'),
+										snippet.table_data.title
+									)}
 								/>
 							</th>
 							<td className="column-name">{snippet.table_data.title}</td>
 							<td className="column-id">{snippet.table_data.id}</td>
 						</tr>)}
 				</tbody>
 			</table>
-
 			<TableNav which="bottom" {...props} />
 		</ImportCard>
 	)