fix(ui-table): fix selectable table screen reader issue on select all checkbox in the column header

Author: git-nandor

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

@@ -515,10 +515,10 @@ const SelectableTable = ({
               }
             >
               <Table.Row>
-                <Table.ColHeader id="select">
+                <Table.ColHeader id="select" aria-label="Select">
                   <Checkbox
                     label={
-                      <ScreenReaderContent>Select all</ScreenReaderContent>
+                      <ScreenReaderContent>Select all rows</ScreenReaderContent>
                     }
                     onChange={() => handleSelectAll(allSelected)}
                     checked={allSelected}
@@ -1141,3 +1141,26 @@ type: embed
   </Figure>
 </Guidelines>
 ```
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <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.
+    </Figure.Item>
+  </Figure>
+</Guidelines>
+```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <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.
+    </Figure.Item>
+  </Figure>
+</Guidelines>
+```