refactor(InlineCheckbox): update aria-label (NEW) (#13364)

* refactor(InlineCheckbox): update aria-label (new) * Update packages/react/src/components/InlineCheckbox/InlineCheckbox.js * chore: yarn format --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 22, 2023 · 4e43b6c · 4e43b6c
1 parent 210ea21
commit 4e43b6c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/packages/react/src/components/DataTable/TableSelectAll.tsx b/packages/react/src/components/DataTable/TableSelectAll.tsx
@@ -69,7 +69,7 @@ const TableSelectAll = ({
       scope="col"
       className={cx(`${prefix}--table-column-checkbox`, className)}>
       <InlineCheckbox
-        ariaLabel={ariaLabel}
+        aria-label={ariaLabel}
         checked={checked}
         id={id}
         indeterminate={indeterminate}

diff --git a/packages/react/src/components/DataTable/TableSelectRow.tsx b/packages/react/src/components/DataTable/TableSelectRow.tsx
@@ -96,7 +96,7 @@ const TableSelectRow = ({
           labelText: ariaLabel,
           hideLabel: true,
         })}
-        {...(!radio && { ariaLabel })}
+        {...(!radio && { ['aria-label']: ariaLabel })}
       />
     </td>
   );

diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
@@ -13,7 +13,7 @@ import userEvent from '@testing-library/user-event';
 describe('InlineCheckbox', () => {
   it('should render', () => {
     render(
-      <InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
+      <InlineCheckbox aria-label="test-label" id="test-id" name="test-name" />
     );
     expect(screen.getByRole('checkbox')).toBeInTheDocument();
   });
@@ -23,7 +23,7 @@ describe('InlineCheckbox', () => {
     render(
       /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
       <div onClick={onClick}>
-        <InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
+        <InlineCheckbox aria-label="test-label" id="test-id" name="test-name" />
       </div>
     );
     userEvent.click(screen.getByRole('checkbox'));

diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
+import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 
@@ -16,7 +17,8 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
   forwardRef
 ) {
   const {
-    ariaLabel,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     checked = false,
     disabled,
     id,
@@ -61,7 +63,7 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
         <label
           htmlFor={id}
           className={`${prefix}--checkbox-label`}
-          aria-label={ariaLabel}
+          aria-label={deprecatedAriaLabel || ariaLabel}
           title={title}
           onClick={(evt) => {
             evt.stopPropagation();
@@ -76,7 +78,16 @@ InlineCheckbox.propTypes = {
   /**
    * Specify the label for the control
    */
-  ariaLabel: PropTypes.string.isRequired,
+  ['aria-label']: PropTypes.string.isRequired,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify the label for the control
+   */
+  ariaLabel: deprecate(
+    PropTypes.string.isRequired,
+    'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.'
+  ),
 
   /**
    * Specify whether the underlying control is checked, or not