From 4b8fd769f503ba9e27b4ed1f285b52138ac3015d Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Wed, 13 Sep 2023 19:36:05 +0000
Subject: [PATCH 1/9] Update notification banner for screen reader experience

---
 packages/terra-alert/CHANGELOG.md             |  3 ++
 packages/terra-alert/src/Alert.jsx            | 14 ++++--
 .../jest/__snapshots__/Alert.test.jsx.snap    | 48 +++++++++++++++++++
 3 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md
index 77ae978e5d4..43938522f2d 100644
--- a/packages/terra-alert/CHANGELOG.md
+++ b/packages/terra-alert/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added visually hidden commas between alert content.
+
 ## 4.80.0 - (September 21, 2023)
 
 * Changed
diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
index 31575fe88af..38ca408cfd3 100644
--- a/packages/terra-alert/src/Alert.jsx
+++ b/packages/terra-alert/src/Alert.jsx
@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import ResponsiveElement from 'terra-responsive-element';
 import Button from 'terra-button';
+import VisuallyHiddenText from 'terra-visually-hidden-text';
 import {
   IconAlert,
   IconError,
@@ -188,10 +189,14 @@ const Alert = ({
       'actions-custom': type === AlertTypes.CUSTOM,
     });
     actionsSection = (
-      <div className={actionsClassName}>
-        {action}
-        {dismissButton}
-      </div>
+      <>
+        <VisuallyHiddenText text="," />
+        <div className={actionsClassName}>
+          {action}
+          {action && dismissButton && <VisuallyHiddenText text="," />}
+          {dismissButton}
+        </div>
+      </>
     );
   }
 
@@ -205,6 +210,7 @@ const Alert = ({
           {title || defaultTitle}
         </strong>
       )}
