diff --git a/packages/react/src/components/global-banner/global-banner.test.tsx.snap b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
index 2b6a598109..1c4905fa8f 100644
--- a/packages/react/src/components/global-banner/global-banner.test.tsx.snap
+++ b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,46 +41,46 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
@@ -110,7 +110,7 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
   -ms-letter-spacing: 0.0125rem;
   letter-spacing: 0.0125rem;
   line-height: 1.5rem;
-  padding: var(--spacing-1x) var(--spacing-2x);
+  padding: var(--spacing-1halfx) var(--spacing-2x);
   position: relative;
 }
 
@@ -131,40 +131,25 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1x);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1x);
 }
 
-.c2 {
-  -webkit-align-self: initial;
-  -ms-flex-item-align: initial;
-  align-self: initial;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
-  display: inline;
+  display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
-  margin-right: var(--spacing-1x);
-}
-
-.c5 {
-  display: inline-block;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,23 +160,24 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
   width: unset;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: var(--spacing-1x);
   margin-top: 0;
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #F99D99;
   color: #F99D99;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -208,26 +194,21 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
       role="img"
       width="16"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         alert
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
@@ -238,7 +219,7 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -278,75 +259,75 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -376,7 +357,7 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
   -ms-letter-spacing: 0.0125rem;
   letter-spacing: 0.0125rem;
   line-height: 1.5rem;
-  padding: var(--spacing-1x) var(--spacing-2x);
+  padding: var(--spacing-1halfx) var(--spacing-2x);
   position: relative;
 }
 
@@ -397,40 +378,25 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1x);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1x);
 }
 
-.c2 {
-  -webkit-align-self: initial;
-  -ms-flex-item-align: initial;
-  align-self: initial;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
-  display: inline;
+  display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
-  margin-right: var(--spacing-1x);
 }
 
-.c5 {
-  display: inline-block;
-}
-
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -441,33 +407,34 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
   width: unset;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: var(--spacing-1x);
   margin-top: 0;
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #CFC1E3;
   color: #CFC1E3;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #FFFFFF;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #3A1C60;
   color: #FFFFFF;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -484,33 +451,28 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
       role="img"
       width="16"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         discovery
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
@@ -521,7 +483,7 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -561,75 +523,75 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -659,7 +621,7 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
   -ms-letter-spacing: 0.0125rem;
   letter-spacing: 0.0125rem;
   line-height: 1.5rem;
-  padding: var(--spacing-1x) var(--spacing-2x);
+  padding: var(--spacing-1halfx) var(--spacing-2x);
   position: relative;
 }
 
@@ -680,40 +642,25 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1x);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1x);
 }
 
-.c2 {
-  -webkit-align-self: initial;
-  -ms-flex-item-align: initial;
-  align-self: initial;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
-  display: inline;
+  display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
-  margin-right: var(--spacing-1x);
-}
-
-.c5 {
-  display: inline-block;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -724,33 +671,34 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
   width: unset;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: var(--spacing-1x);
   margin-top: 0;
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #FFFFFF;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #36393D;
   color: #FFFFFF;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -767,33 +715,28 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
       role="img"
       width="16"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         neutral
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
@@ -804,7 +747,7 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -844,75 +787,75 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -942,7 +885,7 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
   -ms-letter-spacing: 0.0125rem;
   letter-spacing: 0.0125rem;
   line-height: 1.5rem;
-  padding: var(--spacing-1x) var(--spacing-2x);
+  padding: var(--spacing-1halfx) var(--spacing-2x);
   position: relative;
 }
 
@@ -963,40 +906,25 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1x);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1x);
 }
 
-.c2 {
-  -webkit-align-self: initial;
-  -ms-flex-item-align: initial;
-  align-self: initial;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
-  display: inline;
+  display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
-  margin-right: var(--spacing-1x);
-}
-
-.c5 {
-  display: inline-block;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1007,33 +935,34 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
   width: unset;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: var(--spacing-1x);
   margin-top: 0;
 }
 
-.c9 {
+.c7 {
   border-color: #1B1C1E;
   color: #1B1C1E;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #9E6900;
   color: #9E6900;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #1B1C1E;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #C78500;
   color: #1B1C1E;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -1050,33 +979,28 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
       role="img"
       width="16"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         warning
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
@@ -1087,7 +1011,7 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1127,46 +1051,46 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
@@ -1220,40 +1144,26 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1halfx);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1halfx);
 }
 
