fix(DataTable): backport checkbox selection a11y fix to v10 (#14438)

carbon-design-system · Aug 16, 2023 · c200676 · c200676
1 parent d765d79
commit c200676
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 17 deletions.
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
@@ -988,11 +988,16 @@ exports[`DataTable selection should have select-all default to un-checked if no
                               type="checkbox"
                             />
                             <label
-                              aria-label="Select all rows"
                               className="bx--checkbox-label"
                               htmlFor="data-table-7__select-all"
                               onClick={[Function]}
-                            />
+                            >
+                              <span
+                                className="bx--visually-hidden"
+                              >
+                                Select all rows
+                              </span>
+                            </label>
                           </div>
                         </ForwardRef(InlineCheckbox)>
                       </th>
@@ -1388,11 +1393,16 @@ exports[`DataTable selection should render 1`] = `
                               type="checkbox"
                             />
                             <label
-                              aria-label="Select all rows"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-all"
                               onClick={[Function]}
-                            />
+                            >
+                              <span
+                                className="bx--visually-hidden"
+                              >
+                                Select all rows
+                              </span>
+                            </label>
                           </div>
                         </ForwardRef(InlineCheckbox)>
                       </th>
@@ -1483,11 +1493,16 @@ exports[`DataTable selection should render 1`] = `
                               type="checkbox"
                             />
                             <label
-                              aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-b"
                               onClick={[Function]}
-                            />
+                            >
+                              <span
+                                className="bx--visually-hidden"
+                              >
+                                Select row
+                              </span>
+                            </label>
                           </div>
                         </ForwardRef(InlineCheckbox)>
                       </td>
@@ -1546,11 +1561,16 @@ exports[`DataTable selection should render 1`] = `
                               type="checkbox"
                             />
                             <label
-                              aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-a"
                               onClick={[Function]}
-                            />
+                            >
+                              <span
+                                className="bx--visually-hidden"
+                              >
+                                Select row
+                              </span>
+                            </label>
                           </div>
                         </ForwardRef(InlineCheckbox)>
                       </td>
@@ -1609,11 +1629,16 @@ exports[`DataTable selection should render 1`] = `
                               type="checkbox"
                             />
                             <label
-                              aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-c"
                               onClick={[Function]}
-                            />
+                            >
+                              <span
+                                className="bx--visually-hidden"
+                              >
+                                Select row
+                              </span>
+                            </label>
                           </div>
                         </ForwardRef(InlineCheckbox)>
                       </td>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
@@ -47,11 +47,16 @@ exports[`DataTable.TableSelectAll should render 1`] = `
                         type="checkbox"
                       />
                       <label
-                        aria-label="Select all rows in the table"
                         className="bx--checkbox-label"
                         htmlFor="id"
                         onClick={[Function]}
-                      />
+                      >
+                        <span
+                          className="bx--visually-hidden"
+                        >
+                          Select all rows in the table
+                        </span>
+                      </label>
                     </div>
                   </ForwardRef(InlineCheckbox)>
                 </th>

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
@@ -46,11 +46,16 @@ exports[`DataTable.TableSelectRow should render 1`] = `
                         type="checkbox"
                       />
                       <label
-                        aria-label="Aria label"
                         className="bx--checkbox-label"
                         htmlFor="id"
                         onClick={[Function]}
-                      />
+                      >
+                        <span
+                          className="bx--visually-hidden"
+                        >
+                          Aria label
+                        </span>
+                      </label>
                     </div>
                   </ForwardRef(InlineCheckbox)>
                 </td>

diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -60,12 +60,12 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
         <label
           htmlFor={id}
           className={`${prefix}--checkbox-label`}
-          aria-label={ariaLabel}
           title={title}
           onClick={(evt) => {
             evt.stopPropagation();
-          }}
-        />
+          }}>
+          <span className={`${prefix}--visually-hidden`}>{ariaLabel}</span>
+        </label>
       }
     </div>
   );