[terra-button] Fix Aria label bug (cerner#3726)

* [terra-button] Fix Aria label bug * Changes * Changelog
saket2403 · Feb 16, 2023 · 404c3be · 404c3be
1 parent 632d9ce
commit 404c3be
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git a/packages/terra-button/CHANGELOG.md b/packages/terra-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Fixed aria-label bug.
+
 ## 3.63.0 - (February 15, 2023)
 
 * Changed

diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx
@@ -308,9 +308,9 @@ class Button extends React.Component {
     );
 
     // ignore aria-label for button with decorative icons.
-    let ariaLabel = (iconType !== IconTypes.DECORATIVE) ? customProps['aria-label'] : undefined;
-    if ((isIconOnly || variant === 'utility') && iconType === IconTypes.INFORMATIVE) {
-      ariaLabel = ariaLabel || text;
+    let ariaLabel = customProps['aria-label'];
+    if (isIconOnly || variant === 'utility') {
+      ariaLabel = (iconType === IconTypes.INFORMATIVE) ? ariaLabel || text : undefined;
     }
 
     let ComponentType = 'button';

diff --git a/packages/terra-button/tests/jest/Button.test.jsx b/packages/terra-button/tests/jest/Button.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
 
-import Button from '../../src/Button';
+import Button, { IconTypes } from '../../src/Button';
 
 // Snapshot Tests
 it('should render a neutral button', () => {
@@ -49,9 +49,9 @@ it('should render a button with type equal to submit', () => {
   expect(button).toMatchSnapshot();
 });
 
-it('should render an icon', () => {
+it('should render an informative icon button', () => {
   const testElement = <img alt="icon" />;
-  const button = shallow(<Button icon={testElement} isIconOnly text="isIconOnly" />);
+  const button = shallow(<Button iconType={IconTypes.INFORMATIVE} icon={testElement} isIconOnly text="isIconOnly" />);
   expect(button).toMatchSnapshot();
 });
 

diff --git a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
@@ -171,6 +171,7 @@ exports[`should render a button with a title 1`] = `
 exports[`should render a button with accessible label 1`] = `
 <button
   aria-disabled={false}
+  aria-label="Custom Accessible Label"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
@@ -493,35 +494,6 @@ exports[`should render an action button 1`] = `
 </button>
 `;
 
-exports[`should render an icon 1`] = `
-<button
-  aria-disabled={false}
-  className="button neutral"
-  disabled={false}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
-  onMouseDown={[Function]}
-  title="isIconOnly"
-  type="button"
->
-  <span
-    className="button-label icon-only"
-  >
-    <span
-      className="icon"
-    >
-      <img
-        alt="icon"
-        className="icon-svg"
-      />
-    </span>
-  </span>
-</button>
-`;
-
 exports[`should render an icon and a text 1`] = `
 <button
   aria-disabled={false}
@@ -635,6 +607,36 @@ exports[`should render an icon only button with text as a fallback title 1`] = `
 </button>
 `;
 
+exports[`should render an informative icon button 1`] = `
+<button
+  aria-disabled={false}
+  aria-label="isIconOnly"
+  className="button neutral"
+  disabled={false}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  title="isIconOnly"
+  type="button"
+>
+  <span
+    className="button-label icon-only"
+  >
+    <span
+      className="icon"
+    >
+      <img
+        alt="icon"
+        className="icon-svg"
+      />
+    </span>
+  </span>
+</button>
+`;
+
 exports[`should render as an anchor when provided an href 1`] = `
 <a
   aria-disabled={false}