From 177f6bf21400124e784cb81c2cfa36c677077573 Mon Sep 17 00:00:00 2001
From: Supreeth <supreeth.mr1990@gmail.com>
Date: Mon, 13 Feb 2023 18:49:11 +0530
Subject: [PATCH] [terra-button] Added support for Decorative Icon buttons and
 Anchor button (#3722)

* Added support for Decorative Icon buttons

* Anchor button changes

---------

Co-authored-by: SM051274 <sm051274@cerner.net>
---
 packages/terra-action-header/CHANGELOG.md     |   3 +
 .../__snapshots__/ActionHeader.test.jsx.snap  |  17 ++
 packages/terra-alert/CHANGELOG.md             |   3 +
 .../jest/__snapshots__/Alert.test.jsx.snap    |   8 +
 packages/terra-button-group/CHANGELOG.md      |   3 +
 .../__snapshots__/ButtonGroup.test.jsx.snap   |   2 +
 .../ButtonGroupButton.test.jsx.snap           |   9 +
 packages/terra-button/CHANGELOG.md            |   3 +
 packages/terra-button/src/Button.jsx          |  25 ++-
 .../jest/__snapshots__/Button.test.jsx.snap   |  13 +-
 .../chrome_tiny/button-spec/anchor-button.png | Bin 0 -> 4073 bytes
 .../chrome_tiny/button-spec/anchor-button.png | Bin 0 -> 4514 bytes
 .../chrome_tiny/button-spec/anchor-button.png | Bin 0 -> 4171 bytes
 .../terra-button/tests/wdio/button-spec.js    |   8 +
 packages/terra-core-docs/CHANGELOG.md         |   3 +
 .../terra-dev-site/doc/button/About.1.doc.mdx |   1 +
 .../doc/button/AccessibilityGuide.2.doc.mdx   | 210 ++++++++++++++++++
 ...hangeLog.3.doc.mdx => ChangeLog.4.doc.mdx} |   0
 ...Guide.2.doc.mdx => UpgradeGuide.3.doc.mdx} |   0
 .../doc/button/example/A11yButtonLabel.jsx    |  23 ++
 .../doc/button/example/A11yIconButton.jsx     |  23 ++
 .../doc/button/example/ButtonIcon.jsx         |  10 +-
 .../doc/button/example/ButtonVariant.jsx      |   4 +-
 .../doc/button/example/IconButtonVariant.jsx  |  16 ++
 .../test/button/AnchorButton.test.jsx         |  13 ++
 packages/terra-search-field/CHANGELOG.md      |   3 +
 .../__snapshots__/SearchField.test.jsx.snap   |  16 +-
 packages/terra-status-view/CHANGELOG.md       |   3 +
 .../__snapshots__/StatusView.test.jsx.snap    |   2 +
 packages/terra-toggle-button/CHANGELOG.md     |   3 +
 .../__snapshots__/ToggleButton.test.jsx.snap  |   6 +-
 31 files changed, 405 insertions(+), 25 deletions(-)
 create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/anchor-button.png
 create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/anchor-button.png
 create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/anchor-button.png
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/AccessibilityGuide.2.doc.mdx
 rename packages/terra-core-docs/src/terra-dev-site/doc/button/{ChangeLog.3.doc.mdx => ChangeLog.4.doc.mdx} (100%)
 rename packages/terra-core-docs/src/terra-dev-site/doc/button/{UpgradeGuide.2.doc.mdx => UpgradeGuide.3.doc.mdx} (100%)
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yButtonLabel.jsx
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yIconButton.jsx
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/example/IconButtonVariant.jsx
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/test/button/AnchorButton.test.jsx

diff --git a/packages/terra-action-header/CHANGELOG.md b/packages/terra-action-header/CHANGELOG.md
index 1228e35d62f..3c17bf18106 100644
--- a/packages/terra-action-header/CHANGELOG.md
+++ b/packages/terra-action-header/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 2.75.0 - (December 7, 2022)
 
 * Changed
