fix(datagrid): screen reader misreads datagrid table headers (#5716)

* fix(datagrid): screen reader misreads datagrid table headers * fix(datagrid): screen reader reading header ahead by 1, mozilla * fix: snapshot * fix: datagrid tests
carbon-design-system · Jul 30, 2024 · 137f5b1 · 137f5b1
1 parent d05c2da
commit 137f5b1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -3710,6 +3710,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--datagrid__head-hidden-select-all {
+  min-width: 3rem;
   padding-right: 3rem;
 }
 .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {

diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
@@ -479,6 +479,7 @@
 }
 
 .#{$block-class}__head-hidden-select-all {
+  min-width: $spacing-09;
   padding-right: $spacing-09;
 
   &.#{$block-class}__select-all-sticky-left {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -987,7 +987,6 @@ describe(componentName, () => {
         .getByRole('table')
         .getElementsByTagName('thead')[0]
         .getElementsByTagName('tr')[0]
-        .getElementsByTagName('div')[0]
         .getElementsByTagName('th')[0]
         .getElementsByTagName('div')[0]
         .getElementsByTagName('input')[0]
@@ -1009,7 +1008,6 @@ describe(componentName, () => {
         .getByRole('table')
         .getElementsByTagName('thead')[0]
         .getElementsByTagName('tr')[0]
-        .getElementsByTagName('div')[0]
         .getElementsByTagName('th')[0]
         .getElementsByTagName('div')[0]
         .getElementsByTagName('input')[0]
@@ -1994,7 +1992,6 @@ describe(componentName, () => {
         .getByRole('table')
         .getElementsByTagName('thead')[0]
         .getElementsByTagName('tr')[0]
-        .getElementsByTagName('div')[0]
         .getElementsByTagName('th')[0]
         .getElementsByTagName('div')[0]
         .getElementsByTagName('label')[0]
@@ -2017,7 +2014,6 @@ describe(componentName, () => {
         .getByRole('table')
         .getElementsByTagName('thead')[0]
         .getElementsByTagName('tr')[0]
-        .getElementsByTagName('div')[0]
         .getElementsByTagName('th')[0]
         .getElementsByTagName('div')[0]
         .getElementsByTagName('label')[0]

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridSelectAll.tsx
@@ -48,7 +48,7 @@ const SelectAll = (datagridState: DataGridState) => {
     columns[0]?.sticky === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return (
-      <div
+      <th
         className={cx(`${blockClass}__head-hidden-select-all`, {
           [`${blockClass}__select-all-sticky-left`]:
             /* istanbul ignore next */
@@ -91,7 +91,8 @@ const SelectAll = (datagridState: DataGridState) => {
   };
 
   return (
-    <div
+    <TableSelectAll
+      {...selectProps}
       className={cx(
         `${blockClass}__head-select-all`,
         `${blockClass}__checkbox-cell`,
@@ -101,15 +102,11 @@ const SelectAll = (datagridState: DataGridState) => {
             isFirstColumnStickyLeft && Number(windowSize) > 671,
         }
       )}
-    >
-      <TableSelectAll
-        {...selectProps}
-        name={`${tableId}-select-all-checkbox-name`}
-        onSelect={handleSelectAllChange}
-        disabled={isFetching || selectProps?.disabled}
-        id={`${tableId}-select-all-checkbox-id`}
-      />
-    </div>
+      name={`${tableId}-select-all-checkbox-name`}
+      onSelect={handleSelectAllChange}
+      disabled={isFetching || selectProps?.disabled}
+      id={`${tableId}-select-all-checkbox-id`}
+    />
   );
 };