-.c2 {
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
   display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
-  display: inline-block;
-}
-
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1264,23 +1174,24 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
   width: 100%;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: 0;
   margin-top: var(--spacing-1x);
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #F99D99;
   color: #F99D99;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -1297,26 +1208,21 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
       role="img"
       width="24"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         alert
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
@@ -1327,7 +1233,7 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1367,75 +1273,75 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -1489,40 +1395,26 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1halfx);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1halfx);
 }
 
-.c2 {
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
   display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
-  display: inline-block;
-}
-
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1533,33 +1425,34 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
   width: 100%;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: 0;
   margin-top: var(--spacing-1x);
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #CFC1E3;
   color: #CFC1E3;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #FFFFFF;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #3A1C60;
   color: #FFFFFF;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -1576,33 +1469,28 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
       role="img"
       width="24"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         discovery
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
@@ -1613,7 +1501,7 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1653,75 +1541,75 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -1775,40 +1663,26 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1halfx);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1halfx);
 }
 
-.c2 {
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
   display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
-  display: inline-block;
-}
-
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1819,33 +1693,34 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
   width: 100%;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: 0;
   margin-top: var(--spacing-1x);
 }
 
-.c9 {
+.c7 {
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #FFFFFF;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #36393D;
   color: #FFFFFF;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -1862,33 +1737,28 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
       role="img"
       width="24"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         neutral
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
@@ -1899,7 +1769,7 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
 `;
 
 exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
-.c7 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1939,75 +1809,75 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
   user-select: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
 }
 
-.c7:focus {
+.c5:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c7 > svg {
+.c5 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c8 {
+.c6 {
   background-color: transparent;
   border-color: #FFFFFF;
   color: #FFFFFF;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
 }
 
-.c8:focus {
+.c6:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c8:hover,
-.c8[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
-.c8:disabled {
+.c6:disabled {
   background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
 
-.c10 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
 }
 
-.c10:focus {
+.c8:focus {
   outline: none;
   border-color: #006296;
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
-.c10:hover,
-.c10[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: transparent;
   color: #FFFFFF;
 }
 
-.c10:disabled {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #006296;
@@ -2061,40 +1931,26 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
   position: relative;
 }
 
-.c1 > svg {
+.c2 {
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
   height: var(--size-1halfx);
-  margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
+  margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
   width: var(--size-1halfx);
 }
 
-.c2 {
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
-}
-
 .c3 {
-  -webkit-letter-spacing: 0.015rem;
-  -moz-letter-spacing: 0.015rem;
-  -ms-letter-spacing: 0.015rem;
-  letter-spacing: 0.015rem;
-  margin: 0;
-}
-
-.c4 {
   display: block;
+  font-size: 1rem;
   font-weight: var(--font-semi-bold);
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
-  display: inline-block;
-}
-
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2105,33 +1961,34 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
   width: 100%;
 }
 
-.c6 > button {
+.c4 > button {
   margin-left: 0;
   margin-top: var(--spacing-1x);
 }
 
-.c9 {
+.c7 {
   border-color: #1B1C1E;
   color: #1B1C1E;
 }
 
-.c9:hover {
+.c7:hover {
   border-color: #9E6900;
   color: #9E6900;
 }
 
-.c11 {
+.c9 {
   background-color: transparent;
   color: #1B1C1E;
 }
 
-.c11:hover {
+.c9:hover {
   background-color: #C78500;
   color: #1B1C1E;
 }
 
 <section
   aria-atomic="true"
+  aria-labelledby="uuid1_title"
   aria-live="polite"
   class="c0"
   data-testid="container"
@@ -2148,33 +2005,28 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
       role="img"
       width="24"
     />
-    <span
-      class="c3"
-    >
+    <span>
       <strong
-        class="c4"
+        class="c3"
+        id="uuid1_title"
       >
         warning
       </strong>
-      <span
-        class="c5"
-      >
-        Test content
-      </span>
+      Test content
     </span>
   </div>
   <div
-    class="c6"
+    class="c4"
   >
     <button
-      class="c7 c8 c9"
+      class="c5 c6 c7"
       data-testid="action-button"
       type="button"
     >
       Test button
     </button>
     <button
-      class="c7 c10 c11"
+      class="c5 c8 c9"
       data-testid="dismiss-button"
       type="button"
     >
diff --git a/packages/react/src/components/global-banner/global-banner.tsx b/packages/react/src/components/global-banner/global-banner.tsx
index b610574a98..38100364cb 100644
--- a/packages/react/src/components/global-banner/global-banner.tsx
+++ b/packages/react/src/components/global-banner/global-banner.tsx
@@ -10,9 +10,10 @@ import {
     useCallback,
     useState,
 } from 'react';
-import styled, { css, FlattenSimpleInterpolation, SimpleInterpolation, StyledProps } from 'styled-components';
+import styled, { css, FlattenSimpleInterpolation, StyledProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
 import { Button } from '../buttons/button';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 
@@ -45,7 +46,7 @@ const Container = styled.section<ContainerProps>`
     justify-content: space-between;
     letter-spacing: ${({ isMobile }) => (isMobile ? 0.02875 : 0.0125)}rem;
     line-height: 1.5rem;
-    padding: ${({ isMobile }) => (isMobile ? 'var(--spacing-1halfx)' : 'var(--spacing-1x) var(--spacing-2x)')};
+    padding: ${({ isMobile }) => (isMobile ? 'var(--spacing-1halfx)' : 'var(--spacing-1halfx) var(--spacing-2x)')};
     position: relative;
 `;
 
@@ -56,45 +57,21 @@ const Content = styled.div<IsMobileProps>`
     justify-content: ${({ $isMobile }) => ($isMobile ? 'unset' : 'center')};
     padding-left: var(--spacing-4x);
     position: relative;
-
-    > svg {
-        flex-shrink: 0;
-        height: ${({ $isMobile }) => ($isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
-        margin: 0 var(--spacing-1x) 0 calc(-1 * var(--spacing-4x));
-        width: ${({ $isMobile }) => ($isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
-    }
 `;
 
-function getIconPosition(props: IsMobileProps): SimpleInterpolation {
-    if (props.$isMobile) {
-        return css`
-            align-self: flex-start;
-        `;
-    }
-
-    return css`
-        align-self: initial;
-    `;
-}
-
 const StyledIcon = styled(Icon)<SVGProps<SVGSVGElement> & IsMobileProps>`
-    ${getIconPosition};
+    align-self: flex-start;
+    flex-shrink: 0;
+    height: ${({ $isMobile }) => ($isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
+    margin: var(--spacing-half) var(--spacing-1halfx) 0 calc(-1 * var(--spacing-4x));
+    width: ${({ $isMobile }) => ($isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
 `;
 
-const Text = styled.span`
-    letter-spacing: 0.015rem;
-    margin: 0;
-`;
-
-const Label = styled.strong<IsMobileProps>`
-    display: ${({ $isMobile }) => ($isMobile ? 'block' : 'inline')};
+const Title = styled.strong<IsMobileProps>`
+    display: block;
+    font-size: 1rem;
     font-weight: var(--font-semi-bold);
     margin-bottom: ${({ $isMobile }) => $isMobile && 'var(--spacing-half)'};
-    margin-right: ${({ $isMobile }) => !$isMobile && 'var(--spacing-1x)'};
-`;
-
-const Message = styled.span`
-    display: inline-block;
 `;
 
 const getIconName = (bannerType: GlobalBannerType): IconName => {
@@ -188,6 +165,7 @@ interface GlobalBannerProps {
     secondaryActionButton?: ActionButton;
     className?: string;
     children: ReactNode;
+    id?: string;
     hidden?: boolean;
     /**
      * Adds an ignore-button. Note that alert type banners are not dismissable.
@@ -203,6 +181,7 @@ export const GlobalBanner = forwardRef(({
     children,
     className,
     hidden,
+    id: providedId,
     dismissable = false,
     label,
     onDismiss,
@@ -214,6 +193,8 @@ export const GlobalBanner = forwardRef(({
     const { t } = useTranslation('global-banner');
     const hasDismissButton = type !== 'alert' && dismissable;
     const hasButtons = hasDismissButton || actionButton || secondaryActionButton;
+    const id = useId(providedId);
+    const titleId = `${id}_title`;
 
     const handleDismiss: MouseEventHandler = useCallback(() => {
         onDismiss?.();
@@ -224,6 +205,7 @@ export const GlobalBanner = forwardRef(({
         <Container
             ref={ref}
             aria-atomic="true"
+            aria-labelledby={titleId}
             aria-live="polite"
             className={className}
             data-testid="container"
@@ -240,10 +222,10 @@ export const GlobalBanner = forwardRef(({
                     role="img"
                     size={isMobile ? '24' : '16'}
                 />
-                <Text>
-                    <Label $isMobile={isMobile}>{label}</Label>
-                    <Message>{children}</Message>
-                </Text>
+                <span>
+                    <Title $isMobile={isMobile} id={titleId}>{label}</Title>
+                    {children}
+                </span>
             </Content>
 
             {hasButtons && (