diff --git a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
index 522ba7bd47d..674e270dacd 100644
--- a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
+++ b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap
@@ -18,6 +18,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
             className="header-icon maximize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -57,6 +58,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -94,6 +96,7 @@ exports[`ActionHeader should render an action header with back and close buttons
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -119,6 +122,7 @@ exports[`ActionHeader should render an action header with back and close buttons
             className="header-icon back"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -151,6 +155,7 @@ exports[`ActionHeader should render an action header with back button and title
             className="header-icon back"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -181,6 +186,7 @@ exports[`ActionHeader should render an action header with close button and title
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -207,6 +213,7 @@ exports[`ActionHeader should render an action header with custom button and titl
   title="Action Header"
 >
   <Button
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -245,6 +252,7 @@ exports[`ActionHeader should render an action header with maximize button and ti
             className="header-icon maximize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -277,6 +285,7 @@ exports[`ActionHeader should render an action header with minimize button and ti
             className="header-icon minimize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -302,6 +311,7 @@ exports[`ActionHeader should render an action header with multiple custom button
 >
   <span>
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -313,6 +323,7 @@ exports[`ActionHeader should render an action header with multiple custom button
       variant="neutral"
     />
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -346,6 +357,7 @@ exports[`ActionHeader should render an action header with next and previous butt
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -364,6 +376,7 @@ exports[`ActionHeader should render an action header with next and previous butt
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -409,6 +422,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={true}
@@ -426,6 +440,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -462,6 +477,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -480,6 +496,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={true}
diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md
index 6096b8f78f1..abeed3f649a 100644
--- a/packages/terra-alert/CHANGELOG.md
+++ b/packages/terra-alert/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 4.63.0 - (February 7, 2023)
 
 * Changed
diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
index 28bb44f2623..b18d4583001 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -753,6 +753,7 @@ exports[`Alert of type success with an action button text content should render
 <InjectIntl(Alert)
   action={
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -796,6 +797,7 @@ exports[`Alert of type success with an action button text content should render
   <Alert
     action={
       <Button
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -901,6 +903,7 @@ exports[`Alert of type success with an action button text content should render
           className="actions"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1571,6 +1574,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
 <InjectIntl(Alert)
   action={
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -1623,6 +1627,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
   <Alert
     action={
       <Button
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -1736,6 +1741,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
           className="actions actions-custom"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1770,6 +1776,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
             </button>
           </Button>
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1937,6 +1944,7 @@ exports[`Dismissible Alert that includes actions section should render an alert
           className="actions"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
diff --git a/packages/terra-button-group/CHANGELOG.md b/packages/terra-button-group/CHANGELOG.md
index 9d3887ac0ec..c20dbdf0fb6 100644
--- a/packages/terra-button-group/CHANGELOG.md
+++ b/packages/terra-button-group/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 3.61.0 - (December 7, 2022)
 
 * Changed
diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
index 0e0333e61d6..6d981b6cd5d 100644
--- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
+++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap
@@ -26,6 +26,7 @@ exports[`correctly applies the theme context className 1`] = `
         <Button
           aria-pressed={false}
           className="button-group-button orion-fusion-theme"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -76,6 +77,7 @@ exports[`correctly applies the theme context className 1`] = `
         <Button
           aria-pressed={false}
           className="button-group-button orion-fusion-theme"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
index 7041deba133..82de545f36d 100644
--- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
+++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap
@@ -14,6 +14,7 @@ exports[`correctly applies the theme context className 1`] = `
   >
     <Button
       className="button-group-button orion-fusion-theme"
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -57,6 +58,7 @@ exports[`correctly applies the theme context className 1`] = `
 exports[`should render a default component 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -75,6 +77,7 @@ exports[`should render a default component 1`] = `
 exports[`should render as disabled 1`] = `
 <Button
   className="button-group-button is-disabled"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={true}
@@ -98,6 +101,7 @@ exports[`should render with icon only 1`] = `
       alt="icon"
     />
   }
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -116,6 +120,7 @@ exports[`should render with icon only 1`] = `
 exports[`should render with onBlur 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -134,6 +139,7 @@ exports[`should render with onBlur 1`] = `
 exports[`should render with onClick 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -153,6 +159,7 @@ exports[`should render with onClick 1`] = `
 exports[`should render with onFocus 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -171,6 +178,7 @@ exports[`should render with onFocus 1`] = `
 exports[`should render with onKeyDown 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -189,6 +197,7 @@ exports[`should render with onKeyDown 1`] = `
 exports[`should render with onKeyUp 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
diff --git a/packages/terra-button/CHANGELOG.md b/packages/terra-button/CHANGELOG.md
index 55f16f87690..888dc88e3ea 100644
--- a/packages/terra-button/CHANGELOG.md
+++ b/packages/terra-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added support for decorative icon buttons.
+
 ## 3.62.0 - (December 7, 2022)
 
 * Changed
diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx
index dc2b8a7da67..0cc4cce31cf 100644
--- a/packages/terra-button/src/Button.jsx
+++ b/packages/terra-button/src/Button.jsx
@@ -25,6 +25,11 @@ const ButtonTypes = {
   RESET: 'reset',
 };
 
+const IconTypes = {
+  DECORATIVE: 'decorative',
+  INFORMATIVE: 'informative',
+};
+
 const propTypes = {
   /**
    * Sets the href. When set will render the component as an anchor tag.
@@ -38,6 +43,12 @@ const propTypes = {
    * Whether or not the button should only display as an icon.
    */
   isIconOnly: PropTypes.bool,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * specifies the icon type. if not specified defaluts to DECORATIVE icon.
+   * refer Icon [Accessiblity Guide](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/icon/accessibility-guide) to know about types of icon.
+   */
+  iconType: PropTypes.oneOf([IconTypes.DECORATIVE, IconTypes.INFORMATIVE]),
   /**
    * Whether or not the button should display as a block.
    */
@@ -107,6 +118,7 @@ const defaultProps = {
   isCompact: false,
   isDisabled: false,
   isIconOnly: false,
+  iconType: IconTypes.DECORATIVE,
   isReversed: false,
   refCallback: undefined,
   title: undefined,
@@ -225,6 +237,7 @@ class Button extends React.Component {
       isCompact,
       isDisabled,
       isIconOnly,
+      iconType,
       isReversed,
       text,
       type,
@@ -294,12 +307,17 @@ class Button extends React.Component {
       </span>
     );
 
-    let ariaLabel = customProps['aria-label'];
-    if (isIconOnly || variant === 'utility') {
+    // ignore aria-label for buttons used with decorative icons.
+    let ariaLabel = (iconType !== IconTypes.DECORATIVE) ? customProps['aria-label'] : undefined;
+    if ((isIconOnly || variant === 'utility') && iconType === IconTypes.INFORMATIVE) {
       ariaLabel = ariaLabel || text;
     }
 
-    const ComponentType = href ? 'a' : 'button';
+    let ComponentType = 'button';
+    if (href) {
+      ComponentType = 'a';
+      customProps.role = 'button';
+    }
 
     return (
       <ComponentType
@@ -319,7 +337,6 @@ class Button extends React.Component {
         onFocus={this.handleFocus}
         href={href}
         ref={refCallback}
-        role={href ? 'button' : undefined}
       >
         {buttonLabel}
       </ComponentType>
diff --git a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
index b67d979e71f..b10da30c9b5 100644
--- a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
+++ b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap
@@ -9,6 +9,7 @@ exports[`correctly applies the theme context className 1`] = `
   }
 >
   <Button
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -46,6 +47,7 @@ exports[`correctly applies the theme context className 1`] = `
 
 exports[`should pass in refCallback as the ref prop of the input element 1`] = `
 <Button
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -169,7 +171,6 @@ 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]}
@@ -370,7 +371,6 @@ exports[`should render a neutral button 1`] = `
 exports[`should render a utility button 1`] = `
 <button
   aria-disabled={false}
-  aria-label="utility"
   className="button utility"
   disabled={false}
   onBlur={[Function]}
@@ -391,7 +391,6 @@ exports[`should render a utility button 1`] = `
 exports[`should render a utility button with a custom accessible label 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Custom Accessible Label"
   className="button utility"
   disabled={false}
   onBlur={[Function]}
@@ -412,7 +411,6 @@ exports[`should render a utility button with a custom accessible label 1`] = `
 exports[`should render a utility button with a custom title 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button utility"
   disabled={false}
   onBlur={[Function]}
@@ -433,7 +431,6 @@ exports[`should render a utility button with a custom title 1`] = `
 exports[`should render a utility button with text as a fallback accessible label 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button utility"
   disabled={false}
   onBlur={[Function]}
@@ -454,7 +451,6 @@ exports[`should render a utility button with text as a fallback accessible label
 exports[`should render a utility button with text as a fallback title 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button utility"
   disabled={false}
   onBlur={[Function]}
@@ -500,7 +496,6 @@ exports[`should render an action button 1`] = `
 exports[`should render an icon 1`] = `
 <button
   aria-disabled={false}
-  aria-label="isIconOnly"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
@@ -563,7 +558,6 @@ exports[`should render an icon and a text 1`] = `
 exports[`should render an icon only button with a custom accessible label 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Custom Accessible Label"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
@@ -584,7 +578,6 @@ exports[`should render an icon only button with a custom accessible label 1`] =
 exports[`should render an icon only button with a custom title 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
@@ -605,7 +598,6 @@ exports[`should render an icon only button with a custom title 1`] = `
 exports[`should render an icon only button with text as a fallback accessible label 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
@@ -626,7 +618,6 @@ exports[`should render an icon only button with text as a fallback accessible la
 exports[`should render an icon only button with text as a fallback title 1`] = `
 <button
   aria-disabled={false}
-  aria-label="Icon Only"
   className="button neutral"
   disabled={false}
   onBlur={[Function]}
diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/anchor-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/anchor-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dc6a6ffdb3bba4890bd341d70489af9b8d4eacb
GIT binary patch
literal 4073
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
Rb^r-afzr@ZFITnt`(KVVw3z?^

literal 0
HcmV?d00001

diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/anchor-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/anchor-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..63931cef23b1dd9a19c1b04d78ce232b250d298d
GIT binary patch
literal 4514
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
S*?@m9B$}#vDrHKRq5lP<n5tX=

literal 0
HcmV?d00001

diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/anchor-button.png b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/anchor-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1108d1fe7ce2fbe804ad6cab9e3121e0e2e5fd5
GIT binary patch
literal 4171
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
X@$O6G>&w7T0vttI6`3+A6aRk!0;C>7

literal 0
HcmV?d00001

diff --git a/packages/terra-button/tests/wdio/button-spec.js b/packages/terra-button/tests/wdio/button-spec.js
index a64dc8eaae6..0f861a8ae77 100644
--- a/packages/terra-button/tests/wdio/button-spec.js
+++ b/packages/terra-button/tests/wdio/button-spec.js
@@ -178,6 +178,14 @@ Terra.describeViewports('Button', ['tiny'], () => {
     Terra.validates.element('compact', { selector: '#compactButton' });
   });
 
+  describe('displays anchor button', () => {
+    it('Anchor button', () => {
+      browser.url('/raw/tests/cerner-terra-core-docs/button/anchor-button');
+      $('<a>').click();
+      Terra.validates.element('anchor-button');
+    });
+  });
+
   describe('Programmatic Focus', () => {
     before(() => {
       browser.url('/raw/tests/cerner-terra-core-docs/button/programmatic-focus');
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 7ed275ed239..c53b5b16dd5 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added A11y guide and examples for `terra-button`.
+
 ## 1.20.0 - (February 7, 2023)
 
 * Changed
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
index 369742cd6d4..f3921e525df 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx
@@ -7,6 +7,7 @@ import ButtonDisabled from './example/ButtonDisabled?dev-site-example';
 import ButtonOnClick from './example/ButtonOnClick?dev-site-example';
 import ButtonIcon from './example/ButtonIcon?dev-site-example';
 import ButtonVariant from './example/ButtonVariant?dev-site-example';
+import IconButtonVariant from './example/IconButtonVariant?dev-site-example';
 
 import ButtonPropsTable from 'terra-button/src/Button?dev-site-props-table';
 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/AccessibilityGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/AccessibilityGuide.2.doc.mdx
new file mode 100644
index 00000000000..419644b60fb
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/AccessibilityGuide.2.doc.mdx
@@ -0,0 +1,210 @@
+import { Notice } from "@cerner/terra-docs";
+import { Badge } from 'terra-image/package.json?dev-site-package';
+import Whitespace from "../../common/layout-helpers/Whitespace";
+import ButtonOnClick from "./example/ButtonOnClick";
+import A11yIconButton from "./example/A11yIconButton";
+import A11yButtonLabel from "./example/A11yButtonLabel";
+
+<Badge />
+
+# Accessibility Guide for Terra Button
+
+## Why is the accessibility of buttons important? 
+
+Buttons are one of HTML's most foundational elements and are a vital tool for creating accessible and intuitive user experiences. However, because buttons are so fundamental to the functionality of web content, inaccessible or improperly implemented Buttons can present a severe barrier to the accessibility of a product.
+
+It is critical that buttons are coded correctly to ensure they are keyboard accessible. Additionally, buttons must be programmatically understood as a button to properly convey to users of assistive technologies that they are on a button. Users expect buttons to perform an action and not do something unexpected. For buttons to be highly usable and easily understood, it is critical that all buttons be uniquely labeled and descriptive of what action will be taken when activated. For example:
+
+- **Blind screen reader users** do not necessarily interact with pages in a linear fashion and can use a button out of context. They need to know what kind of a component they are on and how to interact with it – different components have different expectations. They need the words within the button to be descriptive of purpose. 
+- **People using speech input software** require unique Button labels to effectively activate the Button. 
+- **Keyboard only users** navigate the page using only a keyboard. Buttons must be keyboard accessible for keyboard only users to interact with the button. Additionally, a visible keyboard focus is crucial this user to see where they are on the page.
+
+## Accessibility Considerations
+
+### Code Considerations
+
+- Ensure all buttons receive keyboard focus and can be interacted with only the keyboard.  
+  - Do NOT override keyboard focus state or use a TABINDEX greater than zero. 
+  - Buttons should be coded in the user logical reading order of the page to ensure a meaningful experience.  
+  - Never use the down event to activate a button; always use the up event. 
+- Do NOT override the implicit/explicit role of a button; if another role is required do NOT use the Terra button.
+
+<Notice variant="important" ariaLevel="4">
+
+##### Accessibility Guidance: Buttons must have an accessible name which is descriptive of the purpose
+
+<div aria-label="Example demo">
+    <ButtonOnClick />
+</div>
+
+```jsx
+import Button from 'terra-button/lib/Button';
+
+<Button text="Show Alert" onClick={() => alert('Ive been clicked!')} />
+```
+
+The visual name of the label must match the programmatic name. The best practice is to use words within the button label. If an Aria-label is used the Aria-label must start with the visual label of the button.
+
+The screen reader user will hear something like: <samp> Show Alert: Button </samp>
+
+##### Accessibility Guidance: Using Meaningful or Decorative Icon Buttons
+
+```jsx
+import IconPrinter from 'terra-icon/lib/icon/IconPrinter';
+import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter';
+import { IconButton, IconTypes } from 'terra-button';
+
+const Icon = <IconPrinter a11yLabel="Print" />;
+const DecorativeIcon = <DecoIconPrinter />;
+
+  <div>
+    <IconButton icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} />
+    <IconButton icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} /> 
+    <IconButton icon={DecorativeIcon} iconType={IconTypes.INFORMATIVE} text="Print" />
+  </div>
+```
+
+<div aria-label="Example demo">
+    <A11yIconButton />
+</div>
+
+For buttons that use icons that convey a meaning, it is critical to include alternate content that represents that icon meaning.
+
+- The first example is  a button with **Meaningful Icon Only** and the screen reader will read <samp>Print Button.</samp>
+
+- The second example is  a button with **Meaningful Icon and Text** and the screen reader will read <samp>Print All Documents Button.</samp>
+
+For buttons that use icons that do not convey a meaning, make sure they are marked as purely decorative.
+
+- The third example is  a button with **Decorative Icon and Text** and the screen reader will read <samp>Print Button.</samp>
+
+##### Accessibility Guidance: Using Non-unique Button label
+
+<div aria-label="Example demo">
+  <A11yButtonLabel />
+</div>
+
+```jsx
+import Button from 'terra-button/lib/Button';
+
+<Button aria-label="Add Allergies" text="Add" className={cx('button')} />
+```
+The screen reader user will hear something like: <samp> Add Allergies Button  </samp>
+
+![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) The above example is NOT recommended. For Accessibility Best Practices it is recommended to use the same text for both visual and the programmatic label of the button.
+
+Ensure any non-unique button label that is visually related to content in the page must be programmatically associated with its content. For example, a “Add” button next to the word “allergies” must be appropriate associated with the word allergies.
+
+</Notice>
+
+<Whitespace />
+
+### Content Considerations:
+
+- Must provide engineers with a meaningful and descriptive button label that conveys the button's purpose. The best practice is to use a verb that describes the button action.
+  - Avoid non-unique button labels unless the buttons perform the exact same function. For example, two print buttons that print the exact same document are fine to have. However, if the buttons print different documents, this would be an accessibility failure.
+  - If non-unique names cannot be avoided, inform the engineer of other text on the page that can be programmatically associated to other content on the page that may help describe a visual relationship. For example, multiple “Learn more” buttons on the page are placed in visual proximity to the item the user can learn more about. 
+  - Ensure the first word(s) of the programmatic label should match the visual label. 
+- When using icons, inform engineers when an icon is purely decorative. Otherwise, provide the engineer with meaningful alternate text which will serve as the accessible name.  
+  - Ensure any icon used within a button is used to consistently represent the same functionality. Additionally, any alternate content used with an icon must be consistent for a predictable user experience. 
+- When implementing buttons ensure the button has good contrast ratios to be easily perceived against its background color. If changing the default colors, the text color must meet a minimum contrast ratio against the background color. See [WCAG 1.4.3 Contrast Minimum](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) for more information. 
+- Not everyone perceives color so never use color as the only way to convey meaning within the interface. Always provide both color and text or a shape together to represent the meaning. 
+- Ensure the engineers understand the logical reading order of the page.
+- Never add unexpected behaviors to buttons that could cause a change of context on focus or on activation of the button. Ensure buttons always meet the user’s expectations.  
+- After coded, ensure all interactable elements receive keyboard focus in the users reading order and display a visible keyboard focus. Ensure the keyboard user does not get “trapped” somewhere on the page preventing them from the entire workflow.
+
+<Whitespace newline={2} />
+
+## Usability Expectations:
+
+Users expect Buttons to perform the action indicated in the button label.
+
+### Interaction Details
+
+Mouse users expect the cursor to change to a hand with pointing finger when the Button is hovered. Keyboard only users expect to see a visible keyboard focus indicator when the Button is in focus. 
+
+### Keyboard Navigation
+
+Buttons have the following keyboard navigation expectations:
+
+| Key/Sequence | Description |
+|---|---|
+|**Tab**| Moves focus on and off the Button. User expects elements to receive keyboard focus in the logical reading order of the page.  |
+|**Enter**| Executes the Button and moves focus to the Button target. |
+
+## Support Compliance
+
+### Primary Criteria
+
+- [**1.1.1 Non-text Content**](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) – Partially Supports 
+  - Terra provides the ability to use Icons inside a Button. Terra also provides the ability to set those icons as decorative and meaningful. 
+  - Engineers must ensure when an Icon conveys meaning, to add appropriate ALT text to create a meaningful Button label. If the icon does not convey meaning and is only decorative, it should be marked as decorative.
+  - Content creators must provide engineers with meaningful text when using icons that convey meaning. For example, when a button has a print icon with the word "instructions" then the Icon is conveying information thus must have the alternate text “Print”.
+  - If icons are not meaningful, content creators must inform engineers when the icon is "decorative" only. For example, when a button has the print Icon next to the word "print"; the Icon would be decorative and not have alternate text.   
+
+- [**1.3.1 Info and Relationships**](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) — Partially Supports
+  - Terra Button does allow users to set a programmatic label of the button (a text string) but does not allow consuming teams the ability to set extra programmatic context for buttons to ensure they are programmatically associated to other related content. 
+  - When applicable, engineers must ensure that any visual relationship to the button is programmatically codified. E.g.: to non-unique button "learn more", must be programmatically associated to the words to describe the "learn more" button.  
+  - Content creators, when applicable, if other text on the page describes a non-unique button purpose through visual presentation; make sure engineers understand the relationship and apply a programmatic association to the text. For example, multiple buttons named “View details” next to the items they will present information about. If using formatting to convey information, it should be available in text. Any visual formatting must be available in text programmatically. Use words in addition to the format to convey necessary information.   
+
+- [**2.1.1 Keyboard**](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html) — Supports 
+  - Interactable Terra Buttons natively receive focus, can be interacted with, and acted upon using the keyboard. Consuming teams must ensure to not overwrite native behavior.
+  - Engineers must ensure behaviors is maintained.
+  - Content creators must ensure that all elements with focus are receiving the right treatment, Focus Order, Focus Visible. No Keyboard Trap. 
+
+- [**2.4.6 Headings and Labels**](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html) — Supports 
+  - Terra Buttons provides the ability to add descriptive and unique labels. 
+  - Engineers must implement the descriptive label to the button.  
+  - Content creators are responsible for providing the unique label that describes the action the button performs.  
+
+- [**2.5.3 Label in Name**](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html) — Supports 
+  - Terra provides teams with the ability to meet this criterion.
+  - Engineers must ensure the programmatic label matches the visual labels.
+  - Content creators must provide engineers with the appropriate, programmatic, and visual labels essentially match. The first word of the programmatic label should match the first word of the visual label.
+
+### Secondary Criteria
+
+- [**1.3.2 Meaningful Sequence**](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html) — Supports 
+  - Terra Buttons by themselves do not have a meaningful sequence. 
+  - Engineers must ensure that content is coded in the expected reading order of the page. Never use a TABINDEX higher than 0. 
+
+- [**1.4.1 Use of Color**](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html) - Partially Supports 
+  - Engineers must ensure Terra buttons styles do NOT rely on color alone to convey information.  
+  - Content Creators must ensure color is NOT the only method used to convey information. Instead, use both color and text. 
+
+- [**1.4.3 Contrast (Minimum)**](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — Supports 
+  - Terra Buttons natively meet appropriate contrast ratios and support this criterion. 
+    If consuming teams alter button colors, the consuming team must ensure Contrast (minimum) is met. 
+
+- [**2.1.2 No Keyboard Trap**](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) — Supports 
+  - Engineers need to ensure when Terra button is implemented with other components, User can navigate through the code without a keyboard trap.  
+
+- [**2.2.1 Timing Adjustable**](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable.html) — Supports 
+  - Consuming teams must ensure Terra Buttons do not have a time limit to interact with. 
+
+- [**2.4.3 Focus Order**](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html) — Supports 
+  - Engineers must ensure that the focus order is the user's expected reading order and preserves page meaning. Focus order should come from the order the content is coded. 
+    Do NOT implement a tab index value greater than zero. 
+  - Content creators should convey to the engineers what the proper reading order of the page should be. 
+
+- [**2.4.7 Focus Visible**](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) — Supports 
+  - Terra Buttons provide a natively keyboard focus. 
+  - Consuming teams must ensure visible focus is maintained for all elements.  
+  - Content creators must NOT remove visible focus. Ensure visible focus follows the non-text contrast ratio if the visible focus color has changed. (See 1.4.11 Non-text contrast).  
+
+- [**2.5.2 Pointer Cancellation**](https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation)  — Supports 
+  - Terra buttons use the up event to perform actions allowing the user to move away from the button or Button while still pressing down, canceling the selection. 
+  - Engineers must ensure that actions are not activated by the down action allowing the user to cancel interactions. 
+
+- [**3.2.1 On Focus**](https://www.w3.org/WAI/WCAG21/Understanding/on-focus) —Supports 
+  - Engineers must ensure Terra buttons do NOT initiate a change of context, or anything unexpected, on focus. 
+  - Content creators should ensure there is no change of context on focus.  
+
+- [**3.2.2 On Input**](https://www.w3.org/WAI/WCAG21/Understanding/on-input) — Supports 
+  - Terra Buttons does not cause an unexpected change of context on input. Terra provides the ability to customize button actions. 
+  - Engineers must ensure nothing unexpected happens on input. 
+  - Content creators must also ensure buttons do not create a change of context for the user. If there is a change of context on input, the user must be warned (with text) before the user activates the button.  
+
+- [**3.2.4 Consistent Identification**](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification) - Supports
+  - Content creators should ensure consistency of buttons based on functionality/actions for both compliance in accessibility and usability. Ensure consistency when using icons and labels across product, functionality
+  
\ No newline at end of file
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/ChangeLog.3.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/ChangeLog.4.doc.mdx
similarity index 100%
rename from packages/terra-core-docs/src/terra-dev-site/doc/button/ChangeLog.3.doc.mdx
rename to packages/terra-core-docs/src/terra-dev-site/doc/button/ChangeLog.4.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/UpgradeGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/UpgradeGuide.3.doc.mdx
similarity index 100%
rename from packages/terra-core-docs/src/terra-dev-site/doc/button/UpgradeGuide.2.doc.mdx
rename to packages/terra-core-docs/src/terra-dev-site/doc/button/UpgradeGuide.3.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yButtonLabel.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yButtonLabel.jsx
new file mode 100644
index 00000000000..e955fe6b61b
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yButtonLabel.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from 'terra-button/lib/Button';
+import Card from 'terra-card';
+import classNames from 'classnames/bind';
+import styles from './ButtonDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const A11yButtonLabel = () => (
+  <Card>
+    <Card.Body>
+      <p>
+        Allergies, also known as allergic diseases, are a number of conditions caused by hypersensitivity of the immune
+        system to typically harmless substances in the environment. These diseases include hay fever, food allergies,
+        atopic dermatitis, allergic asthma, and anaphylaxis. Symptoms may include red eyes, an itchy rash, sneezing,
+        coughing, a runny nose, shortness of breath, or swelling.
+      </p>
+      <Button aria-label="Learn More About Allergies" href="https://en.wikipedia.org/wiki/Allergy" text="Learn More" className={cx('button')} />
+    </Card.Body>
+  </Card>
+);
+
+export default A11yButtonLabel;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yIconButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yIconButton.jsx
new file mode 100644
index 00000000000..4871a4c7e8d
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/A11yIconButton.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import IconPrinter from 'terra-icon/lib/icon/IconPrinter';
+import { IconButton, IconTypes } from 'terra-button';
+import Card from 'terra-card';
+import classNames from 'classnames/bind';
+import styles from './ButtonDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const Icon = <IconPrinter a11yLabel="Print" />;
+const DecorativeIcon = <IconPrinter />;
+
+const A11yIconButton = () => (
+  <Card>
+    <Card.Body>
+      <IconButton icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+      <IconButton icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+      <IconButton icon={DecorativeIcon} iconType={IconTypes.INFORMATIVE} text="Print" className={cx('button')} />
+    </Card.Body>
+  </Card>
+);
+
+export default A11yIconButton;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIcon.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIcon.jsx
index bc75a72b4f6..bf0583bf739 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIcon.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonIcon.jsx
@@ -6,13 +6,15 @@ import styles from './ButtonDocCommon.module.scss';
 
 const cx = classNames.bind(styles);
 
-const Icon = <IconEdit />;
+const InformativeIcon = <IconEdit a11yLabel="Edit Icon" />;
+const DecorativeIcon = <IconEdit />;
 
 const ButtonIcon = () => (
   <div>
-    <Button icon={Icon} text="icon" className={cx('button')} />
-    <Button icon={Icon} text="icon" isReversed className={cx('button')} />
-    <Button icon={Icon} isIconOnly text="Icon Only Button" className={cx('button')} />
+    <Button icon={InformativeIcon} text="Informative icon" className={cx('button')} />
+    <Button icon={DecorativeIcon} text="Decorative icon" isReversed className={cx('button')} />
+    <Button icon={DecorativeIcon} isIconOnly text="Decorative Icon Only Button" className={cx('button')} />
+    <Button icon={InformativeIcon} isIconOnly text="Informative Icon Only Button" className={cx('button')} />
   </div>
 );
 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonVariant.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonVariant.jsx
index fcfebd67ffb..fca40cc08d2 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonVariant.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonVariant.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import IconEdit from 'terra-icon/lib/icon/IconEdit';
 import Button from 'terra-button/lib/Button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
@@ -12,8 +11,7 @@ const ButtonVariant = () => (
     <Button text="Emphasis" variant="emphasis" className={cx('button')} />
     <Button text="Ghost" variant="ghost" className={cx('button')} />
     <Button text="De-emphasis" variant="de-emphasis" className={cx('button')} />
-    <Button text="Action" variant="action" icon={<IconEdit />} className={cx('button')} />
-    <Button text="Utility" variant="utility" icon={<IconEdit />} className={cx('button')} />
+    <Button text="Action" variant="action" className={cx('button')} />
   </div>
 );
 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/IconButtonVariant.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/IconButtonVariant.jsx
new file mode 100644
index 00000000000..ab41bc58fe7
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/IconButtonVariant.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import IconEdit from 'terra-icon/lib/icon/IconEdit';
+import { IconButton, IconTypes } from 'terra-button';
+import classNames from 'classnames/bind';
+import styles from './ButtonDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const ButtonVariant = () => (
+  <div>
+    <IconButton text="Action" variant="action" icon={<IconEdit a11yLabel="Edit" />} iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+    <IconButton text="Utility" variant="utility" icon={<IconEdit />} iconType={IconTypes.DECORATIVE} className={cx('button')} />
+  </div>
+);
+
+export default ButtonVariant;
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/button/AnchorButton.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/button/AnchorButton.test.jsx
new file mode 100644
index 00000000000..08419ec4291
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/test/button/AnchorButton.test.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import AnchorButton from 'terra-button';
+import styles from './ButtonTestCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+export default () => (
+  <div>
+    <AnchorButton href="#" text="I am rendered with an anchor tag" className={cx('button')} />
+    <div className={cx('spacing')} />
+  </div>
+);
diff --git a/packages/terra-search-field/CHANGELOG.md b/packages/terra-search-field/CHANGELOG.md
index 044fb6504c5..45349006dd8 100644
--- a/packages/terra-search-field/CHANGELOG.md
+++ b/packages/terra-search-field/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 3.78.0 - (February 7, 2023)
 
 * Changed
diff --git a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
index 37953055f04..c54c05f52c4 100644
--- a/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
+++ b/packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
@@ -99,6 +99,7 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={true}
           isDisabled={false}
@@ -112,7 +113,6 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
         >
           <button
             aria-disabled={false}
-            aria-label="Terra.searchField.submit-search"
             className="button neutral compact orion-fusion-theme button"
             data-terra-search-field-button="Search"
             disabled={false}
@@ -260,6 +260,7 @@ exports[`Snapshots passes in inputRefCallback as the refCallback prop of the Inp
           xmlns="http://www.w3.org/2000/svg"
         />
       }
+      iconType="decorative"
       isBlock={false}
       isCompact={true}
       isDisabled={false}
@@ -273,7 +274,6 @@ exports[`Snapshots passes in inputRefCallback as the refCallback prop of the Inp
     >
       <button
         aria-disabled={false}
-        aria-label="Terra.searchField.submit-search"
         className="button neutral compact button"
         data-terra-search-field-button="Search"
         disabled={false}
@@ -362,6 +362,7 @@ exports[`Snapshots renders a basic search field 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -405,6 +406,7 @@ exports[`Snapshots renders a disabled search field with a value 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={true}
@@ -448,6 +450,7 @@ exports[`Snapshots renders a search field such that custom styles are applied 1`
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -488,6 +491,7 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
           className="clear-icon"
         />
       }
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -509,6 +513,7 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -550,6 +555,7 @@ exports[`Snapshots renders a search field with a defaulted value 1`] = `
           className="clear-icon"
         />
       }
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -571,6 +577,7 @@ exports[`Snapshots renders a search field with a defaulted value 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -614,6 +621,7 @@ exports[`Snapshots renders a search field with a placeholder 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -655,6 +663,7 @@ exports[`Snapshots renders a search field with a value 1`] = `
           className="clear-icon"
         />
       }
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -676,6 +685,7 @@ exports[`Snapshots renders a search field with a value 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -719,6 +729,7 @@ exports[`Snapshots renders a search field with an aria-label 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
@@ -763,6 +774,7 @@ exports[`Snapshots renders a search field with an aria-label using prop 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       />
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={true}
     isDisabled={false}
diff --git a/packages/terra-status-view/CHANGELOG.md b/packages/terra-status-view/CHANGELOG.md
index 6fb3fd93ed0..afaf05476ae 100644
--- a/packages/terra-status-view/CHANGELOG.md
+++ b/packages/terra-status-view/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 4.51.0 - (February 7, 2023)
 
 * Changed
diff --git a/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap b/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
index 88d1baf3c02..27b60b130d6 100644
--- a/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
+++ b/packages/terra-status-view/tests/jest/__snapshots__/StatusView.test.jsx.snap
@@ -487,6 +487,7 @@ exports[`should render a status view with custom glyph, title, message, and two
       >
         <Button
           className="button"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -522,6 +523,7 @@ exports[`should render a status view with custom glyph, title, message, and two
         </Button>
         <Button
           className="button"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
diff --git a/packages/terra-toggle-button/CHANGELOG.md b/packages/terra-toggle-button/CHANGELOG.md
index 7eeafc5e02a..6398268c24f 100644
--- a/packages/terra-toggle-button/CHANGELOG.md
+++ b/packages/terra-toggle-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 3.64.0 - (February 7, 2023)
 
 * Changed
diff --git a/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap b/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
index 031837fe634..1db8ddf5bc4 100644
--- a/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
+++ b/packages/terra-toggle-button/tests/jest/__snapshots__/ToggleButton.test.jsx.snap
@@ -115,7 +115,6 @@ exports[`ToggleButton should render an icon only toggle-button 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
-    aria-label="Show"
     class="button neutral"
     title="Show"
     type="button"
@@ -240,6 +239,7 @@ exports[`ToggleButton should render an open toggle-button when clicked 1`] = `
           />
         </span>
       }
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -350,6 +350,7 @@ exports[`ToggleButton should set icon prop correctly 1`] = `
         />
       </span>
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -387,6 +388,7 @@ exports[`ToggleButton should set icon prop correctly with custom icon 1`] = `
         />
       </span>
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -425,6 +427,7 @@ exports[`ToggleButton should set onClose prop correctly 1`] = `
         />
       </span>
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -463,6 +466,7 @@ exports[`ToggleButton should set onOpen prop correctly 1`] = `
         />
       </span>
     }
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}