Skip to content

Commit 93a9847

Browse files
committed
fix(ui-table): fix selectable table screen reader issue on select all checkbox in the column header
1 parent 3341639 commit 93a9847

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

packages/ui-table/src/Table/README.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -515,10 +515,10 @@ const SelectableTable = ({
515515
}
516516
>
517517
<Table.Row>
518-
<Table.ColHeader id="select">
518+
<Table.ColHeader id="select" aria-label="Select">
519519
<Checkbox
520520
label={
521-
<ScreenReaderContent>Select all</ScreenReaderContent>
521+
<ScreenReaderContent>Select all rows</ScreenReaderContent>
522522
}
523523
onChange={() => handleSelectAll(allSelected)}
524524
checked={allSelected}
@@ -1141,3 +1141,15 @@ type: embed
11411141
</Figure>
11421142
</Guidelines>
11431143
```
1144+
1145+
```js
1146+
---
1147+
type: embed
1148+
---
1149+
<Guidelines>
1150+
<Figure recommendation="a11y" title="Accessibility">
1151+
<Figure.Item>In the case of a Table with selection, to prevent screenreaders from announcing the label of the select all checkbox when navigating in the rows, an aria-label should be added to the corresponding Table.Colheader like in our example above.
1152+
</Figure.Item>
1153+
</Figure>
1154+
</Guidelines>
1155+
```

0 commit comments

Comments
 (0)