diff --git a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
index e4fedd6cf..f4a7eec47 100644
--- a/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
+++ b/src/Dialog/__tests__/__snapshots__/Dialog.test.js.snap
@@ -91,7 +91,7 @@ exports[`renders correctly for a compound dialog with a close button 1`] = `
   display: inline-flex;
 }
 
-.c11 {
+.c12 {
   fill: inherit;
   position: relative;
   height: 1em;
@@ -136,7 +136,7 @@ h6.c5 {
   font-size: 1rem;
 }
 
-.c5 .c10 {
+.c5 .c11 {
   top: 0.1em;
 }
 
@@ -157,7 +157,7 @@ h6.c5 {
   border: 1px solid #e6e6e6;
 }
 
-.c12 {
+.c13 {
   padding: 1.25rem;
   max-height: 50vh;
   overflow-y: scroll;
@@ -204,6 +204,18 @@ h6.c5 {
   outline: unset;
 }
 
+.c10 {
+  border: 0px;
+  -webkit-clip: rect(0px,0px,0px,0px);
+  clip: rect(0px,0px,0px,0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  position: absolute;
+}
+
 @media (max-width:480px) {
   h1.c5 {
     font-size: 2rem;
@@ -257,8 +269,14 @@ h6.c5 {
       <span
         class="c9"
       >
+        <div
+          class="c10 c2"
+        >
+          Close
+        </div>
         <svg
-          class="c10 c11 c2"
+          aria-hidden="true"
+          class="c11 c12 c2"
           role="img"
           size="1"
           style="size: 1px;"
@@ -273,7 +291,7 @@ h6.c5 {
     </button>
   </div>
   <div
-    class="c12 c2"
+    class="c13 c2"
     id="Dialog-1"
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam ipsum, cursus id placerat congue, ultrices eget lectus. Duis posuere, lacus sed tristique commodo, sapien turpis mollis nunc, vestibulum consectetur lectus augue sit amet justo.
diff --git a/src/DialogModal/__tests__/__snapshots__/DialogModal.test.js.snap b/src/DialogModal/__tests__/__snapshots__/DialogModal.test.js.snap
index 86d3e8603..ff833af63 100644
--- a/src/DialogModal/__tests__/__snapshots__/DialogModal.test.js.snap
+++ b/src/DialogModal/__tests__/__snapshots__/DialogModal.test.js.snap
@@ -252,7 +252,7 @@ exports[`renders correctly for a dialog modal with a close button 1`] = `
   display: inline-flex;
 }
 
