From 2722662e6be32ef3cb4c04b9a6650f35038a9ffb Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Tue, 5 May 2026 18:48:21 +0300
Subject: [PATCH] Fix: accessible table checkbox - select row & select all

---
 .../SelectSnippets/SnippetSelectionTable.tsx  | 83 ++++++++++---------
 .../common/ListTable/TableItems.tsx           |  5 ++
 2 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SnippetSelectionTable.tsx b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SnippetSelectionTable.tsx
index 6fcc94ca..77389a0a 100644
--- a/src/js/components/ImportMenu/UploadForm/SelectSnippets/SnippetSelectionTable.tsx
+++ b/src/js/components/ImportMenu/UploadForm/SelectSnippets/SnippetSelectionTable.tsx
@@ -25,44 +25,49 @@ export const SnippetSelectionTable: React.FC<SnippetSelectionTableProps> = ({
 	snippets,
 	selection: { selectedItems, isAllSelected, toggleItem, selectAll }
 }) =>
-	<>
-		<table className="wp-list-table widefat fixed striped">
-			<thead>
-				<tr>
-					<th scope="col" className="check-column">
-						<input type="checkbox" checked={isAllSelected} onChange={selectAll} />
+	<table className="wp-list-table widefat fixed striped">
+		<thead>
+			<tr>
+				<th scope="col" className="check-column">
+					<label htmlFor="cb-select-all-head">
+						<span className="screen-reader-text">{__('Select all snippets', 'code-snippets')}</span>
+					</label>
+					<input id="cb-select-all-head" type="checkbox" checked={isAllSelected} onChange={selectAll} />
+				</th>
+				<th scope="col" className="column-name">{__('Name', 'code-snippets')}</th>
+				<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
+				<th scope="col" className="column-desc">{__('Description', 'code-snippets')}</th>
+				<th scope="col" className="column-tags">{__('Tags', 'code-snippets')}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{snippets.map(snippet =>
+				<tr key={snippet.table_data.id} className={`${snippet.table_data.type}-snippet`}>
+					<th scope="row" className="check-column">
+						<label htmlFor={`cb-select-${snippet.table_data.id}`}>
+							<span className="screen-reader-text">{__('Select snippet', 'code-snippets')}</span>
+						</label>
+						<input
+							id={`cb-select-${snippet.table_data.id}`}
+							type="checkbox"
+							checked={selectedItems.has(snippet.table_data.id)}
+							onChange={() => toggleItem(snippet.table_data.id)}
+						/>
 					</th>
-					<th scope="col" className="column-name">{__('Name', 'code-snippets')}</th>
-					<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
-					<th scope="col" className="column-desc">{__('Description', 'code-snippets')}</th>
-					<th scope="col" className="column-tags">{__('Tags', 'code-snippets')}</th>
+					<td className="column-name">
+						<strong>{snippet.table_data.title}</strong>
+						{snippet.source_file && <div>
+							{sprintf(
+								// translators: %s: source file name.
+								_x('from %s', 'import snippet source file', 'code-snippets'),
+								snippet.source_file
+							)}
+						</div>}
+					</td>
+					<td className="column-type"><span>{snippet.table_data.type}</span></td>
+					<td className="column-desc">{truncateDescription(snippet.table_data.description)}</td>
+					<td className="column-tags">{snippet.table_data.tags || '—'}</td>
 				</tr>
-			</thead>
-			<tbody>
-				{snippets.map(snippet =>
-					<tr key={snippet.table_data.id} className={`${snippet.table_data.type}-snippet`}>
-						<th scope="row" className="check-column">
-							<input
-								type="checkbox"
-								checked={selectedItems.has(snippet.table_data.id)}
-								onChange={() => toggleItem(snippet.table_data.id)}
-							/>
-						</th>
-						<td className="column-name">
-							<strong>{snippet.table_data.title}</strong>
-							{snippet.source_file && <div>
-								{sprintf(
-									// translators: %s: source file name.
-									_x('from %s', 'import snippet source file', 'code-snippets'),
-									snippet.source_file
-								)}
-							</div>}
-						</td>
-						<td className="column-type"><span>{snippet.table_data.type}</span></td>
-						<td className="column-desc">{truncateDescription(snippet.table_data.description)}</td>
-						<td className="column-tags">{snippet.table_data.tags || '—'}</td>
-					</tr>
-				)}
-			</tbody>
-		</table>
-	</>
+			)}
+		</tbody>
+	</table>
diff --git a/src/js/components/common/ListTable/TableItems.tsx b/src/js/components/common/ListTable/TableItems.tsx
index 7e71982c..5b8e67b1 100644
--- a/src/js/components/common/ListTable/TableItems.tsx
+++ b/src/js/components/common/ListTable/TableItems.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import { __ } from '@wordpress/i18n'
 import type { Dispatch, Key, SetStateAction } from 'react'
 import type { ListTableColumn, ListTableItemsProps } from './ListTable'
 
@@ -10,7 +11,11 @@ interface CheckboxCellProps<T, K extends Key> extends Pick<TableItemsProps<T, K>
 
 const CheckboxCell = <T, K extends Key>({ item, setSelected, getKey }: CheckboxCellProps<T, K>) =>
 	<th scope="row" className="check-column">
+		<label htmlFor={`cb-select-${getKey(item)}`}>
+			<span className="screen-reader-text">{__('Select snippet', 'code-snippets')}</span>
+		</label>
 		<input
+			id={`cb-select-${getKey(item)}`}
 			type="checkbox"
 			name="checked[]"
 			onChange={event => {