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

@@ -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

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

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