-.c14 {
+.c15 {
   fill: inherit;
   position: relative;
   height: 1em;
@@ -297,7 +297,7 @@ h6.c8 {
   font-size: 1rem;
 }
 
-.c8 .c13 {
+.c8 .c14 {
   top: 0.1em;
 }
 
@@ -318,7 +318,7 @@ h6.c8 {
   border: 1px solid #e6e6e6;
 }
 
-.c15 {
+.c16 {
   padding: 1.25rem;
   max-height: 50vh;
   overflow-y: scroll;
@@ -365,6 +365,18 @@ h6.c8 {
   outline: unset;
 }
 
+.c13 {
+  border: 0px;
+  -webkit-clip: rect(0px,0px,0px,0px);
+  clip: rect(0px,0px,0px,0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  position: absolute;
+}
+
 @media (max-width:480px) {
   h1.c8 {
     font-size: 2rem;
@@ -435,8 +447,14 @@ h6.c8 {
             <span
               class="c12"
             >
+              <div
+                class="c13 c1"
+              >
+                Close
+              </div>
               <svg
-                class="c13 c14 c1"
+                aria-hidden="true"
+                class="c14 c15 c1"
                 role="img"
                 size="1"
                 style="size: 1px;"
@@ -451,7 +469,7 @@ h6.c8 {
           </button>
         </div>
         <div
-          class="c15 c1"
+          class="c16 c1"
           id="Modal-3"
         >
           This is the content
diff --git a/src/Popover/__tests__/__snapshots__/Popover.test.js.snap b/src/Popover/__tests__/__snapshots__/Popover.test.js.snap
index a12254dd0..7bbfd626a 100644
--- a/src/Popover/__tests__/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__tests__/__snapshots__/Popover.test.js.snap
@@ -541,7 +541,7 @@ exports[`renders correctly when showCloseButton is truthy 1`] = `
   padding: 1.25rem !important;
 }
 
-.c11 {
+.c12 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -675,25 +675,25 @@ exports[`renders correctly when showCloseButton is truthy 1`] = `
   display: inline-flex;
 }
 
-.c13 {
+.c14 {
   fill: inherit;
   position: relative;
   height: 1em;
   width: 1em;
 }
 
-abbr.c14 {
+abbr.c15 {
   border-bottom: 1px dotted;
   cursor: help;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-i.c14 {
+i.c15 {
   font-style: italic;
 }
 
-kbd.c14 {
+kbd.c15 {
   background: #454d5d;
   border-radius: 0.1rem;
   color: #fff;
@@ -701,42 +701,42 @@ kbd.c14 {
   padding: 0.1rem 0.2rem;
 }
 
-mark.c14 {
+mark.c15 {
   background: #ffe9b3;
   border-radius: 0.1rem;
   padding: 0.1rem 0.2rem;
 }
 
-strong.c14 {
+strong.c15 {
   font-weight: bold;
 }
 
-sub.c14,
-sup.c14 {
+sub.c15,
+sup.c15 {
   font-size: 0.8em;
   vertical-align: baseline;
 }
 
-ins.c14,
-u.c14 {
+ins.c15,
+u.c15 {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
 
-i.c14,
-cite.c14,
-var.c14,
-em.c14 {
+i.c15,
+cite.c15,
+var.c15,
+em.c15 {
   font-style: italic;
 }
 
-kbd.c14,
-pre.c14,
-samp.c14 {
+kbd.c15,
+pre.c15,
+samp.c15 {
   font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
 }
 
-.c14 .c12 {
+.c15 .c13 {
   top: 0.1em;
 }
 
@@ -786,6 +786,18 @@ samp.c14 {
   display: block;
 }
 
+.c11 {
+  border: 0px;
+  -webkit-clip: rect(0px,0px,0px,0px);
+  clip: rect(0px,0px,0px,0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  position: absolute;
+}
+
 <div
   class="c0 c1"
 >
@@ -821,15 +833,13 @@ samp.c14 {
         class="c4"
       >
         <div
-          aria-hidden="true"
-          class="c6 c11"
-          hidden=""
+          class="c11 c12"
         >
           Close
         </div>
         <svg
           aria-hidden="true"
-          class="c12 c13 c11"
+          class="c13 c14 c12"
           role="img"
           size="1"
           style="size: 1px;"
@@ -843,7 +853,7 @@ samp.c14 {
       </span>
     </button>
     <span
-      class="c14 c11"
+      class="c15 c12"
     >
       Hello world
     </span>
diff --git a/src/Popover/__tests__/__snapshots__/PopoverClose.test.js.snap b/src/Popover/__tests__/__snapshots__/PopoverClose.test.js.snap
index 2094b7033..7e47333bc 100644
--- a/src/Popover/__tests__/__snapshots__/PopoverClose.test.js.snap
+++ b/src/Popover/__tests__/__snapshots__/PopoverClose.test.js.snap
@@ -27,17 +27,6 @@ exports[`renders correctly 1`] = `
   color: inherit;
 }
 
-.c4 {
-  -webkit-transform: translate3d(0px,0px,0px);
-  -ms-transform: translate3d(0px,0px,0px);
-  transform: translate3d(0px,0px,0px);
-}
-
-.c4[aria-hidden="true"] {
-  pointer-events: none;
-  display: none !important;
-}
-
 .c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -124,6 +113,18 @@ exports[`renders correctly 1`] = `
   width: 1em;
 }
 
+.c4 {
+  border: 0px;
+  -webkit-clip: rect(0px,0px,0px,0px);
+  clip: rect(0px,0px,0px,0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  position: absolute;
+}
+
 <button
   aria-haspopup="true"
   class="c0 c1 c2 "
@@ -134,9 +135,7 @@ exports[`renders correctly 1`] = `
     class="c3"
   >
     <div
-      aria-hidden="true"
       class="c4 c5"
-      hidden=""
     >
       Close
     </div>