fix(DataTable): fix a11y issues with selection variant (#14206)

tw15egan · kodiakhq[bot] · web-flow · commit a41006915ca8 · 2023-07-13T20:50:03.000Z
* fix(DataTable): fix a11y issues with selection variant

* chore(DataTable): update tests, snapshots

---------

Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js b/packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js
@@ -39,24 +39,6 @@ describe('DataTable.TableSelectRow', () => {
       expect(container).toMatchSnapshot();
     });
 
-    it('should respect ariaLabel prop', () => {
-      render(
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableSelectRow {...mockProps} />
-            </TableRow>
-          </TableHead>
-        </Table>
-      );
-
-      // eslint-disable-next-line testing-library/no-node-access
-      expect(screen.getByRole('checkbox').nextSibling).toHaveAttribute(
-        'aria-label',
-        mockProps.ariaLabel
-      );
-    });
-
     it('should respect checked prop', () => {
       render(
         <Table>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -626,10 +626,15 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                   type="checkbox"
                 />
                 <label
-                  aria-label="Select all rows"
                   class="cds--checkbox-label"
                   for="data-table-7__select-all"
-                />
+                >
+                  <span
+                    class="cds--visually-hidden"
+                  >
+                    Select all rows
+                  </span>
+                </label>
               </div>
             </th>
             <th
@@ -669,10 +674,15 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                   type="checkbox"
                 />
                 <label
-                  aria-label="Select row"
                   class="cds--checkbox-label"
                   for="data-table-7__select-row-b"
-                />
+                >
+                  <span
+                    class="cds--visually-hidden"
+                  >
+                    Select row
+                  </span>
+                </label>
               </div>
             </td>
             <td>
@@ -696,10 +706,15 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                   type="checkbox"
                 />
                 <label
-                  aria-label="Select row"
                   class="cds--checkbox-label"
                   for="data-table-7__select-row-a"
-                />
+                >
+                  <span
+                    class="cds--visually-hidden"
+                  >
+                    Select row
+                  </span>
+                </label>
               </div>
             </td>
             <td>
@@ -723,10 +738,15 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                   type="checkbox"
                 />
                 <label
-                  aria-label="Select row"
                   class="cds--checkbox-label"
                   for="data-table-7__select-row-c"
-                />
+                >
+                  <span
+                    class="cds--visually-hidden"
+                  >
+                    Select row
+                  </span>
+                </label>
               </div>
             </td>
             <td>
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
@@ -23,10 +23,15 @@ exports[`DataTable.TableSelectRow renders as expected - Component API should ren
                 type="checkbox"
               />
               <label
-                aria-label="Aria label"
                 class="cds--checkbox-label"
                 for="id"
-              />
+              >
+                <span
+                  class="cds--visually-hidden"
+                >
+                  Aria label
+                </span>
+              </label>
             </div>
           </td>
         </tr>
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -65,12 +65,14 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
         <label
           htmlFor={id}
           className={`${prefix}--checkbox-label`}
-          aria-label={deprecatedAriaLabel || ariaLabel}
           title={title}
           onClick={(evt) => {
             evt.stopPropagation();
-          }}
-        />
+          }}>
+          <span className={`${prefix}--visually-hidden`}>
+            {deprecatedAriaLabel || ariaLabel}
+          </span>
+        </label>
       }
     </div>
   );
