From 545129a9d8fc68eeacf38fb508560595d87ddd8b Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 17 Mar 2026 12:04:51 +0100
Subject: [PATCH] fix(ui): use aria-label for Table selection checkboxes

Updated Table selection checkboxes to use aria-label instead of
empty fragment children, improving accessibility and removing the
unnecessary label gap in the selection cells.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/fix-table-row-hover-selection.md                | 7 +++++++
 packages/ui/src/components/Table/components/Row.tsx        | 4 +---
 .../ui/src/components/Table/components/TableHeader.tsx     | 4 +---
 3 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fix-table-row-hover-selection.md

diff --git a/.changeset/fix-table-row-hover-selection.md b/.changeset/fix-table-row-hover-selection.md
new file mode 100644
index 0000000000..2543b22389
--- /dev/null
+++ b/.changeset/fix-table-row-hover-selection.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Updated Table selection checkboxes to use `aria-label` instead of empty fragment children, improving accessibility and removing the unnecessary label gap in the selection cells.
+
+**Affected components:** Table
diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx
index 9d4a15f601..6677f51308 100644
--- a/packages/ui/src/components/Table/components/Row.tsx
+++ b/packages/ui/src/components/Table/components/Row.tsx
@@ -73,9 +73,7 @@ export function Row<T extends object>(props: RowProps<T>) {
       {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (
         <ReactAriaCell className={clsx(classes.cell, classes.cellSelection)}>
           <Flex justify="center" align="center">
-            <Checkbox slot="selection">
-              <></>
-            </Checkbox>
+            <Checkbox slot="selection" aria-label="Select row" />
           </Flex>
         </ReactAriaCell>
       )}
diff --git a/packages/ui/src/components/Table/components/TableHeader.tsx b/packages/ui/src/components/Table/components/TableHeader.tsx
index 4c7bce3488..8b1b8ff23d 100644
--- a/packages/ui/src/components/Table/components/TableHeader.tsx
+++ b/packages/ui/src/components/Table/components/TableHeader.tsx
@@ -43,9 +43,7 @@ export const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {
           className={classes.headSelection}
         >
           <Flex justify="center" align="center">
-            <Checkbox slot="selection">
-              <></>
-            </Checkbox>
+            <Checkbox slot="selection" aria-label="Select all" />
           </Flex>
         </Column>
       )}