@instructure/ui-table 11.0.2-snapshot-0 → 11.0.2-snapshot-2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.0.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-0) (2025-10-15)
+## [11.0.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-2) (2025-10-20)
 
-**Note:** Version bump only for package @instructure/ui-table
+
+### Bug Fixes
+
+* **ui-table:** fix selectable table screen reader issue on select all checkbox in the column header ([93a9847](https://github.com/instructure/instructure-ui/commit/93a9847800eea63e874587d19cf06c76bcb9ab95))
 
 
 

package/README.md

@@ -10,7 +10,7 @@ A styled HTML table component.
 
 The `ui-table` package contains the following:
 
-- [Table](#Table)
+- [Table](Table)
 
 ### Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "11.0.2-snapshot-0",
+  "version": "11.0.2-snapshot-2",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.0.2-snapshot-0",
-    "@instructure/ui-babel-preset": "11.0.2-snapshot-0",
-    "@instructure/ui-color-utils": "11.0.2-snapshot-0",
-    "@instructure/ui-themes": "11.0.2-snapshot-0",
+    "@instructure/ui-axe-check": "11.0.2-snapshot-2",
+    "@instructure/ui-babel-preset": "11.0.2-snapshot-2",
+    "@instructure/ui-color-utils": "11.0.2-snapshot-2",
+    "@instructure/ui-themes": "11.0.2-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
@@ -34,15 +34,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.0.2-snapshot-0",
-    "@instructure/emotion": "11.0.2-snapshot-0",
-    "@instructure/shared-types": "11.0.2-snapshot-0",
-    "@instructure/ui-a11y-content": "11.0.2-snapshot-0",
-    "@instructure/ui-icons": "11.0.2-snapshot-0",
-    "@instructure/ui-react-utils": "11.0.2-snapshot-0",
-    "@instructure/ui-simple-select": "11.0.2-snapshot-0",
-    "@instructure/ui-utils": "11.0.2-snapshot-0",
-    "@instructure/ui-view": "11.0.2-snapshot-0"
+    "@instructure/console": "11.0.2-snapshot-2",
+    "@instructure/emotion": "11.0.2-snapshot-2",
+    "@instructure/shared-types": "11.0.2-snapshot-2",
+    "@instructure/ui-a11y-content": "11.0.2-snapshot-2",
+    "@instructure/ui-icons": "11.0.2-snapshot-2",
+    "@instructure/ui-react-utils": "11.0.2-snapshot-2",
+    "@instructure/ui-simple-select": "11.0.2-snapshot-2",
+    "@instructure/ui-utils": "11.0.2-snapshot-2",
+    "@instructure/ui-view": "11.0.2-snapshot-2"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Table/README.md

@@ -6,9 +6,9 @@ describes: Table
 
 In stacked layout, column header is rendered in each cell, but not in row header.
 
-> If you are using [TruncateText](#TruncateText) (or CSS ellipsis) in your Table, set the
+> If you are using [TruncateText](TruncateText) (or CSS ellipsis) in your Table, set the
 > layout to `fixed` or `stacked`, or the text truncation will not work. To force long strings to break and not
-> exceed the bounds of the table cell, use `fixed` or `stacked`, together with the [Text](#Text) component:
+> exceed the bounds of the table cell, use `fixed` or `stacked`, together with the [Text](Text) component:
 > `<Text wrap="break-word">[long string]</Text>`.
 
 ```js
@@ -220,7 +220,7 @@ render(
 
 ### A sortable table using our Responsive component
 
-Resize the window to see how column headers transition into a `Select` for sorting table content when the traditional Table Header is no longer clickable. The Table layout itself switches from the horizontal view to the stacked view allowing content to be viewed without horizontal scrolling. See [Responsive](#Responsive) for more examples.
+Resize the window to see how column headers transition into a `Select` for sorting table content when the traditional Table Header is no longer clickable. The Table layout itself switches from the horizontal view to the stacked view allowing content to be viewed without horizontal scrolling. See [Responsive](Responsive) for more examples.
 
 By default, the options in the `Select` for sorting in stacked layout are generated from the `id` property of the `Table.ColHeader` components. If you want to display custom strings, use the `stackedSortByLabel` property.
 
@@ -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}
@@ -868,7 +868,7 @@ render(<Example />)
 If you want to use fully custom components you have to pay attention to the following:
 
 - Render them as the appropriate HTML Table tags (`tr`, `th`, ...)
-- Read the `hover` prop from [TableContext](#TableContext) to customize hover behaviour
+- Read the `hover` prop from [TableContext](TableContext) to customize hover behaviour
 - A11y: Row header cells must have the `scope='row'` HTML attribute
 - A11y: Column header cells must have the `scope='col'` and `aria-sort` (if sortable) HTML attribute
 
@@ -973,13 +973,13 @@ render(<Example />)
 
 #### Fully custom components with `stacked` layout
 
-This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in [TableContext](#TableContext)), so they can display what column they are rendering.
+This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in [TableContext](TableContext)), so they can display what column they are rendering.
 In this layout for accessibility not render HTML table tags, just plain DOM elements (e.g. `div`) and use the appropriate ARIA role to signify that it's actually a `Table` (e.g. [`cell`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role), [`row`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), [`rowheader`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role)).  
 Also you need the following props on the components:
 
 ##### Table rows
 
-- It should read the `headers` array from [TableContext](#TableContext) and pass its nth element to its nth child (if they have such prop).
+- It should read the `headers` array from [TableContext](TableContext) and pass its nth element to its nth child (if they have such prop).
 
 ##### The children of the first row in `Table.Head` (`Table.ColHeader` by default)
 
@@ -987,7 +987,7 @@ Also you need the following props on the components:
 
 ##### Table cells
 
-- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from [TableContext](#TableContext).
+- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from [TableContext](TableContext).
 
 Custom table with `stacked` layout support:
 
@@ -1141,3 +1141,15 @@ 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>
+```