+      {children && <VisuallyHiddenText text="," />}
       {children}
     </div>
   );
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 7ba97c2fc2a..e62b1c6e5f5 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -29,6 +29,9 @@ exports[`Alert of type advisory with text content should render an Alert compone
           >
             Terra.alert.advisory
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an advisory alert.
         </div>
       </div>
@@ -74,6 +77,9 @@ exports[`Alert of type alert with text content should render an Alert component
           >
             Terra.alert.alert
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a test
         </div>
       </div>
@@ -119,6 +125,9 @@ exports[`Alert of type custom with custom title and text content should render a
           >
             Help!
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a custom alert.
         </div>
       </div>
@@ -164,6 +173,9 @@ exports[`Alert of type error with text content should render an Alert component
           >
             Terra.alert.error
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an error.
         </div>
       </div>
@@ -249,6 +261,9 @@ exports[`Alert of type info with text content should render an Alert component o
           >
             Terra.alert.info
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an information alert.
         </div>
       </div>
@@ -294,10 +309,16 @@ exports[`Alert of type success with an action button text content should render
           >
             Terra.alert.success
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a success alert.
         </div>
       </div>
     </div>
+    <VisuallyHiddenText
+      text=","
+    />
     <div
       className="actions"
     >
@@ -354,6 +375,9 @@ exports[`Alert of type success with text content should render an Alert componen
           >
             Terra.alert.success
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a success alert.
         </div>
       </div>
@@ -399,6 +423,9 @@ exports[`Alert of type unsatisfied should render an unsatisfied Alert 1`] = `
           >
             Terra.alert.unsatisfied
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an unsatisfied alert.
         </div>
       </div>
@@ -444,6 +471,9 @@ exports[`Alert of type unverified should render an unverified Alert 1`] = `
           >
             Terra.alert.unverified
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an unverified alert.
         </div>
       </div>
@@ -489,6 +519,9 @@ exports[`Alert of type warning with text content should render an Alert componen
           >
             Terra.alert.warning
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is an warning.
         </div>
       </div>
@@ -897,10 +930,16 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
           >
             Help!
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a custom alert.
         </div>
       </div>
     </div>
+    <VisuallyHiddenText
+      text=","
+    />
     <div
       className="actions actions-custom"
     >
@@ -915,6 +954,9 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
         type="button"
         variant="emphasis"
       />
+      <VisuallyHiddenText
+        text=","
+      />
       <Button
         aria-describedby="alert-title-00000000-0000-0000-0000-000000000000"
         isBlock={false}
@@ -969,10 +1011,16 @@ exports[`Dismissible Alert that includes actions section should render an alert
           >
             Terra.alert.alert
           </strong>
+          <VisuallyHiddenText
+            text=","
+          />
           This is a test
         </div>
       </div>
     </div>
+    <VisuallyHiddenText
+      text=","
+    />
     <div
       className="actions"
     >

From 7ad53ee8dd2c9bb4ff63c246c45571f873f25c4a Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Wed, 13 Sep 2023 20:05:51 +0000
Subject: [PATCH 2/9] Update dependencies

---
 packages/terra-alert/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/terra-alert/package.json b/packages/terra-alert/package.json
index 19f16a5c26f..17fa625bd7d 100644
--- a/packages/terra-alert/package.json
+++ b/packages/terra-alert/package.json
@@ -33,6 +33,7 @@
     "terra-icon": "^3.57.1",
     "terra-responsive-element": "^5.37.0",
     "terra-theme-context": "^1.0.0",
+    "terra-visually-hidden-text": "^2.36.0",
     "uuid": "3.4.0"
   },
   "scripts": {

From b870af2f4dd292bdf351115faf2bbe7d1f286c66 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Fri, 15 Sep 2023 16:16:02 +0000
Subject: [PATCH 3/9] Update dismiss button aria description to include title

---
 packages/terra-alert/src/Alert.jsx            | 18 +++++--
 .../jest/__snapshots__/Alert.test.jsx.snap    | 48 -------------------
 .../__snapshots__/ButtonGroup.test.jsx.snap   |  4 +-
 .../ButtonGroupButton.test.jsx.snap           |  2 +-
 .../jest/__snapshots__/Field.test.jsx.snap    |  4 +-
 .../__snapshots__/TextareaField.test.jsx.snap |  4 +-
 .../__snapshots__/SearchField.test.jsx.snap   |  2 +-
 7 files changed, 22 insertions(+), 60 deletions(-)

diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
index 38ca408cfd3..9b7121f4ce5 100644
--- a/packages/terra-alert/src/Alert.jsx
+++ b/packages/terra-alert/src/Alert.jsx
@@ -172,11 +172,21 @@ const Alert = ({
 
   const dismissButtonAriaDescribedBy = (title || defaultTitle) ? alertTitleId : alertMessageId;
 
+  const dismissButtonAriaDescription = () => {
+    if (title && defaultTitle) {
+      return `${defaultTitle} ${title}`;
+    }
+
+    return undefined;
+  };
+
   let dismissButton;
   if (onDismiss) {
+    const ariaDescription = dismissButtonAriaDescription();
     dismissButton = (
       <Button
-        aria-describedby={dismissButtonAriaDescribedBy}
+        aria-describedby={ariaDescription ? undefined : dismissButtonAriaDescribedBy}
+        aria-description={ariaDescription}
         text={intl.formatMessage({ id: 'Terra.alert.dismiss' })}
         onClick={onDismiss}
       />
@@ -190,10 +200,10 @@ const Alert = ({
     });
     actionsSection = (
       <>
-        <VisuallyHiddenText text="," />
+        {/* <VisuallyHiddenText text="," /> */}
         <div className={actionsClassName}>
           {action}
-          {action && dismissButton && <VisuallyHiddenText text="," />}
+          {/* {action && dismissButton && <VisuallyHiddenText text="," />} */}
           {dismissButton}
         </div>
       </>
@@ -210,7 +220,7 @@ const Alert = ({
           {title || defaultTitle}
         </strong>
       )}
-      {children && <VisuallyHiddenText text="," />}
+      {/* {children && <VisuallyHiddenText text="," />} */}
       {children}
     </div>
   );
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 e62b1c6e5f5..7ba97c2fc2a 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -29,9 +29,6 @@ exports[`Alert of type advisory with text content should render an Alert compone
           >
             Terra.alert.advisory
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an advisory alert.
         </div>
       </div>
@@ -77,9 +74,6 @@ exports[`Alert of type alert with text content should render an Alert component
           >
             Terra.alert.alert
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a test
         </div>
       </div>
@@ -125,9 +119,6 @@ exports[`Alert of type custom with custom title and text content should render a
           >
             Help!
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a custom alert.
         </div>
       </div>
@@ -173,9 +164,6 @@ exports[`Alert of type error with text content should render an Alert component
           >
             Terra.alert.error
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an error.
         </div>
       </div>
@@ -261,9 +249,6 @@ exports[`Alert of type info with text content should render an Alert component o
           >
             Terra.alert.info
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an information alert.
         </div>
       </div>
@@ -309,16 +294,10 @@ exports[`Alert of type success with an action button text content should render
           >
             Terra.alert.success
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a success alert.
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions"
     >
@@ -375,9 +354,6 @@ exports[`Alert of type success with text content should render an Alert componen
           >
             Terra.alert.success
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a success alert.
         </div>
       </div>
@@ -423,9 +399,6 @@ exports[`Alert of type unsatisfied should render an unsatisfied Alert 1`] = `
           >
             Terra.alert.unsatisfied
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an unsatisfied alert.
         </div>
       </div>
@@ -471,9 +444,6 @@ exports[`Alert of type unverified should render an unverified Alert 1`] = `
           >
             Terra.alert.unverified
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an unverified alert.
         </div>
       </div>
@@ -519,9 +489,6 @@ exports[`Alert of type warning with text content should render an Alert componen
           >
             Terra.alert.warning
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is an warning.
         </div>
       </div>
@@ -930,16 +897,10 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
           >
             Help!
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a custom alert.
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions actions-custom"
     >
@@ -954,9 +915,6 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
         type="button"
         variant="emphasis"
       />
-      <VisuallyHiddenText
-        text=","
-      />
       <Button
         aria-describedby="alert-title-00000000-0000-0000-0000-000000000000"
         isBlock={false}
@@ -1011,16 +969,10 @@ exports[`Dismissible Alert that includes actions section should render an alert
           >
             Terra.alert.alert
           </strong>
-          <VisuallyHiddenText
-            text=","
-          />
           This is a test
         </div>
       </div>
     </div>
-    <VisuallyHiddenText
-      text=","
-    />
     <div
       className="actions"
     >
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 7799914ec19..f704d6dc195 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
@@ -47,7 +47,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+            className="button neutral button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}
@@ -100,7 +100,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+            className="button neutral button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}
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 d551f54db6c..5f017ba53ed 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
@@ -30,7 +30,7 @@ exports[`correctly applies the theme context className 1`] = `
     >
       <button
         aria-disabled={false}
-        className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
+        className="button neutral button-group-button orion-fusion-theme"
         data-terra-button-group-button={true}
         disabled={false}
         onBlur={[Function]}
diff --git a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
index ccb05714027..e8cc849b5eb 100644
--- a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
+++ b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
@@ -74,7 +74,7 @@ exports[`correctly applies the theme context className 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <IconBase
-              className="IconError orion-fusion-theme"
+              className="IconError"
               focusable="false"
               height="1em"
               isBidi={false}
@@ -84,7 +84,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
-                className="tui-Icon icon IconError orion-fusion-theme"
+                className="tui-Icon icon IconError"
                 focusable="false"
                 height="1em"
                 role="presentation"
diff --git a/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap b/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
index 78d5b959714..a0d8e43b880 100644
--- a/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
+++ b/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
@@ -72,7 +72,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <IconBase
-                className="IconError orion-fusion-theme"
+                className="IconError"
                 focusable="false"
                 height="1em"
                 isBidi={false}
@@ -82,7 +82,7 @@ exports[`correctly applies the theme context className 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <svg
-                  className="tui-Icon icon IconError orion-fusion-theme"
+                  className="tui-Icon icon IconError"
                   focusable="false"
                   height="1em"
                   role="presentation"
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 c8e7f810d3a..1888507a175 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
@@ -125,7 +125,7 @@ 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"
+                className="button neutral compact button"
                 data-terra-search-field-button="Search"
                 disabled={false}
                 onBlur={[Function]}

From 7e3eeb0d5cd5816e1ff2a2035daeb33f52ab3cd7 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Fri, 15 Sep 2023 17:01:39 +0000
Subject: [PATCH 4/9] Remove aria-description

---
 packages/terra-alert/src/Alert.jsx            | 19 ++++++++++---------
 .../terra-alert/tests/jest/Alert.test.jsx     |  6 +++---
 .../jest/__snapshots__/Alert.test.jsx.snap    |  6 ++++++
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
index 9b7121f4ce5..5e533b78a3e 100644
--- a/packages/terra-alert/src/Alert.jsx
+++ b/packages/terra-alert/src/Alert.jsx
@@ -172,21 +172,21 @@ const Alert = ({
 
   const dismissButtonAriaDescribedBy = (title || defaultTitle) ? alertTitleId : alertMessageId;
 
-  const dismissButtonAriaDescription = () => {
-    if (title && defaultTitle) {
-      return `${defaultTitle} ${title}`;
-    }
+  // const dismissButtonAriaDescription = () => {
+  //   if (title && defaultTitle) {
+  //     return `${defaultTitle} ${title}`;
+  //   }
 
-    return undefined;
-  };
+  //   return undefined;
+  // };
 
   let dismissButton;
   if (onDismiss) {
-    const ariaDescription = dismissButtonAriaDescription();
+    // const ariaDescription = dismissButtonAriaDescription();
     dismissButton = (
       <Button
-        aria-describedby={ariaDescription ? undefined : dismissButtonAriaDescribedBy}
-        aria-description={ariaDescription}
+        aria-describedby={dismissButtonAriaDescribedBy}
+        // aria-description={ariaDescription}
         text={intl.formatMessage({ id: 'Terra.alert.dismiss' })}
         onClick={onDismiss}
       />
@@ -217,6 +217,7 @@ const Alert = ({
     <div id={alertMessageId} className={alertSectionClassName}>
       {(title || defaultTitle) && (
         <strong id={alertTitleId} className={cx('title')}>
+          {title && <VisuallyHiddenText text={`${defaultTitle},`} />}
           {title || defaultTitle}
         </strong>
       )}
diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx
index 76ff91b76c5..4803bfa660b 100644
--- a/packages/terra-alert/tests/jest/Alert.test.jsx
+++ b/packages/terra-alert/tests/jest/Alert.test.jsx
@@ -192,7 +192,7 @@ describe('Alert of type custom with custom title and text content', () => {
     expect(alertDiv.prop('className')).toEqual('alert-base custom wide terra-alert-custom-orange-color');
     expect(alertDiv.prop('role')).toEqual('status');
     expect(wrapper.find(IconHelp).length).toEqual(1);
-    expect(wrapper.find('.title').text()).toEqual('Help!');
+    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Help!');
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -236,7 +236,7 @@ describe('Dismissable Alert of type custom with action button, custom title and
     expect(alertDiv.prop('className')).toEqual('alert-base custom wide terra-alert-custom-orange-color');
     expect(alertDiv.prop('role')).toEqual('status');
     expect(wrapper.find(IconHelp).length).toEqual(1);
-    expect(wrapper.find('.title').text()).toEqual('Help!');
+    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Help!');
     const buttons = wrapper.find(Button);
     expect(buttons.length).toEqual(2);
     // action button
@@ -350,7 +350,7 @@ describe('Dismissible Alert', () => {
 
     it('should use the default title', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('children')).toEqual('Terra.alert.success');
+      expect(alertTitle.prop('children')).toEqual(['', 'Terra.alert.success']);
     });
 
     it('should set the alert message ID', () => {
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 7ba97c2fc2a..ba01e067447 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -117,6 +117,9 @@ exports[`Alert of type custom with custom title and text content should render a
             className="title"
             id="alert-title-00000000-0000-0000-0000-000000000000"
           >
+            <VisuallyHiddenText
+              text=","
+            />
             Help!
           </strong>
           This is a custom alert.
@@ -895,6 +898,9 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
             className="title"
             id="alert-title-00000000-0000-0000-0000-000000000000"
           >
+            <VisuallyHiddenText
+              text=","
+            />
             Help!
           </strong>
           This is a custom alert.

From 4e2dc6ac5a01f4ed314ccbbf166142bfc82a9217 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Fri, 15 Sep 2023 17:23:00 +0000
Subject: [PATCH 5/9] Update jest snapshots

---
 packages/terra-alert/src/Alert.jsx                  | 13 -------------
 .../jest/__snapshots__/ButtonGroup.test.jsx.snap    |  4 ++--
 .../__snapshots__/ButtonGroupButton.test.jsx.snap   |  2 +-
 .../tests/jest/__snapshots__/Field.test.jsx.snap    |  4 ++--
 .../jest/__snapshots__/TextareaField.test.jsx.snap  |  4 ++--
 .../jest/__snapshots__/SearchField.test.jsx.snap    |  2 +-
 6 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
index 5e533b78a3e..7f78fdcec75 100644
--- a/packages/terra-alert/src/Alert.jsx
+++ b/packages/terra-alert/src/Alert.jsx
@@ -172,21 +172,11 @@ const Alert = ({
 
   const dismissButtonAriaDescribedBy = (title || defaultTitle) ? alertTitleId : alertMessageId;
 
-  // const dismissButtonAriaDescription = () => {
-  //   if (title && defaultTitle) {
-  //     return `${defaultTitle} ${title}`;
-  //   }
-
-  //   return undefined;
-  // };
-
   let dismissButton;
   if (onDismiss) {
-    // const ariaDescription = dismissButtonAriaDescription();
     dismissButton = (
       <Button
         aria-describedby={dismissButtonAriaDescribedBy}
-        // aria-description={ariaDescription}
         text={intl.formatMessage({ id: 'Terra.alert.dismiss' })}
         onClick={onDismiss}
       />
@@ -200,10 +190,8 @@ const Alert = ({
     });
     actionsSection = (
       <>
-        {/* <VisuallyHiddenText text="," /> */}
         <div className={actionsClassName}>
           {action}
-          {/* {action && dismissButton && <VisuallyHiddenText text="," />} */}
           {dismissButton}
         </div>
       </>
@@ -221,7 +209,6 @@ const Alert = ({
           {title || defaultTitle}
         </strong>
       )}
-      {/* {children && <VisuallyHiddenText text="," />} */}
       {children}
     </div>
   );
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 f704d6dc195..7799914ec19 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
@@ -47,7 +47,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral button-group-button orion-fusion-theme"
+            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}
@@ -100,7 +100,7 @@ exports[`correctly applies the theme context className 1`] = `
           <button
             aria-disabled={false}
             aria-pressed={false}
-            className="button neutral button-group-button orion-fusion-theme"
+            className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
             data-terra-button-group-button={true}
             disabled={false}
             onBlur={[Function]}
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 5f017ba53ed..d551f54db6c 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
@@ -30,7 +30,7 @@ exports[`correctly applies the theme context className 1`] = `
     >
       <button
         aria-disabled={false}
-        className="button neutral button-group-button orion-fusion-theme"
+        className="button neutral orion-fusion-theme button-group-button orion-fusion-theme"
         data-terra-button-group-button={true}
         disabled={false}
         onBlur={[Function]}
diff --git a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
index e8cc849b5eb..ccb05714027 100644
--- a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
+++ b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
@@ -74,7 +74,7 @@ exports[`correctly applies the theme context className 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <IconBase
-              className="IconError"
+              className="IconError orion-fusion-theme"
               focusable="false"
               height="1em"
               isBidi={false}
@@ -84,7 +84,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <svg
-                className="tui-Icon icon IconError"
+                className="tui-Icon icon IconError orion-fusion-theme"
                 focusable="false"
                 height="1em"
                 role="presentation"
diff --git a/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap b/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
index a0d8e43b880..78d5b959714 100644
--- a/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
+++ b/packages/terra-form-textarea/tests/jest/__snapshots__/TextareaField.test.jsx.snap
@@ -72,7 +72,7 @@ exports[`correctly applies the theme context className 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <IconBase
-                className="IconError"
+                className="IconError orion-fusion-theme"
                 focusable="false"
                 height="1em"
                 isBidi={false}
@@ -82,7 +82,7 @@ exports[`correctly applies the theme context className 1`] = `
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <svg
-                  className="tui-Icon icon IconError"
+                  className="tui-Icon icon IconError orion-fusion-theme"
                   focusable="false"
                   height="1em"
                   role="presentation"
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 1888507a175..c8e7f810d3a 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
@@ -125,7 +125,7 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
               <button
                 aria-disabled={false}
                 aria-label="Terra.searchField.submit-search"
-                className="button neutral compact button"
+                className="button neutral compact orion-fusion-theme button"
                 data-terra-search-field-button="Search"
                 disabled={false}
                 onBlur={[Function]}

From ccf8aaab5e32f0456d1353cfaca979023bf957c4 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Mon, 18 Sep 2023 17:34:07 +0000
Subject: [PATCH 6/9] Add defaultTitle check and update tests

---
 packages/terra-alert/src/Alert.jsx            |  12 +-
 .../terra-alert/tests/jest/Alert.test.jsx     | 134 +++++++++++++-----
 .../jest/__snapshots__/Alert.test.jsx.snap    |  55 ++++++-
 3 files changed, 155 insertions(+), 46 deletions(-)

diff --git a/packages/terra-alert/src/Alert.jsx b/packages/terra-alert/src/Alert.jsx
index 7f78fdcec75..96555886811 100644
--- a/packages/terra-alert/src/Alert.jsx
+++ b/packages/terra-alert/src/Alert.jsx
@@ -189,12 +189,10 @@ const Alert = ({
       'actions-custom': type === AlertTypes.CUSTOM,
     });
     actionsSection = (
-      <>
-        <div className={actionsClassName}>
-          {action}
-          {dismissButton}
-        </div>
-      </>
+      <div className={actionsClassName}>
+        {action}
+        {dismissButton}
+      </div>
     );
   }
 
@@ -205,7 +203,7 @@ const Alert = ({
     <div id={alertMessageId} className={alertSectionClassName}>
       {(title || defaultTitle) && (
         <strong id={alertTitleId} className={cx('title')}>
-          {title && <VisuallyHiddenText text={`${defaultTitle},`} />}
+          {title && defaultTitle && <VisuallyHiddenText text={`${defaultTitle},`} />}
           {title || defaultTitle}
         </strong>
       )}
diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx
index 4803bfa660b..a51ab0ab441 100644
--- a/packages/terra-alert/tests/jest/Alert.test.jsx
+++ b/packages/terra-alert/tests/jest/Alert.test.jsx
@@ -10,12 +10,14 @@ import IconInformation from 'terra-icon/lib/icon/IconInformation';
 import IconSuccess from 'terra-icon/lib/icon/IconSuccess';
 import IconWarning from 'terra-icon/lib/icon/IconWarning';
 import Button from 'terra-button';
+import VisuallyHiddenText from 'terra-visually-hidden-text';
 import { v4 as uuidv4 } from 'uuid';
 import Alert from '../../src/Alert';
 
+const mockUuid = '00000000-0000-0000-0000-000000000000';
 let mockSpyUuid;
 beforeAll(() => {
-  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue(mockUuid);
 });
 
 afterAll(() => {
@@ -66,6 +68,13 @@ describe('Alert with props', () => {
     expect(alert.prop('disableAlertActionFocus')).toEqual(true);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render an alert with provided title', () => {
+    const wrapper = shallowWithIntl(<Alert title="Custom Title" />).dive();
+
+    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Custom Title');
+    expect(wrapper).toMatchSnapshot();
+  });
 });
 
 describe('Dismissible Alert that includes actions section', () => {
@@ -73,10 +82,13 @@ describe('Dismissible Alert that includes actions section', () => {
     const mockOnDismiss = jest.fn();
     const wrapper = shallowWithIntl(<Alert onDismiss={mockOnDismiss}>This is a test</Alert>).dive();
 
-    expect(wrapper.find(Button).length).toEqual(1);
-    expect(wrapper.find(Button).prop('text')).toEqual('Terra.alert.dismiss');
-    expect(wrapper.find(Button).prop('onClick')).toEqual(mockOnDismiss);
-    expect(wrapper.find(Button).prop('variant')).toEqual('neutral');
+    const dismissButton = wrapper.find(Button);
+    expect(wrapper.find('.title').text()).toEqual('Terra.alert.alert');
+    expect(dismissButton.length).toEqual(1);
+    expect(dismissButton.prop('text')).toEqual('Terra.alert.dismiss');
+    expect(dismissButton.prop('onClick')).toEqual(mockOnDismiss);
+    expect(dismissButton.prop('variant')).toEqual('neutral');
+    expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -192,7 +204,7 @@ describe('Alert of type custom with custom title and text content', () => {
     expect(alertDiv.prop('className')).toEqual('alert-base custom wide terra-alert-custom-orange-color');
     expect(alertDiv.prop('role')).toEqual('status');
     expect(wrapper.find(IconHelp).length).toEqual(1);
-    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Help!');
+    expect(wrapper.find('.title').text()).toEqual('Help!');
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -226,7 +238,7 @@ describe('Alert of type success with an action button text content', () => {
   });
 });
 
-describe('Dismissable Alert of type custom with action button, custom title and text content', () => {
+describe('Dismissible Alert of type custom with action button, custom title and text content', () => {
   it('should render an Alert component of type custom with an action button', () => {
     const mockOnClick = jest.fn();
     const mockOnDismiss = jest.fn();
@@ -236,7 +248,7 @@ describe('Dismissable Alert of type custom with action button, custom title and
     expect(alertDiv.prop('className')).toEqual('alert-base custom wide terra-alert-custom-orange-color');
     expect(alertDiv.prop('role')).toEqual('status');
     expect(wrapper.find(IconHelp).length).toEqual(1);
-    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Help!');
+    expect(wrapper.find('.title').text()).toEqual('Help!');
     const buttons = wrapper.find(Button);
     expect(buttons.length).toEqual(2);
     // action button
@@ -251,10 +263,10 @@ describe('Dismissable Alert of type custom with action button, custom title and
   });
 });
 
-describe('Dismissible Alert', () => {
+describe('Notifications titles', () => {
   let wrapper;
 
-  describe('Custom Alert with no title prop', () => {
+  describe('Custom notification with no title prop', () => {
     beforeEach(() => {
       wrapper = shallowWithIntl(
         <Alert
@@ -266,18 +278,23 @@ describe('Dismissible Alert', () => {
         </Alert>,
       ).dive();
     });
-    it('should set the alert message ID', () => {
+    it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
+      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+    });
+
+    it('should have no title', () => {
+      const alertTitle = wrapper.find('.title');
+      expect(alertTitle.length).toEqual(0);
     });
 
-    it('should set the dismiss button aria-describedby to the alert description', () => {
+    it('should set the dismiss button aria-describedby to the notification description', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
+      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-message-${mockUuid}`);
     });
   });
 
-  describe('Custom Alert with custom title', () => {
+  describe('Custom notification with custom title', () => {
     beforeEach(() => {
       wrapper = shallowWithIntl(
         <Alert
@@ -293,21 +310,27 @@ describe('Dismissible Alert', () => {
 
     it('should set the alert message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
+      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
     });
 
     it('should set the alert title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+    });
+
+    it('should set the alert title', () => {
+      const alertTitle = wrapper.find('.title');
+      expect(alertTitle.prop('children')).toEqual(['', 'Help!']);
+      expect(alertTitle.text()).toEqual('Help!');
     });
 
     it('should set the dismiss button aria-describedby to the alert title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
     });
   });
 
-  describe('Success Alert with no title prop', () => {
+  describe('Success notification with no title prop', () => {
     beforeEach(() => {
       wrapper = shallowWithIntl(
         <Alert
@@ -319,23 +342,29 @@ describe('Dismissible Alert', () => {
       ).dive();
     });
 
-    it('should set the alert message ID', () => {
+    it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
+      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
     });
 
-    it('should set the alert title ID', () => {
+    it('should set the notification title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
     });
 
-    it('should set the dismiss button aria-describedby to the alert title', () => {
+    it('should use the default title', () => {
+      const alertTitle = wrapper.find('.title');
+      expect(alertTitle.prop('children')).toEqual([undefined, 'Terra.alert.success']);
+      expect(alertTitle.text()).toEqual('Terra.alert.success');
+    });
+
+    it('should set the dismiss button aria-describedby to the notification title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
     });
   });
 
-  describe('Success Alert with blank title', () => {
+  describe('Success notification with blank title', () => {
     beforeEach(() => {
       wrapper = shallowWithIntl(
         <Alert
@@ -351,21 +380,62 @@ describe('Dismissible Alert', () => {
     it('should use the default title', () => {
       const alertTitle = wrapper.find('.title');
       expect(alertTitle.prop('children')).toEqual(['', 'Terra.alert.success']);
+      expect(alertTitle.text()).toEqual('Terra.alert.success');
     });
 
-    it('should set the alert message ID', () => {
+    it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
+      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
     });
 
-    it('should set the alert title ID', () => {
+    it('should set the notification title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
     });
 
-    it('should set the dismiss button aria-describedby to the alert title', () => {
+    it('should set the dismiss button aria-describedby to the notification title', () => {
+      const dismissButton = wrapper.find('Button');
+      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+    });
+  });
+
+  describe('Success notification with title', () => {
+    beforeEach(() => {
+      wrapper = shallowWithIntl(
+        <Alert
+          type={Alert.Opts.Types.SUCCESS}
+          title="Custom Success Title"
+          onDismiss={() => { }}
+        >
+          This is a success alert.
+        </Alert>,
+      ).dive();
+    });
+
+    it('should use the custom title', () => {
+      const alertTitle = wrapper.find('.title');
+      expect(alertTitle.prop('children')).toEqual(
+        [
+          <VisuallyHiddenText text="Terra.alert.success," />,
+          'Custom Success Title',
+        ],
+      );
+      expect(alertTitle.text()).toEqual('<VisuallyHiddenText />Custom Success Title');
+    });
+
+    it('should set the notification message ID', () => {
+      const alertContent = wrapper.find('.section');
+      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+    });
+
+    it('should set the notification title ID', () => {
+      const alertTitle = wrapper.find('.title');
+      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+    });
+
+    it('should set the dismiss button aria-describedby to the notification title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
+      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
     });
   });
 });
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 ba01e067447..2312f2e8818 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -117,9 +117,6 @@ exports[`Alert of type custom with custom title and text content should render a
             className="title"
             id="alert-title-00000000-0000-0000-0000-000000000000"
           >
-            <VisuallyHiddenText
-              text=","
-            />
             Help!
           </strong>
           This is a custom alert.
@@ -725,6 +722,53 @@ exports[`Alert with props should render an alert with provided role 1`] = `
 </ResponsiveElement>
 `;
 
+exports[`Alert with props should render an alert with provided title 1`] = `
+<ResponsiveElement
+  onChange={[Function]}
+  responsiveTo="parent"
+>
+  <div
+    className="alert-base alert wide"
+    role="alert"
+  >
+    <div
+      className="body body-std"
+    >
+      <div
+        className="focus-container"
+        tabIndex="-1"
+      />
+      <div
+        className="content-container"
+      >
+        <span
+          className="icon"
+        >
+          <IconAlert
+            viewBox="0 0 48 48"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </span>
+        <div
+          className="section"
+          id="alert-message-00000000-0000-0000-0000-000000000000"
+        >
+          <strong
+            className="title"
+            id="alert-title-00000000-0000-0000-0000-000000000000"
+          >
+            <VisuallyHiddenText
+              text="Terra.alert.alert,"
+            />
+            Custom Title
+          </strong>
+        </div>
+      </div>
+    </div>
+  </div>
+</ResponsiveElement>
+`;
+
 exports[`Alert with props should render disableAlertActionFocus when provided 1`] = `
 <InjectIntl(Alert)
   disableAlertActionFocus={true}
@@ -863,7 +907,7 @@ exports[`Alert with props should render disableAlertActionFocus when provided 1`
 </InjectIntl(Alert)>
 `;
 
-exports[`Dismissable Alert of type custom with action button, custom title and text content should render an Alert component of type custom with an action button 1`] = `
+exports[`Dismissible Alert of type custom with action button, custom title and text content should render an Alert component of type custom with an action button 1`] = `
 <ResponsiveElement
   onChange={[Function]}
   responsiveTo="parent"
@@ -898,9 +942,6 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
             className="title"
             id="alert-title-00000000-0000-0000-0000-000000000000"
           >
-            <VisuallyHiddenText
-              text=","
-            />
             Help!
           </strong>
           This is a custom alert.

From dbac9ecdadf16d1e17295f56b935179abc96458a Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Mon, 18 Sep 2023 20:05:01 +0000
Subject: [PATCH 7/9] Update test and changelog

---
 packages/terra-alert/CHANGELOG.md              |  2 +-
 packages/terra-alert/tests/jest/Alert.test.jsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md
index 43938522f2d..e50b0eeb390 100644
--- a/packages/terra-alert/CHANGELOG.md
+++ b/packages/terra-alert/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## Unreleased
 
 * Added
-  * Added visually hidden commas between alert content.
+  * Added visually hidden default title for screen readers to read with custom titles.
 
 ## 4.80.0 - (September 21, 2023)
 
diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx
index a51ab0ab441..ac60a40286d 100644
--- a/packages/terra-alert/tests/jest/Alert.test.jsx
+++ b/packages/terra-alert/tests/jest/Alert.test.jsx
@@ -71,8 +71,15 @@ describe('Alert with props', () => {
 
   it('should render an alert with provided title', () => {
     const wrapper = shallowWithIntl(<Alert title="Custom Title" />).dive();
-
-    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Custom Title');
+    const alertTitle = wrapper.find('.title');
+
+    expect(alertTitle.prop('children')).toEqual(
+      [
+        <VisuallyHiddenText text="Terra.alert.alert," />,
+        'Custom Title',
+      ],
+    );
+    expect(alertTitle.text()).toEqual('<VisuallyHiddenText />Custom Title');
     expect(wrapper).toMatchSnapshot();
   });
 });

From f8bd2a771494536845399c3078c028631a12e5d0 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Tue, 19 Sep 2023 21:38:38 +0000
Subject: [PATCH 8/9] Update more tests

---
 .../terra-alert/tests/jest/Alert.test.jsx     | 17 +++-
 .../jest/__snapshots__/Alert.test.jsx.snap    | 82 +++++++++++--------
 2 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx
index ac60a40286d..e64c778b43e 100644
--- a/packages/terra-alert/tests/jest/Alert.test.jsx
+++ b/packages/terra-alert/tests/jest/Alert.test.jsx
@@ -218,11 +218,20 @@ describe('Alert of type custom with custom title and text content', () => {
 
 describe('Alert of type info with custom title and HTML content', () => {
   it('should render an Alert component of type info with custom title and HTML content', () => {
-    const wrapper = shallowWithIntl(<Alert type={Alert.Opts.Types.INFO} title="Gettysburg Address"><span>Four score and seven years ago . . .</span></Alert>);
+    const wrapper = shallowWithIntl(<Alert type={Alert.Opts.Types.INFO} title="Gettysburg Address"><span>Four score and seven years ago . . .</span></Alert>).dive();
 
-    expect(wrapper.prop('title')).toEqual('Gettysburg Address');
-    expect(wrapper.prop('type')).toEqual('info');
-    expect(wrapper.find('span').text()).toEqual('Four score and seven years ago . . .');
+    const alertDiv = wrapper.find('div.alert-base');
+    expect(alertDiv.prop('className')).toEqual('alert-base info wide');
+    expect(alertDiv.prop('role')).toEqual('status');
+    expect(wrapper.find(IconInformation).length).toEqual(1);
+    expect(wrapper.find('.title').prop('children')).toEqual(
+      [
+        <VisuallyHiddenText text="Terra.alert.info," />,
+        'Gettysburg Address',
+      ],
+    );
+    expect(wrapper.find('.title').text()).toEqual('<VisuallyHiddenText />Gettysburg Address');
+    expect(wrapper.find('.section').find('span').text()).toEqual('Four score and seven years ago . . .');
     expect(wrapper).toMatchSnapshot();
   });
 });
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 2312f2e8818..4f73464c3b7 100644
--- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
+++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -173,43 +173,53 @@ exports[`Alert of type error with text content should render an Alert component
 `;
 
 exports[`Alert of type info with custom title and HTML content should render an Alert component of type info with custom title and HTML content 1`] = `
-<Alert
-  customColorClass="custom-default-color"
-  disableAlertActionFocus={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {},
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": null,
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": "span",
-      "timeZone": null,
-    }
-  }
-  title="Gettysburg Address"
-  type="info"
+<ResponsiveElement
+  onChange={[Function]}
+  responsiveTo="parent"
 >
-  <span>
-    Four score and seven years ago . . .
-  </span>
-</Alert>
+  <div
+    className="alert-base info wide"
+    role="status"
+  >
+    <div
+      className="body body-std"
+    >
+      <div
+        className="focus-container"
+        tabIndex="-1"
+      />
+      <div
+        className="content-container"
+      >
+        <span
+          className="icon"
+        >
+          <IconInformation
+            viewBox="0 0 48 48"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </span>
+        <div
+          className="section"
+          id="alert-message-00000000-0000-0000-0000-000000000000"
+        >
+          <strong
+            className="title"
+            id="alert-title-00000000-0000-0000-0000-000000000000"
+          >
+            <VisuallyHiddenText
+              text="Terra.alert.info,"
+            />
+            Gettysburg Address
+          </strong>
+          <span>
+            Four score and seven years ago . . .
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</ResponsiveElement>
 `;
 
 exports[`Alert of type info with text content should render an Alert component of type info 1`] = `

From 4678cc76163c88a262dc1483d6a4489b1ab4dc42 Mon Sep 17 00:00:00 2001
From: Andrew Tran <Andrew.Tran2@cerner.com>
Date: Thu, 21 Sep 2023 20:40:09 +0000
Subject: [PATCH 9/9] Update uuid in test

---
 .../terra-alert/tests/jest/Alert.test.jsx     | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/terra-alert/tests/jest/Alert.test.jsx b/packages/terra-alert/tests/jest/Alert.test.jsx
index e64c778b43e..2ae2efbaf3c 100644
--- a/packages/terra-alert/tests/jest/Alert.test.jsx
+++ b/packages/terra-alert/tests/jest/Alert.test.jsx
@@ -14,10 +14,9 @@ import VisuallyHiddenText from 'terra-visually-hidden-text';
 import { v4 as uuidv4 } from 'uuid';
 import Alert from '../../src/Alert';
 
-const mockUuid = '00000000-0000-0000-0000-000000000000';
 let mockSpyUuid;
 beforeAll(() => {
-  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue(mockUuid);
+  mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');
 });
 
 afterAll(() => {
@@ -95,7 +94,7 @@ describe('Dismissible Alert that includes actions section', () => {
     expect(dismissButton.prop('text')).toEqual('Terra.alert.dismiss');
     expect(dismissButton.prop('onClick')).toEqual(mockOnDismiss);
     expect(dismissButton.prop('variant')).toEqual('neutral');
-    expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+    expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     expect(wrapper).toMatchSnapshot();
   });
 });
@@ -296,7 +295,7 @@ describe('Notifications titles', () => {
     });
     it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
 
     it('should have no title', () => {
@@ -306,7 +305,7 @@ describe('Notifications titles', () => {
 
     it('should set the dismiss button aria-describedby to the notification description', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-message-${mockUuid}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
   });
 
@@ -326,12 +325,12 @@ describe('Notifications titles', () => {
 
     it('should set the alert message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the alert title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the alert title', () => {
@@ -342,7 +341,7 @@ describe('Notifications titles', () => {
 
     it('should set the dismiss button aria-describedby to the alert title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
   });
 
@@ -360,12 +359,12 @@ describe('Notifications titles', () => {
 
     it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the notification title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
 
     it('should use the default title', () => {
@@ -376,7 +375,7 @@ describe('Notifications titles', () => {
 
     it('should set the dismiss button aria-describedby to the notification title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
   });
 
@@ -401,17 +400,17 @@ describe('Notifications titles', () => {
 
     it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the notification title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the dismiss button aria-describedby to the notification title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
   });
 
@@ -441,17 +440,17 @@ describe('Notifications titles', () => {
 
     it('should set the notification message ID', () => {
       const alertContent = wrapper.find('.section');
-      expect(alertContent.prop('id')).toEqual(`alert-message-${mockUuid}`);
+      expect(alertContent.prop('id')).toEqual('alert-message-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the notification title ID', () => {
       const alertTitle = wrapper.find('.title');
-      expect(alertTitle.prop('id')).toEqual(`alert-title-${mockUuid}`);
+      expect(alertTitle.prop('id')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
 
     it('should set the dismiss button aria-describedby to the notification title', () => {
       const dismissButton = wrapper.find('Button');
-      expect(dismissButton.prop('aria-describedby')).toEqual(`alert-title-${mockUuid}`);
+      expect(dismissButton.prop('aria-describedby')).toEqual('alert-title-00000000-0000-0000-0000-000000000000');
     });
   });
 });