refactor(CodeSnippet): ariaLabel to aria-label (#13274)

Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Mar 10, 2023 · 4886cb9 · 4886cb9
1 parent 184d1a9
commit 4886cb9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -529,16 +529,17 @@ Map {
   },
   "CodeSnippet" => Object {
     "defaultProps": Object {
-      "ariaLabel": "Copy to clipboard",
+      "aria-label": "Copy to clipboard",
       "showLessText": "Show less",
       "showMoreText": "Show more",
       "type": "single",
       "wrapText": false,
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "children": Object {
         "type": "node",
       },

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -32,7 +32,8 @@ function CodeSnippet({
   feedback,
   feedbackTimeout,
   onClick,
-  ariaLabel,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
   copyText,
   copyButtonDescription,
   light,
@@ -185,7 +186,7 @@ function CodeSnippet({
       <Copy
         {...rest}
         onClick={handleCopyClick}
-        aria-label={ariaLabel}
+        aria-label={deprecatedAriaLabel || ariaLabel}
         aria-describedby={uid}
         className={codeSnippetClasses}
         feedback={feedback}
@@ -231,7 +232,7 @@ function CodeSnippet({
           (type === 'single' || type === 'multi') && !disabled ? 0 : null
         }
         className={`${prefix}--snippet-container`}
-        aria-label={ariaLabel || 'code-snippet'}
+        aria-label={deprecatedAriaLabel || ariaLabel || 'code-snippet'}
         aria-readonly={type === 'single' || type === 'multi' ? true : null}
         aria-multiline={type === 'multi' ? true : null}
         onScroll={(type === 'single' && handleScroll) || null}
@@ -287,7 +288,17 @@ CodeSnippet.propTypes = {
    * Specify a label to be read by screen readers on the containing <textbox>
    * node
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the containing <textbox>
+   * node
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Provide the content of your CodeSnippet as a node or string
@@ -391,7 +402,7 @@ CodeSnippet.propTypes = {
 };
 
 CodeSnippet.defaultProps = {
-  ariaLabel: 'Copy to clipboard',
+  ['aria-label']: 'Copy to clipboard',
   type: 'single',
   showMoreText: 'Show more',
   showLessText: 'Show less',

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -235,6 +235,11 @@ export const Playground = (args) => (
 );
 
 Playground.argTypes = {
+  ['aria-label']: {
+    table: {
+      disable: true,
+    },
+  },
   ariaLabel: {
     table: {
       disable: true,