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(props: RowProps) { {selectionBehavior === 'toggle' && selectionMode === 'multiple' && ( - - <> - + )} 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 = (props: TableHeaderProps) => { className={classes.headSelection} > - - <> - + )}