From c7c9351ea56d99b62404d3c50dfb2a98ade76570 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Tue, 5 May 2026 09:41:56 +0300
Subject: [PATCH 1/2] Fix: accessible sort button in a list table

---
 src/css/manage/_snippets-table.scss           | 20 ++++++++-
 .../common/ListTable/TableHeadings.tsx        | 41 ++++++++++++-------
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index e0e7e9aa..a85a8788 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -85,9 +85,27 @@
 		list-style: disc;
 	}
 
-	th.sortable a, th.sorted a {
+	th.sortable .list-table-sort-button,
+	th.sorted .list-table-sort-button {
 		display: flex;
 		flex-direction: row;
+		align-items: center;
+		inline-size: 100%;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: none;
+		font: inherit;
+		color: #2271b1;
+		cursor: pointer;
+		text-align: start;
+	}
+
+	th.sortable .list-table-sort-button:focus-visible,
+	th.sorted .list-table-sort-button:focus-visible {
+		outline: 2px solid #2271b1;
+		outline-offset: 2px;
+		border-radius: 2px;
 	}
 
 	.row-actions {
diff --git a/src/js/components/common/ListTable/TableHeadings.tsx b/src/js/components/common/ListTable/TableHeadings.tsx
index 85e3885e..c65816b3 100644
--- a/src/js/components/common/ListTable/TableHeadings.tsx
+++ b/src/js/components/common/ListTable/TableHeadings.tsx
@@ -13,7 +13,7 @@ export interface TableHeadingsProps<T, K extends Key> extends Pick<ListTableProp
 	setSortDirection: Dispatch<SetStateAction<ListTableSortDirection>>
 }
 
-interface SortableColumnHeadingProps<T> {
+interface SortableHeadingCellProps<T> {
 	column: ListTableColumn<T>
 	cellProps: ThHTMLAttributes<HTMLTableCellElement>
 	sortColumn: ListTableColumn<T> | undefined
@@ -22,11 +22,15 @@ interface SortableColumnHeadingProps<T> {
 	setSortDirection: Dispatch<SetStateAction<ListTableSortDirection>>
 }
 
-const SortableColumnHeading = <T, >({
-	column, cellProps, sortColumn, sortDirection, setSortColumn, setSortDirection
-}: SortableColumnHeadingProps<T>) => {
+const SortableHeadingCell = <T,>({
+	column,
+	cellProps,
+	sortColumn,
+	sortDirection,
+	setSortColumn,
+	setSortDirection
+}: SortableHeadingCellProps<T>) => {
 	const isCurrent = column.id === sortColumn?.id
-
 	const nextSortDirection = isCurrent
 		? 'asc' === sortDirection ? 'desc' : 'asc'
 		: column.defaultSortDirection ?? 'asc'
@@ -39,11 +43,14 @@ const SortableColumnHeading = <T, >({
 			aria-sort={ariaSort}
 			className={classnames(cellProps.className, isCurrent ? 'sorted' : 'sortable', classDirection)}
 		>
-			<a href="#" onClick={event => {
-				event.preventDefault()
-				setSortColumn(column)
-				setSortDirection(nextSortDirection)
-			}}>
+			<button
+				type="button"
+				className="list-table-sort-button"
+				onClick={() => {
+					setSortColumn(column)
+					setSortDirection(nextSortDirection)
+				}}
+			>
 				<span>{column.title}</span>
 				<span className="sorting-indicators">
 					<span className="sorting-indicator asc" aria-hidden="true"></span>
@@ -54,7 +61,7 @@ const SortableColumnHeading = <T, >({
 						{/* translators: Hidden accessibility text. */}
 						{'asc' === nextSortDirection ? __('Sort ascending.', 'code-snippets') : __('Sort descending.', 'code-snippets')}
 					</span>}
-			</a>
+			</button>
 		</th>
 	)
 }
@@ -87,7 +94,6 @@ export const TableHeadings = <T, K extends Key>({
 		{columns.map(column => {
 			const cellProps: ThHTMLAttributes<HTMLTableCellElement> = {
 				id: 'head' === which ? column.id.toString() : undefined,
-				key: column.id,
 				scope: 'col',
 				className: classnames(
 					'manage-column',
@@ -97,8 +103,13 @@ export const TableHeadings = <T, K extends Key>({
 				)
 			}
 
-			return column.sortedValue
-				? <SortableColumnHeading {...{ column, cellProps, sortColumn, sortDirection, setSortColumn, setSortDirection }} />
-				: <th {...cellProps}>{column.title}</th>
+			if (!column.sortedValue) {
+				return <th key={column.id} {...cellProps}>{column.title}</th>
+			}
+
+			return <SortableHeadingCell
+				key={column.id}
+				{...{ column, cellProps, sortColumn, sortDirection, setSortColumn, setSortDirection }}
+			/>
 		})}
 	</tr>

From 85f4d7c4b0e5dd82de614204dd12c05437b95fe1 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Tue, 5 May 2026 09:48:53 +0300
Subject: [PATCH 2/2] Fix visual regression

---
 src/css/manage/_snippets-table.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss
index a85a8788..5a37fb8d 100644
--- a/src/css/manage/_snippets-table.scss
+++ b/src/css/manage/_snippets-table.scss
@@ -175,7 +175,6 @@
 
 	#wpbody-content & .column-name {
 		white-space: nowrap; /* prevents wrapping of snippet title */
-		vertical-align: top;
 	}
 
 	td.column-date, th.column-date {