Repository: grommet/grommet (2025-07-11T17:06:47Z)

Issue:
Modal Layer doesn't seem to capture focus any more
Modal Layers used to capture focus when they opened, I think via the `FocusedContainer` component. Recently, I'm finding that keyboard focus doesn't move automatically to a modal layer when it opens. This, in turn, means that Esc to close an open layer doesn't seem to work any more.

To reproduce:

In the storybook visit either of these stories:
- https://storybook.grommet.io/?path=/story/layout-layer-corner--corner-layer
- https://storybook.grommet.io/?path=/story/layout-layer-center--center-layer

Click the button to open a modal popup, then press Esc to close it.

Tab then Esc does work, indicating that focus is initially outside the layer, until you tab into it.

Tested in the latest Firefox and Chrome on MacOS 14.7.

See also:
- https://github.com/zooniverse/front-end-monorepo/issues/6790
- https://github.com/zooniverse/front-end-monorepo/pull/6796


Discussion:

Patch:
diff --git a/src/js/components/Layer/LayerContainer.js b/src/js/components/Layer/LayerContainer.js
index d522275998d..bd4db4c88c7 100644
--- a/src/js/components/Layer/LayerContainer.js
+++ b/src/js/components/Layer/LayerContainer.js
@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { ThemeContext } from 'styled-components';
+import styled, { ThemeContext } from 'styled-components';
 
 import { FocusedContainer } from '../FocusedContainer';
 import { Keyboard } from '../Keyboard';
@@ -13,16 +13,33 @@ import { ResponsiveContext } from '../../contexts/ResponsiveContext';
 import { OptionsContext } from '../../contexts/OptionsContext';
 import { ContainerTargetContext } from '../../contexts/ContainerTargetContext';
 import { useAnalytics } from '../../contexts/AnalyticsContext';
-
 import {
   backgroundIsDark,
   findVisibleParent,
   PortalContext,
+  styledComponentsConfig,
 } from '../../utils';
 
 import { StyledLayer, StyledContainer, StyledOverlay } from './StyledLayer';
 import { useThemeValue } from '../../utils/useThemeValue';
 
+// The FocusSpan ensures the LayerContainer has focus when
+// it is opened for user to start tabbing inside it.
+// It helps for escaping the LayerContainer using the keyboard.
+// It is hidden visually but still part of the accessibility tree.
+const FocusSpan = styled.span.withConfig(styledComponentsConfig)`
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  &:focus {
+    outline: none;
+  }
+`;
+
 const LayerContainer = forwardRef(
   (
     {
@@ -48,6 +65,7 @@ const LayerContainer = forwardRef(
     // layerOptions was created to preserve backwards compatibility but
     // should not be supported in v3
     const { layer: layerOptions } = useContext(OptionsContext);
+    const focusSpanRef = useRef();
     const containerRef = useRef();
     const layerRef = useRef();
     const portalContext = useContext(PortalContext);
@@ -56,9 +74,7 @@ const LayerContainer = forwardRef(
       () => [...portalContext, portalId],
       [portalContext, portalId],
     );
-
     const sendAnalytics = useAnalytics();
-
     useEffect(() => {
       const start = new Date();
       const element = layerRef.current;
@@ -79,7 +95,6 @@ const LayerContainer = forwardRef(
         }
       };
     }, [sendAnalytics, layerRef, position]);
-
     useEffect(() => {
       if (position !== 'hidden') {
         const node = layerRef.current || containerRef.current || ref.current;
@@ -87,8 +102,7 @@ const LayerContainer = forwardRef(
         // Once layer is open we make sure it has focus so that you
         // can start tabbing inside the layer. If the caller put focus
         // on an element already, we honor that. Otherwise, we put
-        // the focus within the layer. Look at FocusedContainer.js for
-        // more details.
+        // the focus on the hidden span.
         let element = document.activeElement;
         while (element) {
           if (element === containerRef.current) {
@@ -97,22 +111,17 @@ const LayerContainer = forwardRef(
           }
           element = element.parentElement;
         }
+        if (modal && !element && focusSpanRef.current) {
+          focusSpanRef.current.focus();
+        }
       }
     }, [modal, position, ref]);
 
-    useEffect(() => {
-      if (position !== 'hidden') {
-        const node = layerRef.current || containerRef.current || ref.current;
-        if (node && node.scrollIntoView) node.scrollIntoView();
-      }
-    }, [position, ref]);
-
     useEffect(() => {
       const onClickDocument = (event) => {
         // determine which portal id the target is in, if any
         let clickedPortalId = null;
         let node = (event.composed && event.composedPath()[0]) || event.target;
-
         while (
           clickedPortalId === null &&
           node &&
@@ -137,32 +146,26 @@ const LayerContainer = forwardRef(
           onClickOutside(event);
         }
       };
-
       // if user provides an onClickOutside function, listen for mousedown event
       if (onClickOutside) {
         document.addEventListener('mousedown', onClickDocument);
       }
-
       if (layerTarget) {
         const updateBounds = () => {
           const windowWidth = window.innerWidth;
           const windowHeight = window.innerHeight;
           const target = findVisibleParent(layerTarget);
-
           // affects StyledLayer
           const layer = layerRef.current;
-
           if (layer && target) {
             // clear prior styling
             layer.style.left = '';
             layer.style.top = '';
             layer.style.bottom = '';
             layer.style.width = '';
-
             // get bounds
             const targetRect = target.getBoundingClientRect();
             const layerRect = layer.getBoundingClientRect();
-
             // ensure that layer moves with the target
             layer.style.left = `${targetRect.left}px`;
             layer.style.right = `${windowWidth - targetRect.right}px`;
@@ -172,11 +175,9 @@ const LayerContainer = forwardRef(
             layer.style.maxWidth = Math.min(layerRect.width, windowWidth);
           }
         };
-
         updateBounds();
         window.addEventListener('resize', updateBounds);
         window.addEventListener('scroll', updateBounds, true);
-
         return () => {
           window.removeEventListener('resize', updateBounds);
           window.removeEventListener('scroll', updateBounds, true);
@@ -191,7 +192,6 @@ const LayerContainer = forwardRef(
         }
       };
     }, [containerTarget, layerTarget, onClickOutside, portalContext, portalId]);
-
     let content = (
       <StyledContainer
         ref={ref || containerRef}
@@ -215,6 +215,7 @@ const LayerContainer = forwardRef(
         // or outside of the layer
         data-g-portal-id={portalId}
       >
+        <FocusSpan ref={focusSpanRef} tabIndex="-1" />
         {children}
       </StyledContainer>
     );
@@ -241,7 +242,6 @@ const LayerContainer = forwardRef(
         {content}
       </StyledLayer>
     );
-
     if (onEsc) {
       content = (
         <Keyboard
@@ -261,12 +261,10 @@ const LayerContainer = forwardRef(
         </Keyboard>
       );
     }
-
     const themeContextValue = useMemo(() => {
       const dark = backgroundIsDark(theme.layer.background, theme);
       return { ...theme, dark };
     }, [theme]);
-
     if (theme.layer.background) {
       const { dark } = themeContextValue;
       if (dark !== undefined && dark !== theme.dark) {
@@ -277,13 +275,11 @@ const LayerContainer = forwardRef(
         );
       }
     }
-
     content = (
       <PortalContext.Provider value={nextPortalContext}>
         {content}
       </PortalContext.Provider>
     );
-
     const hitResponsiveBreakpoint =
       responsive && size === theme.layer.responsiveBreakpoint;
     // if layer is responsive and we've hit the breakpoint,
@@ -308,9 +304,7 @@ const LayerContainer = forwardRef(
         </FocusedContainer>
       );
     }
-
     return content;
   },
 );
-
 export { LayerContainer };


Test patch:
diff --git a/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap b/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
index ed1b02a75f2..6d29fadbe74 100644
--- a/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
+++ b/src/js/components/DataFilters/__tests__/__snapshots__/DataFilters-test.tsx.snap
@@ -1102,7 +1102,7 @@ exports[`DataFilters layer 1`] = `
 `;
 
 exports[`DataFilters layer 2`] = `
-.c7 {
+.c8 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1112,7 +1112,7 @@ exports[`DataFilters layer 2`] = `
   flex: 0 0 auto;
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1122,7 +1122,7 @@ exports[`DataFilters layer 2`] = `
   min-width: 384px;
 }
 
-.c5 {
+.c6 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1132,7 +1132,7 @@ exports[`DataFilters layer 2`] = `
   height: 100%;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1146,7 +1146,7 @@ exports[`DataFilters layer 2`] = `
   overflow: auto;
 }
 
-.c8 {
+.c9 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1158,7 +1158,7 @@ exports[`DataFilters layer 2`] = `
   justify-content: space-between;
 }
 
-.c13 {
+.c14 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1168,7 +1168,7 @@ exports[`DataFilters layer 2`] = `
   flex-direction: column;
 }
 
-.c15 {
+.c16 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1179,7 +1179,7 @@ exports[`DataFilters layer 2`] = `
   padding: 12px;
 }
 
-.c16 {
+.c17 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1188,7 +1188,7 @@ exports[`DataFilters layer 2`] = `
   flex-direction: column;
 }
 
-.c18 {
+.c19 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1200,7 +1200,7 @@ exports[`DataFilters layer 2`] = `
   justify-content: center;
 }
 
-.c21 {
+.c22 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1215,7 +1215,7 @@ exports[`DataFilters layer 2`] = `
   border-radius: 4px;
 }
 
-.c23 {
+.c24 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1231,19 +1231,19 @@ exports[`DataFilters layer 2`] = `
   padding-bottom: 24px;
 }
 
-.c10 {
+.c11 {
   flex: 0 0 auto;
   align-self: stretch;
   width: 24px;
 }
 
-.c22 {
+.c23 {
   flex: 0 0 auto;
   align-self: stretch;
   height: 12px;
 }
 
-.c12 {
+.c13 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -1252,30 +1252,30 @@ exports[`DataFilters layer 2`] = `
   stroke: #666666;
 }
 
-.c12 g {
+.c13 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c12 *:not([stroke])[fill='none'] {
+.c13 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c12 *[stroke*='#'],
-.c12 *[STROKE*='#'] {
+.c13 *[stroke*='#'],
+.c13 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c12 *[fill-rule],
-.c12 *[FILL-RULE],
-.c12 *[fill*='#'],
-.c12 *[FILL*='#'] {
+.c13 *[fill-rule],
+.c13 *[FILL-RULE],
+.c13 *[fill*='#'],
+.c13 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c14 {
+.c15 {
   margin-left: 12px;
   margin-right: 12px;
   margin-top: 6px;
@@ -1284,7 +1284,7 @@ exports[`DataFilters layer 2`] = `
   line-height: 24px;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -1303,47 +1303,47 @@ exports[`DataFilters layer 2`] = `
   padding: 12px;
 }
 
-.c11:focus {
+.c12:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c11:focus >circle,
-.c11:focus >ellipse,
-.c11:focus >line,
-.c11:focus >path,
-.c11:focus >polygon,
-.c11:focus >polyline,
-.c11:focus >rect {
+.c12:focus >circle,
+.c12:focus >ellipse,
+.c12:focus >line,
+.c12:focus >path,
+.c12:focus >polygon,
+.c12:focus >polyline,
+.c12:focus >rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c11:focus ::-moz-focus-inner {
+.c12:focus ::-moz-focus-inner {
   border: 0;
 }
 
-.c11:focus:not(:focus-visible) {
+.c12:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c11:focus:not(:focus-visible) >circle,
-.c11:focus:not(:focus-visible) >ellipse,
-.c11:focus:not(:focus-visible) >line,
-.c11:focus:not(:focus-visible) >path,
-.c11:focus:not(:focus-visible) >polygon,
-.c11:focus:not(:focus-visible) >polyline,
-.c11:focus:not(:focus-visible) >rect {
+.c12:focus:not(:focus-visible) >circle,
+.c12:focus:not(:focus-visible) >ellipse,
+.c12:focus:not(:focus-visible) >line,
+.c12:focus:not(:focus-visible) >path,
+.c12:focus:not(:focus-visible) >polygon,
+.c12:focus:not(:focus-visible) >polyline,
+.c12:focus:not(:focus-visible) >rect {
   outline: none;
   box-shadow: none;
 }
 
-.c11:focus:not(:focus-visible) ::-moz-focus-inner {
+.c12:focus:not(:focus-visible) ::-moz-focus-inner {
   border: 0;
 }
 
-.c24 {
+.c25 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -1367,56 +1367,56 @@ exports[`DataFilters layer 2`] = `
   transition-timing-function: ease-in-out;
 }
 
-.c24:hover {
+.c25:hover {
   box-shadow: 0px 0px 0px 2px #7D4CDB;
 }
 
-.c24:focus {
+.c25:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c24:focus >circle,
-.c24:focus >ellipse,
-.c24:focus >line,
-.c24:focus >path,
-.c24:focus >polygon,
-.c24:focus >polyline,
-.c24:focus >rect {
+.c25:focus >circle,
+.c25:focus >ellipse,
+.c25:focus >line,
+.c25:focus >path,
+.c25:focus >polygon,
+.c25:focus >polyline,
+.c25:focus >rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c24:focus ::-moz-focus-inner {
+.c25:focus ::-moz-focus-inner {
   border: 0;
 }
 
-.c24:focus:not(:focus-visible) {
+.c25:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c24:focus:not(:focus-visible) >circle,
-.c24:focus:not(:focus-visible) >ellipse,
-.c24:focus:not(:focus-visible) >line,
-.c24:focus:not(:focus-visible) >path,
-.c24:focus:not(:focus-visible) >polygon,
-.c24:focus:not(:focus-visible) >polyline,
-.c24:focus:not(:focus-visible) >rect {
+.c25:focus:not(:focus-visible) >circle,
+.c25:focus:not(:focus-visible) >ellipse,
+.c25:focus:not(:focus-visible) >line,
+.c25:focus:not(:focus-visible) >path,
+.c25:focus:not(:focus-visible) >polygon,
+.c25:focus:not(:focus-visible) >polyline,
+.c25:focus:not(:focus-visible) >rect {
   outline: none;
   box-shadow: none;
 }
 
-.c24:focus:not(:focus-visible) ::-moz-focus-inner {
+.c25:focus:not(:focus-visible) ::-moz-focus-inner {
   border: 0;
 }
 
-.c4 {
+.c5 {
   max-width: 100%;
   max-height: 100%;
 }
 
-.c17 {
+.c18 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1426,12 +1426,12 @@ exports[`DataFilters layer 2`] = `
   cursor: pointer;
 }
 
-.c17:hover input:not([disabled])+div,
-.c17:hover input:not([disabled])+span {
+.c18:hover input:not([disabled])+div,
+.c18:hover input:not([disabled])+span {
   border-color: #000000;
 }
 
-.c20 {
+.c21 {
   opacity: 0;
   -moz-appearance: none;
   width: 0;
@@ -1440,16 +1440,16 @@ exports[`DataFilters layer 2`] = `
   cursor: pointer;
 }
 
-.c20:checked+span>span {
+.c21:checked+span>span {
   left: calc( 48px - 24px );
   background: #7D4CDB;
 }
 
-.c19 {
+.c20 {
   flex-shrink: 0;
 }
 
-.c9 {
+.c10 {
   margin: 0px;
   font-size: 34px;
   line-height: 40px;
@@ -1510,6 +1510,20 @@ exports[`DataFilters layer 2`] = `
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
 
 }
@@ -1531,75 +1545,75 @@ exports[`DataFilters layer 2`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c6 {
+  .c7 {
     padding-left: 12px;
     padding-right: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c6 {
+  .c7 {
     padding-top: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c13 {
+  .c14 {
     margin-bottom: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c15 {
+  .c16 {
     border-bottom: solid 1px rgba(0, 0, 0, 0.33);
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c15 {
+  .c16 {
     padding: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c18 {
+  .c19 {
     margin-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c21 {
+  .c22 {
     border: solid 2px rgba(0, 0, 0, 0.15);
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c23 {
+  .c24 {
     margin-top: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c23 {
+  .c24 {
     padding-left: 12px;
     padding-right: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c23 {
+  .c24 {
     padding-bottom: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c10 {
+  .c11 {
     width: 12px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c22 {
+  .c23 {
     height: 6px;
   }
 }
@@ -1609,13 +1623,13 @@ exports[`DataFilters layer 2`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c9 {
+  .c10 {
     margin: 0px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c9 {
+  .c10 {
     font-size: 26px;
     line-height: 32px;
     max-width: 624px;
@@ -1661,40 +1675,44 @@ exports[`DataFilters layer 2`] = `
     data-g-portal-id="0"
     id="test-data--filters-layer"
   >
-    <div
+    <span
       class="c3"
+      tabindex="-1"
+    />
+    <div
+      class="c4"
     >
       <form
-        class="c4"
+        class="c5"
         fill="vertical"
       >
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <div
-              class="c7"
+              class="c8"
             >
               <header
-                class="c8"
+                class="c9"
               >
                 <h2
-                  class="c9"
+                  class="c10"
                 >
                   Filters
                 </h2>
                 <div
-                  class="c10"
+                  class="c11"
                 />
                 <button
-                  class="c11"
+                  class="c12"
                   type="button"
                 >
                   <svg
                     aria-label="Close"
-                    class="c12"
+                    class="c13"
                     viewBox="0 0 24 24"
                   >
                     <path
@@ -1707,36 +1725,36 @@ exports[`DataFilters layer 2`] = `
                 </button>
               </header>
               <div
-                class="c13 "
+                class="c14 "
               >
                 <label
-                  class="c14"
+                  class="c15"
                   for="test-data-name"
                   id="grommet-test-data-name__label"
                 >
                   name
                 </label>
                 <div
-                  class="c15 "
+                  class="c16 "
                 >
                   <div
                     aria-labelledby="grommet-test-data-name__label"
-                    class="c16 StyledCheckBoxGroup-sc-2nhc5d-0"
+                    class="c17 StyledCheckBoxGroup-sc-2nhc5d-0"
                     id="test-data-name"
                     role="group"
                   >
                     <label
-                      class="c17"
+                      class="c18"
                     >
                       <div
-                        class="c18 c19"
+                        class="c19 c20"
                       >
                         <input
-                          class="c20"
+                          class="c21"
                           type="checkbox"
                         />
                         <div
-                          class="c21 "
+                          class="c22 "
                         />
                       </div>
                       <span>
@@ -1744,20 +1762,20 @@ exports[`DataFilters layer 2`] = `
                       </span>
                     </label>
                     <div
-                      class="c22"
+                      class="c23"
                     />
                     <label
-                      class="c17"
+                      class="c18"
                     >
                       <div
-                        class="c18 c19"
+                        class="c19 c20"
                       >
                         <input
-                          class="c20"
+                          class="c21"
                           type="checkbox"
                         />
                         <div
-                          class="c21 "
+                          class="c22 "
                         />
                       </div>
                       <span>
@@ -1770,10 +1788,10 @@ exports[`DataFilters layer 2`] = `
             </div>
           </div>
           <footer
-            class="c23"
+            class="c24"
           >
             <button
-              class="c24"
+              class="c25"
               type="submit"
             >
               Apply filters
diff --git a/src/js/components/Layer/__tests__/Layer-test.js b/src/js/components/Layer/__tests__/Layer-test.js
index 3708429330b..91dd53eb88d 100644
--- a/src/js/components/Layer/__tests__/Layer-test.js
+++ b/src/js/components/Layer/__tests__/Layer-test.js
@@ -93,7 +93,7 @@ describe('Layer', () => {
         expectPortal('position-full-test').toMatchSnapshot();
       });
 
-      test(`should render correct border radius for position: ${position} - 
+      test(`should render correct border radius for position: ${position} -
       full: ${full}`, () => {
         const theme = {
           layer: {
@@ -293,7 +293,7 @@ describe('Layer', () => {
 
     const layerNode = getByTestId(document, 'focus-layer-test');
     expect(layerNode).toMatchSnapshot();
-    expect(document.activeElement.nodeName).toBe('INPUT');
+    expect(document.activeElement.nodeName).toBe('SPAN');
   });
 
   test('not steal focus from an autofocus focusable element', () => {
diff --git a/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap b/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
index 94300f25aa8..b0aef006e46 100644
--- a/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
+++ b/src/js/components/Layer/__tests__/__snapshots__/Layer-test.js.snap
@@ -52,6 +52,20 @@ exports[`Layer animation fadeIn 1`] = `
   animation: RcxFP 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -91,6 +105,10 @@ exports[`Layer animation fadeIn 1`] = `
     data-g-portal-id="0"
     id="animation-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -192,6 +210,20 @@ exports[`Layer animation false 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -231,6 +263,10 @@ exports[`Layer animation false 1`] = `
     data-g-portal-id="0"
     id="animation-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -333,6 +369,20 @@ exports[`Layer animation slide 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -372,6 +422,10 @@ exports[`Layer animation slide 1`] = `
     data-g-portal-id="0"
     id="animation-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -474,6 +528,20 @@ exports[`Layer animation true 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -513,6 +581,10 @@ exports[`Layer animation true 1`] = `
     data-g-portal-id="0"
     id="animation-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -615,6 +687,20 @@ exports[`Layer custom margin 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -654,6 +740,10 @@ exports[`Layer custom margin 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -757,6 +847,20 @@ exports[`Layer custom theme 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -796,6 +900,10 @@ exports[`Layer custom theme 1`] = `
     data-g-portal-id="0"
     id="custom-theme-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -893,6 +1001,20 @@ exports[`Layer dark context 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -923,6 +1045,10 @@ exports[`Layer dark context 1`] = `
     data-g-portal-id="0"
     id="non-modal-test"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     This is a non-modal layer
   </div>
 </div>
@@ -993,6 +1119,20 @@ exports[`Layer focus on layer 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c1 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c1:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
 
 }
@@ -1017,6 +1157,10 @@ exports[`Layer focus on layer 1`] = `
   data-g-portal-id="0"
   data-testid="focus-layer-test"
 >
+  <span
+    class="c1"
+    tabindex="-1"
+  />
   <input />
 </div>
 `;
@@ -1068,6 +1212,20 @@ exports[`Layer hidden 1`] = `
   border-radius: 4px;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c1 {
     position: relative;
@@ -1098,6 +1256,10 @@ exports[`Layer hidden 1`] = `
     data-g-portal-id="0"
     id="hidden-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -1143,6 +1305,10 @@ exports[`Layer hidden 3`] = `
     data-g-portal-id="0"
     id="hidden-test"
   >
+    <span
+      class="LayerContainer__FocusSpan-sc-1srj14c-0 fBBWDv"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -1239,6 +1405,20 @@ exports[`Layer invoke onClickOutside when modal={false} 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -1269,6 +1449,10 @@ exports[`Layer invoke onClickOutside when modal={false} 1`] = `
     data-g-portal-id="0"
     id="layer-node"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     <div>
       This is a layer
       <input
@@ -1370,6 +1554,20 @@ exports[`Layer invoke onClickOutside when modal={false} and layer has target 1`]
   transform: translate(-50%,-50%);
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c1 {
     position: relative;
@@ -1392,6 +1590,10 @@ exports[`Layer invoke onClickOutside when modal={false} and layer has target 1`]
     data-g-portal-id="0"
     id="target-test"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     this is a test layer
   </div>
 </div>
@@ -1474,6 +1676,20 @@ exports[`Layer invoke onClickOutside when modal={true} 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -1513,6 +1729,10 @@ exports[`Layer invoke onClickOutside when modal={true} 1`] = `
     data-g-portal-id="0"
     id="layer-node"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     <div>
       This is a layer
       <input
@@ -1619,6 +1839,20 @@ exports[`Layer invoke onClickOutside when modal={true} and layer has target 1`]
   transform: translate(-50%,-50%);
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c1 {
     position: relative;
@@ -1650,6 +1884,10 @@ exports[`Layer invoke onClickOutside when modal={true} and layer has target 1`]
     data-g-portal-id="0"
     id="target-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     this is a test layer
   </div>
 </div>
@@ -1682,7 +1920,7 @@ exports[`Layer invoke onClickOutside when modal={true} and layer has target 2`]
 `;
 
 exports[`Layer invokes onEsc when modal={false} 1`] = `
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1693,7 +1931,7 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   justify-content: space-between;
 }
 
-.c5 {
+.c6 {
   display: flex;
   box-sizing: border-box;
   min-width: 0;
@@ -1703,7 +1941,7 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   flex-basis: auto;
 }
 
-.c9 {
+.c10 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1715,7 +1953,7 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   flex: 0 0 auto;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -1724,30 +1962,30 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   stroke: #7D4CDB;
 }
 
-.c10 g {
+.c11 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c10 *:not([stroke])[fill='none'] {
+.c11 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c10 *[stroke*='#'],
-.c10 *[STROKE*='#'] {
+.c11 *[stroke*='#'],
+.c11 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c10 *[fill-rule],
-.c10 *[FILL-RULE],
-.c10 *[fill*='#'],
-.c10 *[FILL*='#'] {
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*='#'],
+.c11 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -1764,47 +2002,47 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   text-align: inherit;
 }
 
-.c2:focus {
+.c3:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c2:focus >circle,
-.c2:focus >ellipse,
-.c2:focus >line,
-.c2:focus >path,
-.c2:focus >polygon,
-.c2:focus >polyline,
-.c2:focus >rect {
+.c3:focus >circle,
+.c3:focus >ellipse,
+.c3:focus >line,
+.c3:focus >path,
+.c3:focus >polygon,
+.c3:focus >polyline,
+.c3:focus >rect {
   outline: none;
   box-shadow: 0 0 2px 2px #6FFFB0;
 }
 
-.c2:focus ::-moz-focus-inner {
+.c3:focus ::-moz-focus-inner {
   border: 0;
 }
 
-.c2:focus:not(:focus-visible) {
+.c3:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c2:focus:not(:focus-visible) >circle,
-.c2:focus:not(:focus-visible) >ellipse,
-.c2:focus:not(:focus-visible) >line,
-.c2:focus:not(:focus-visible) >path,
-.c2:focus:not(:focus-visible) >polygon,
-.c2:focus:not(:focus-visible) >polyline,
-.c2:focus:not(:focus-visible) >rect {
+.c3:focus:not(:focus-visible) >circle,
+.c3:focus:not(:focus-visible) >ellipse,
+.c3:focus:not(:focus-visible) >line,
+.c3:focus:not(:focus-visible) >path,
+.c3:focus:not(:focus-visible) >polygon,
+.c3:focus:not(:focus-visible) >polyline,
+.c3:focus:not(:focus-visible) >rect {
   outline: none;
   box-shadow: none;
 }
 
-.c2:focus:not(:focus-visible) ::-moz-focus-inner {
+.c3:focus:not(:focus-visible) ::-moz-focus-inner {
   border: 0;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   font-size: inherit;
   font-family: inherit;
@@ -1823,42 +2061,42 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   border: none;
 }
 
-.c7::-webkit-input-placeholder {
+.c8::-webkit-input-placeholder {
   color: #AAAAAA;
 }
 
-.c7::-moz-placeholder {
+.c8::-moz-placeholder {
   color: #AAAAAA;
 }
 
-.c7:-ms-input-placeholder {
+.c8:-ms-input-placeholder {
   color: #AAAAAA;
 }
 
-.c7 ::-webkit-search-decoration {
+.c8 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c7::-moz-focus-inner {
+.c8::-moz-focus-inner {
   border: none;
   outline: none;
 }
 
-.c7:-moz-placeholder,
-.c7::-moz-placeholder {
+.c8:-moz-placeholder,
+.c8::-moz-placeholder {
   opacity: 1;
 }
 
-.c6 {
+.c7 {
   position: relative;
   width: 100%;
 }
 
-.c8 {
+.c9 {
   cursor: pointer;
 }
 
-.c3 {
+.c4 {
   border: 1px solid rgba(0, 0, 0, 0.33);
   border-radius: 4px;
 }
@@ -1908,8 +2146,22 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
-  .c9 {
+  .c10 {
     margin-left: 6px;
     margin-right: 6px;
   }
@@ -1957,25 +2209,29 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
     data-g-portal-id="0"
     id="esc-test"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-label="Open Drop"
-      class="c2 c3"
+      class="c3 c4"
       type="button"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <div
-          class="c5"
+          class="c6"
         >
           <div
-            class="c6"
+            class="c7"
           >
             <input
               autocomplete="off"
-              class="c7 c8"
+              class="c8 c9"
               data-testid="test-select"
               inert=""
               readonly=""
@@ -1986,12 +2242,12 @@ exports[`Layer invokes onEsc when modal={false} 1`] = `
           </div>
         </div>
         <div
-          class="c9"
+          class="c10"
           style="min-width: auto;"
         >
           <svg
             aria-label="FormDown"
-            class="c10"
+            class="c11"
             viewBox="0 0 24 24"
           >
             <path
@@ -2162,6 +2418,20 @@ exports[`Layer margin large 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2201,6 +2471,10 @@ exports[`Layer margin large 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -2303,6 +2577,20 @@ exports[`Layer margin medium 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2342,6 +2630,10 @@ exports[`Layer margin medium 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -2444,6 +2736,20 @@ exports[`Layer margin none 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2483,6 +2789,10 @@ exports[`Layer margin none 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -2585,6 +2895,20 @@ exports[`Layer margin small 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2624,6 +2948,10 @@ exports[`Layer margin small 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -2726,6 +3054,20 @@ exports[`Layer margin xsmall 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2765,6 +3107,10 @@ exports[`Layer margin xsmall 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -2862,6 +3208,20 @@ exports[`Layer non-modal 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -2892,6 +3252,10 @@ exports[`Layer non-modal 1`] = `
     data-g-portal-id="0"
     id="non-modal-test"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     This is a non-modal layer
   </div>
 </div>
@@ -2962,6 +3326,20 @@ exports[`Layer not steal focus from an autofocus focusable element 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c1 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c1:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
 
 }
@@ -2986,6 +3364,10 @@ exports[`Layer not steal focus from an autofocus focusable element 1`] = `
   data-g-portal-id="0"
   data-testid="focus-layer-input-test"
 >
+  <span
+    class="c1"
+    tabindex="-1"
+  />
   <input
     data-testid="focus-input"
   />
@@ -3045,6 +3427,20 @@ exports[`Layer plain 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3084,6 +3480,10 @@ exports[`Layer plain 1`] = `
     data-g-portal-id="0"
     id="plain-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a plain layer
   </div>
 </div>
@@ -3186,6 +3586,20 @@ exports[`Layer position: bottom - full: false 1`] = `
   animation: fdqiZe 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3225,6 +3639,10 @@ exports[`Layer position: bottom - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -3328,6 +3746,20 @@ exports[`Layer position: bottom - full: horizontal 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3367,6 +3799,10 @@ exports[`Layer position: bottom - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -3471,6 +3907,20 @@ exports[`Layer position: bottom - full: true 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3510,6 +3960,10 @@ exports[`Layer position: bottom - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -3613,6 +4067,20 @@ exports[`Layer position: bottom - full: vertical 1`] = `
   animation: fdqiZe 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3652,6 +4120,10 @@ exports[`Layer position: bottom - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -3754,6 +4226,20 @@ exports[`Layer position: bottom-left - full: false 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3793,6 +4279,10 @@ exports[`Layer position: bottom-left - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -3896,6 +4386,20 @@ exports[`Layer position: bottom-left - full: horizontal 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -3935,6 +4439,10 @@ exports[`Layer position: bottom-left - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4039,6 +4547,20 @@ exports[`Layer position: bottom-left - full: true 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4078,6 +4600,10 @@ exports[`Layer position: bottom-left - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4181,6 +4707,20 @@ exports[`Layer position: bottom-left - full: vertical 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4220,6 +4760,10 @@ exports[`Layer position: bottom-left - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4322,6 +4866,20 @@ exports[`Layer position: bottom-right - full: false 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4361,6 +4919,10 @@ exports[`Layer position: bottom-right - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4464,6 +5026,20 @@ exports[`Layer position: bottom-right - full: horizontal 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4503,6 +5079,10 @@ exports[`Layer position: bottom-right - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4607,6 +5187,20 @@ exports[`Layer position: bottom-right - full: true 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4646,6 +5240,10 @@ exports[`Layer position: bottom-right - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4749,6 +5347,20 @@ exports[`Layer position: bottom-right - full: vertical 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4788,6 +5400,10 @@ exports[`Layer position: bottom-right - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -4890,6 +5506,20 @@ exports[`Layer position: center - full: false 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -4929,6 +5559,10 @@ exports[`Layer position: center - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5032,6 +5666,20 @@ exports[`Layer position: center - full: horizontal 1`] = `
   animation: fEUQAU 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5071,6 +5719,10 @@ exports[`Layer position: center - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5174,6 +5826,20 @@ exports[`Layer position: center - full: true 1`] = `
   animation: gVgDGd 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5213,6 +5879,10 @@ exports[`Layer position: center - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5316,6 +5986,20 @@ exports[`Layer position: center - full: vertical 1`] = `
   animation: bgBtCZ 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5355,6 +6039,10 @@ exports[`Layer position: center - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5457,6 +6145,20 @@ exports[`Layer position: end - full: false 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5496,6 +6198,10 @@ exports[`Layer position: end - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5599,6 +6305,20 @@ exports[`Layer position: end - full: horizontal 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5638,6 +6358,10 @@ exports[`Layer position: end - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5742,6 +6466,20 @@ exports[`Layer position: end - full: true 1`] = `
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5781,6 +6519,10 @@ exports[`Layer position: end - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -5884,6 +6626,20 @@ exports[`Layer position: end - full: vertical 1`] = `
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -5923,6 +6679,10 @@ exports[`Layer position: end - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6025,6 +6785,20 @@ exports[`Layer position: left - full: false 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6064,6 +6838,10 @@ exports[`Layer position: left - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6167,6 +6945,20 @@ exports[`Layer position: left - full: horizontal 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6206,6 +6998,10 @@ exports[`Layer position: left - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6310,6 +7106,20 @@ exports[`Layer position: left - full: true 1`] = `
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6349,6 +7159,10 @@ exports[`Layer position: left - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6452,6 +7266,20 @@ exports[`Layer position: left - full: vertical 1`] = `
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6491,6 +7319,10 @@ exports[`Layer position: left - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6593,6 +7425,20 @@ exports[`Layer position: right - full: false 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6632,6 +7478,10 @@ exports[`Layer position: right - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6735,6 +7585,20 @@ exports[`Layer position: right - full: horizontal 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6774,6 +7638,10 @@ exports[`Layer position: right - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -6878,6 +7746,20 @@ exports[`Layer position: right - full: true 1`] = `
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -6917,6 +7799,10 @@ exports[`Layer position: right - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7020,6 +7906,20 @@ exports[`Layer position: right - full: vertical 1`] = `
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7059,6 +7959,10 @@ exports[`Layer position: right - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7161,6 +8065,20 @@ exports[`Layer position: start - full: false 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7200,6 +8118,10 @@ exports[`Layer position: start - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7303,6 +8225,20 @@ exports[`Layer position: start - full: horizontal 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7342,6 +8278,10 @@ exports[`Layer position: start - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7446,6 +8386,20 @@ exports[`Layer position: start - full: true 1`] = `
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7485,6 +8439,10 @@ exports[`Layer position: start - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7588,6 +8546,20 @@ exports[`Layer position: start - full: vertical 1`] = `
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7627,6 +8599,10 @@ exports[`Layer position: start - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7729,6 +8705,20 @@ exports[`Layer position: top - full: false 1`] = `
   animation: hnDkLj 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7768,6 +8758,10 @@ exports[`Layer position: top - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -7871,6 +8865,20 @@ exports[`Layer position: top - full: horizontal 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -7910,6 +8918,10 @@ exports[`Layer position: top - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8014,6 +9026,20 @@ exports[`Layer position: top - full: true 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8053,6 +9079,10 @@ exports[`Layer position: top - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8156,6 +9186,20 @@ exports[`Layer position: top - full: vertical 1`] = `
   animation: hnDkLj 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8195,6 +9239,10 @@ exports[`Layer position: top - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8297,6 +9345,20 @@ exports[`Layer position: top-left - full: false 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8336,6 +9398,10 @@ exports[`Layer position: top-left - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8439,6 +9505,20 @@ exports[`Layer position: top-left - full: horizontal 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8478,6 +9558,10 @@ exports[`Layer position: top-left - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8582,6 +9666,20 @@ exports[`Layer position: top-left - full: true 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8621,6 +9719,10 @@ exports[`Layer position: top-left - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8724,6 +9826,20 @@ exports[`Layer position: top-left - full: vertical 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8763,6 +9879,10 @@ exports[`Layer position: top-left - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -8865,6 +9985,20 @@ exports[`Layer position: top-right - full: false 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -8904,6 +10038,10 @@ exports[`Layer position: top-right - full: false 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9007,6 +10145,20 @@ exports[`Layer position: top-right - full: horizontal 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9046,6 +10198,10 @@ exports[`Layer position: top-right - full: horizontal 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9150,6 +10306,20 @@ exports[`Layer position: top-right - full: true 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9189,6 +10359,10 @@ exports[`Layer position: top-right - full: true 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9292,6 +10466,20 @@ exports[`Layer position: top-right - full: vertical 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9331,6 +10519,10 @@ exports[`Layer position: top-right - full: vertical 1`] = `
     data-g-portal-id="0"
     id="position-full-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9433,6 +10625,20 @@ exports[`Layer renders outside grommet wrapper 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9472,6 +10678,10 @@ exports[`Layer renders outside grommet wrapper 1`] = `
     data-g-portal-id="0"
     id="grommet-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is layer
   </div>
 </div>
@@ -9574,6 +10784,20 @@ exports[`Layer should apply background 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9613,6 +10837,10 @@ exports[`Layer should apply background 1`] = `
     data-g-portal-id="0"
     id="margin-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9714,6 +10942,20 @@ exports[`Layer should only place id on StyledLayer when singleId === true 1`] =
   transform: translate(-50%,-50%);
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9753,6 +10995,10 @@ exports[`Layer should only place id on StyledLayer when singleId === true 1`] =
     data-g-portal-id="0"
     id="singleId-test__container"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
@@ -9803,7 +11049,7 @@ exports[`Layer should only place id on StyledLayer when singleId === true 2`] =
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -9856,6 +11102,20 @@ exports[`Layer should render correct border radius for position: bottom -
   animation: fdqiZe 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -9895,12 +11155,16 @@ exports[`Layer should render correct border radius for position: bottom -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -9946,7 +11210,7 @@ exports[`Layer should render correct border radius for position: bottom -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -10000,6 +11264,20 @@ exports[`Layer should render correct border radius for position: bottom -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10039,12 +11317,16 @@ exports[`Layer should render correct border radius for position: bottom -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10090,7 +11372,7 @@ exports[`Layer should render correct border radius for position: bottom -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -10145,6 +11427,20 @@ exports[`Layer should render correct border radius for position: bottom -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10184,12 +11480,16 @@ exports[`Layer should render correct border radius for position: bottom -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10235,7 +11535,7 @@ exports[`Layer should render correct border radius for position: bottom -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -10289,6 +11589,20 @@ exports[`Layer should render correct border radius for position: bottom -
   animation: fdqiZe 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10328,12 +11642,16 @@ exports[`Layer should render correct border radius for position: bottom -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom - 
+exports[`Layer should render correct border radius for position: bottom -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10379,7 +11697,7 @@ exports[`Layer should render correct border radius for position: bottom -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -10432,6 +11750,20 @@ exports[`Layer should render correct border radius for position: bottom-left -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10471,12 +11803,16 @@ exports[`Layer should render correct border radius for position: bottom-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10522,7 +11858,7 @@ exports[`Layer should render correct border radius for position: bottom-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -10576,6 +11912,20 @@ exports[`Layer should render correct border radius for position: bottom-left -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10615,12 +11965,16 @@ exports[`Layer should render correct border radius for position: bottom-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10666,7 +12020,7 @@ exports[`Layer should render correct border radius for position: bottom-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -10721,6 +12075,20 @@ exports[`Layer should render correct border radius for position: bottom-left -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10760,12 +12128,16 @@ exports[`Layer should render correct border radius for position: bottom-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10811,7 +12183,7 @@ exports[`Layer should render correct border radius for position: bottom-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -10865,6 +12237,20 @@ exports[`Layer should render correct border radius for position: bottom-left -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -10904,12 +12290,16 @@ exports[`Layer should render correct border radius for position: bottom-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-left - 
+exports[`Layer should render correct border radius for position: bottom-left -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -10955,7 +12345,7 @@ exports[`Layer should render correct border radius for position: bottom-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -11008,6 +12398,20 @@ exports[`Layer should render correct border radius for position: bottom-right -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11047,12 +12451,16 @@ exports[`Layer should render correct border radius for position: bottom-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11098,7 +12506,7 @@ exports[`Layer should render correct border radius for position: bottom-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -11152,6 +12560,20 @@ exports[`Layer should render correct border radius for position: bottom-right -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11191,12 +12613,16 @@ exports[`Layer should render correct border radius for position: bottom-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11242,7 +12668,7 @@ exports[`Layer should render correct border radius for position: bottom-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -11297,6 +12723,20 @@ exports[`Layer should render correct border radius for position: bottom-right -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11336,12 +12776,16 @@ exports[`Layer should render correct border radius for position: bottom-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11387,7 +12831,7 @@ exports[`Layer should render correct border radius for position: bottom-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -11441,6 +12885,20 @@ exports[`Layer should render correct border radius for position: bottom-right -
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11480,12 +12938,16 @@ exports[`Layer should render correct border radius for position: bottom-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: bottom-right - 
+exports[`Layer should render correct border radius for position: bottom-right -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11531,7 +12993,7 @@ exports[`Layer should render correct border radius for position: bottom-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -11584,6 +13046,20 @@ exports[`Layer should render correct border radius for position: center -
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11623,12 +13099,16 @@ exports[`Layer should render correct border radius for position: center -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11674,7 +13154,7 @@ exports[`Layer should render correct border radius for position: center -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -11728,6 +13208,20 @@ exports[`Layer should render correct border radius for position: center -
   animation: fEUQAU 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11767,12 +13261,16 @@ exports[`Layer should render correct border radius for position: center -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11818,7 +13316,7 @@ exports[`Layer should render correct border radius for position: center -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -11872,6 +13370,20 @@ exports[`Layer should render correct border radius for position: center -
   animation: gVgDGd 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -11911,12 +13423,16 @@ exports[`Layer should render correct border radius for position: center -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -11962,7 +13478,7 @@ exports[`Layer should render correct border radius for position: center -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -12016,6 +13532,20 @@ exports[`Layer should render correct border radius for position: center -
   animation: bgBtCZ 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12055,12 +13585,16 @@ exports[`Layer should render correct border radius for position: center -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: center - 
+exports[`Layer should render correct border radius for position: center -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12106,7 +13640,7 @@ exports[`Layer should render correct border radius for position: center -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -12160,6 +13694,20 @@ exports[`Layer should render correct border radius for position: end -
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12199,12 +13747,16 @@ exports[`Layer should render correct border radius for position: end -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12250,7 +13802,7 @@ exports[`Layer should render correct border radius for position: end -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -12304,6 +13856,20 @@ exports[`Layer should render correct border radius for position: end -
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12343,12 +13909,16 @@ exports[`Layer should render correct border radius for position: end -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12394,7 +13964,7 @@ exports[`Layer should render correct border radius for position: end -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -12449,6 +14019,20 @@ exports[`Layer should render correct border radius for position: end -
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12488,12 +14072,16 @@ exports[`Layer should render correct border radius for position: end -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12539,7 +14127,7 @@ exports[`Layer should render correct border radius for position: end -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -12593,6 +14181,20 @@ exports[`Layer should render correct border radius for position: end -
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12632,12 +14234,16 @@ exports[`Layer should render correct border radius for position: end -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: end - 
+exports[`Layer should render correct border radius for position: end -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12683,7 +14289,7 @@ exports[`Layer should render correct border radius for position: end -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -12736,6 +14342,20 @@ exports[`Layer should render correct border radius for position: left -
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12775,12 +14395,16 @@ exports[`Layer should render correct border radius for position: left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12826,7 +14450,7 @@ exports[`Layer should render correct border radius for position: left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -12880,6 +14504,20 @@ exports[`Layer should render correct border radius for position: left -
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -12919,12 +14557,16 @@ exports[`Layer should render correct border radius for position: left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -12970,7 +14612,7 @@ exports[`Layer should render correct border radius for position: left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -13025,6 +14667,20 @@ exports[`Layer should render correct border radius for position: left -
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13064,12 +14720,16 @@ exports[`Layer should render correct border radius for position: left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13115,7 +14775,7 @@ exports[`Layer should render correct border radius for position: left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -13169,6 +14829,20 @@ exports[`Layer should render correct border radius for position: left -
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13208,12 +14882,16 @@ exports[`Layer should render correct border radius for position: left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: left - 
+exports[`Layer should render correct border radius for position: left -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13259,7 +14937,7 @@ exports[`Layer should render correct border radius for position: left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -13312,6 +14990,20 @@ exports[`Layer should render correct border radius for position: right -
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13351,12 +15043,16 @@ exports[`Layer should render correct border radius for position: right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13402,7 +15098,7 @@ exports[`Layer should render correct border radius for position: right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -13456,6 +15152,20 @@ exports[`Layer should render correct border radius for position: right -
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13495,12 +15205,16 @@ exports[`Layer should render correct border radius for position: right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13546,7 +15260,7 @@ exports[`Layer should render correct border radius for position: right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -13601,6 +15315,20 @@ exports[`Layer should render correct border radius for position: right -
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13640,12 +15368,16 @@ exports[`Layer should render correct border radius for position: right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13691,7 +15423,7 @@ exports[`Layer should render correct border radius for position: right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -13745,6 +15477,20 @@ exports[`Layer should render correct border radius for position: right -
   animation: bKtuJK 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13784,12 +15530,16 @@ exports[`Layer should render correct border radius for position: right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: right - 
+exports[`Layer should render correct border radius for position: right -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13835,7 +15585,7 @@ exports[`Layer should render correct border radius for position: right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -13889,6 +15639,20 @@ exports[`Layer should render correct border radius for position: start -
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -13928,12 +15692,16 @@ exports[`Layer should render correct border radius for position: start -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -13979,7 +15747,7 @@ exports[`Layer should render correct border radius for position: start -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -14033,6 +15801,20 @@ exports[`Layer should render correct border radius for position: start -
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14072,12 +15854,16 @@ exports[`Layer should render correct border radius for position: start -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14123,7 +15909,7 @@ exports[`Layer should render correct border radius for position: start -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -14178,6 +15964,20 @@ exports[`Layer should render correct border radius for position: start -
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14217,12 +16017,16 @@ exports[`Layer should render correct border radius for position: start -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14268,7 +16072,7 @@ exports[`Layer should render correct border radius for position: start -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -14322,6 +16126,20 @@ exports[`Layer should render correct border radius for position: start -
   animation: kDpYdX 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14361,12 +16179,16 @@ exports[`Layer should render correct border radius for position: start -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: start - 
+exports[`Layer should render correct border radius for position: start -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14412,7 +16234,7 @@ exports[`Layer should render correct border radius for position: start -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -14465,6 +16287,20 @@ exports[`Layer should render correct border radius for position: top -
   animation: hnDkLj 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14504,12 +16340,16 @@ exports[`Layer should render correct border radius for position: top -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14555,7 +16395,7 @@ exports[`Layer should render correct border radius for position: top -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -14609,6 +16449,20 @@ exports[`Layer should render correct border radius for position: top -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14648,12 +16502,16 @@ exports[`Layer should render correct border radius for position: top -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14699,7 +16557,7 @@ exports[`Layer should render correct border radius for position: top -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -14754,6 +16612,20 @@ exports[`Layer should render correct border radius for position: top -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14793,12 +16665,16 @@ exports[`Layer should render correct border radius for position: top -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14844,7 +16720,7 @@ exports[`Layer should render correct border radius for position: top -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -14898,6 +16774,20 @@ exports[`Layer should render correct border radius for position: top -
   animation: hnDkLj 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -14937,12 +16827,16 @@ exports[`Layer should render correct border radius for position: top -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top - 
+exports[`Layer should render correct border radius for position: top -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -14988,7 +16882,7 @@ exports[`Layer should render correct border radius for position: top -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -15041,6 +16935,20 @@ exports[`Layer should render correct border radius for position: top-left -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15080,12 +16988,16 @@ exports[`Layer should render correct border radius for position: top-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15131,7 +17043,7 @@ exports[`Layer should render correct border radius for position: top-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -15185,6 +17097,20 @@ exports[`Layer should render correct border radius for position: top-left -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15224,12 +17150,16 @@ exports[`Layer should render correct border radius for position: top-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15275,7 +17205,7 @@ exports[`Layer should render correct border radius for position: top-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -15330,6 +17260,20 @@ exports[`Layer should render correct border radius for position: top-left -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15369,12 +17313,16 @@ exports[`Layer should render correct border radius for position: top-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15420,7 +17368,7 @@ exports[`Layer should render correct border radius for position: top-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -15474,6 +17422,20 @@ exports[`Layer should render correct border radius for position: top-left -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15513,12 +17475,16 @@ exports[`Layer should render correct border radius for position: top-left -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-left - 
+exports[`Layer should render correct border radius for position: top-left -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15564,7 +17530,7 @@ exports[`Layer should render correct border radius for position: top-left -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: false 1`] = `
 .c0 {
   font-size: 18px;
@@ -15617,6 +17583,20 @@ exports[`Layer should render correct border radius for position: top-right -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15656,12 +17636,16 @@ exports[`Layer should render correct border radius for position: top-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: false 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15707,7 +17691,7 @@ exports[`Layer should render correct border radius for position: top-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: horizontal 1`] = `
 .c0 {
   font-size: 18px;
@@ -15761,6 +17745,20 @@ exports[`Layer should render correct border radius for position: top-right -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15800,12 +17798,16 @@ exports[`Layer should render correct border radius for position: top-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: horizontal 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15851,7 +17853,7 @@ exports[`Layer should render correct border radius for position: top-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: true 1`] = `
 .c0 {
   font-size: 18px;
@@ -15906,6 +17908,20 @@ exports[`Layer should render correct border radius for position: top-right -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -15945,12 +17961,16 @@ exports[`Layer should render correct border radius for position: top-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: true 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -15996,7 +18016,7 @@ exports[`Layer should render correct border radius for position: top-right -
 }"
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: vertical 1`] = `
 .c0 {
   font-size: 18px;
@@ -16050,6 +18070,20 @@ exports[`Layer should render correct border radius for position: top-right -
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c0 {
     position: fixed;
@@ -16089,12 +18123,16 @@ exports[`Layer should render correct border radius for position: top-right -
     data-g-portal-id="0"
     id="border-radius-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     This is a layer
   </div>
 </div>
 `;
 
-exports[`Layer should render correct border radius for position: top-right - 
+exports[`Layer should render correct border radius for position: top-right -
       full: vertical 2`] = `
 ".gTxqt {
   font-size: 18px;
@@ -16192,6 +18230,20 @@ exports[`Layer target 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c3 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c3:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c1 {
     position: relative;
@@ -16223,6 +18275,10 @@ exports[`Layer target 1`] = `
     data-g-portal-id="0"
     id="target-test"
   >
+    <span
+      class="c3"
+      tabindex="-1"
+    />
     this is a test layer
   </div>
 </div>
@@ -16301,6 +18357,20 @@ exports[`Layer target not modal 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
 @media only screen and (max-width: 768px) {
   .c1 {
     position: relative;
@@ -16323,6 +18393,10 @@ exports[`Layer target not modal 1`] = `
     data-g-portal-id="0"
     id="target-test"
   >
+    <span
+      class="c2"
+      tabindex="-1"
+    />
     this is a test layer
   </div>
 </div>
diff --git a/src/js/components/Notification/__tests__/__snapshots__/Notification-test.tsx.snap b/src/js/components/Notification/__tests__/__snapshots__/Notification-test.tsx.snap
index 14c451460a7..bc10dc95820 100644
--- a/src/js/components/Notification/__tests__/__snapshots__/Notification-test.tsx.snap
+++ b/src/js/components/Notification/__tests__/__snapshots__/Notification-test.tsx.snap
@@ -1787,7 +1787,7 @@ exports[`Notification onClose 1`] = `
 `;
 
 exports[`Notification position bottom 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -1796,30 +1796,30 @@ exports[`Notification position bottom 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1833,7 +1833,7 @@ exports[`Notification position bottom 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1847,7 +1847,7 @@ exports[`Notification position bottom 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1858,7 +1858,7 @@ exports[`Notification position bottom 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -1867,13 +1867,13 @@ exports[`Notification position bottom 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -1923,7 +1923,21 @@ exports[`Notification position bottom 1`] = `
   animation: fdqiZe 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -1931,27 +1945,27 @@ exports[`Notification position bottom 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -1967,18 +1981,22 @@ exports[`Notification position bottom 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -1993,18 +2011,18 @@ exports[`Notification position bottom 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -2042,7 +2060,7 @@ exports[`Notification position bottom 2`] = `
 `;
 
 exports[`Notification position bottom-left 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -2051,30 +2069,30 @@ exports[`Notification position bottom-left 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2088,7 +2106,7 @@ exports[`Notification position bottom-left 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2102,7 +2120,7 @@ exports[`Notification position bottom-left 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2113,7 +2131,7 @@ exports[`Notification position bottom-left 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2122,13 +2140,13 @@ exports[`Notification position bottom-left 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -2178,7 +2196,21 @@ exports[`Notification position bottom-left 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -2186,27 +2218,27 @@ exports[`Notification position bottom-left 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -2222,18 +2254,22 @@ exports[`Notification position bottom-left 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -2248,18 +2284,18 @@ exports[`Notification position bottom-left 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -2297,7 +2333,7 @@ exports[`Notification position bottom-left 2`] = `
 `;
 
 exports[`Notification position bottom-right 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -2306,30 +2342,30 @@ exports[`Notification position bottom-right 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2343,7 +2379,7 @@ exports[`Notification position bottom-right 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2357,7 +2393,7 @@ exports[`Notification position bottom-right 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2368,7 +2404,7 @@ exports[`Notification position bottom-right 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2377,13 +2413,13 @@ exports[`Notification position bottom-right 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -2433,7 +2469,21 @@ exports[`Notification position bottom-right 1`] = `
   animation: cQwfQi 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -2441,27 +2491,27 @@ exports[`Notification position bottom-right 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -2477,18 +2527,22 @@ exports[`Notification position bottom-right 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -2503,18 +2557,18 @@ exports[`Notification position bottom-right 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -2552,7 +2606,7 @@ exports[`Notification position bottom-right 2`] = `
 `;
 
 exports[`Notification position center 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -2561,30 +2615,30 @@ exports[`Notification position center 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2598,7 +2652,7 @@ exports[`Notification position center 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2612,7 +2666,7 @@ exports[`Notification position center 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2623,7 +2677,7 @@ exports[`Notification position center 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2632,13 +2686,13 @@ exports[`Notification position center 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -2688,7 +2742,21 @@ exports[`Notification position center 1`] = `
   animation: hWAzxx 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -2696,27 +2764,27 @@ exports[`Notification position center 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -2732,18 +2800,22 @@ exports[`Notification position center 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -2758,18 +2830,18 @@ exports[`Notification position center 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -2807,7 +2879,7 @@ exports[`Notification position center 2`] = `
 `;
 
 exports[`Notification position end 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -2816,30 +2888,30 @@ exports[`Notification position end 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2853,7 +2925,7 @@ exports[`Notification position end 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2867,7 +2939,7 @@ exports[`Notification position end 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2878,7 +2950,7 @@ exports[`Notification position end 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -2887,13 +2959,13 @@ exports[`Notification position end 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -2943,7 +3015,21 @@ exports[`Notification position end 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -2951,27 +3037,27 @@ exports[`Notification position end 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -2987,18 +3073,22 @@ exports[`Notification position end 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -3013,18 +3103,18 @@ exports[`Notification position end 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -3062,7 +3152,7 @@ exports[`Notification position end 2`] = `
 `;
 
 exports[`Notification position left 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -3071,30 +3161,30 @@ exports[`Notification position left 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3108,7 +3198,7 @@ exports[`Notification position left 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3122,7 +3212,7 @@ exports[`Notification position left 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3133,7 +3223,7 @@ exports[`Notification position left 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3142,13 +3232,13 @@ exports[`Notification position left 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -3198,7 +3288,21 @@ exports[`Notification position left 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -3206,27 +3310,27 @@ exports[`Notification position left 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -3242,18 +3346,22 @@ exports[`Notification position left 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -3268,18 +3376,18 @@ exports[`Notification position left 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -3317,7 +3425,7 @@ exports[`Notification position left 2`] = `
 `;
 
 exports[`Notification position right 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -3326,30 +3434,30 @@ exports[`Notification position right 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3363,7 +3471,7 @@ exports[`Notification position right 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3377,7 +3485,7 @@ exports[`Notification position right 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3388,7 +3496,7 @@ exports[`Notification position right 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3397,13 +3505,13 @@ exports[`Notification position right 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -3453,7 +3561,21 @@ exports[`Notification position right 1`] = `
   animation: drjPPC 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -3461,27 +3583,27 @@ exports[`Notification position right 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -3497,18 +3619,22 @@ exports[`Notification position right 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -3523,18 +3649,18 @@ exports[`Notification position right 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -3572,7 +3698,7 @@ exports[`Notification position right 2`] = `
 `;
 
 exports[`Notification position start 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -3581,30 +3707,30 @@ exports[`Notification position start 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3618,7 +3744,7 @@ exports[`Notification position start 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3632,7 +3758,7 @@ exports[`Notification position start 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3643,7 +3769,7 @@ exports[`Notification position start 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3652,13 +3778,13 @@ exports[`Notification position start 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -3708,7 +3834,21 @@ exports[`Notification position start 1`] = `
   animation: kPYden 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -3716,27 +3856,27 @@ exports[`Notification position start 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -3752,18 +3892,22 @@ exports[`Notification position start 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -3778,18 +3922,18 @@ exports[`Notification position start 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -3827,7 +3971,7 @@ exports[`Notification position start 2`] = `
 `;
 
 exports[`Notification position top 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -3836,30 +3980,30 @@ exports[`Notification position top 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3873,7 +4017,7 @@ exports[`Notification position top 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3887,7 +4031,7 @@ exports[`Notification position top 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3898,7 +4042,7 @@ exports[`Notification position top 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -3907,13 +4051,13 @@ exports[`Notification position top 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -3963,7 +4107,21 @@ exports[`Notification position top 1`] = `
   animation: hnDkLj 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -3971,27 +4129,27 @@ exports[`Notification position top 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -4007,18 +4165,22 @@ exports[`Notification position top 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -4033,18 +4195,18 @@ exports[`Notification position top 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -4082,7 +4244,7 @@ exports[`Notification position top 2`] = `
 `;
 
 exports[`Notification position top-left 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -4091,30 +4253,30 @@ exports[`Notification position top-left 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4128,7 +4290,7 @@ exports[`Notification position top-left 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4142,7 +4304,7 @@ exports[`Notification position top-left 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4153,7 +4315,7 @@ exports[`Notification position top-left 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4162,13 +4324,13 @@ exports[`Notification position top-left 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -4218,7 +4380,21 @@ exports[`Notification position top-left 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -4226,27 +4402,27 @@ exports[`Notification position top-left 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -4262,18 +4438,22 @@ exports[`Notification position top-left 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -4288,18 +4468,18 @@ exports[`Notification position top-left 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>
@@ -4337,7 +4517,7 @@ exports[`Notification position top-left 2`] = `
 `;
 
 exports[`Notification position top-right 1`] = `
-.c5 {
+.c6 {
   display: inline-block;
   flex: 0 0 auto;
   width: 24px;
@@ -4346,30 +4526,30 @@ exports[`Notification position top-right 1`] = `
   stroke: #919191;
 }
 
-.c5 g {
+.c6 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c5 *:not([stroke])[fill='none'] {
+.c6 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c5 *[stroke*='#'],
-.c5 *[STROKE*='#'] {
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c5 *[fill-rule],
-.c5 *[FILL-RULE],
-.c5 *[fill*='#'],
-.c5 *[FILL*='#'] {
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c2 {
+.c3 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4383,7 +4563,7 @@ exports[`Notification position top-right 1`] = `
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.20);
 }
 
-.c3 {
+.c4 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4397,7 +4577,7 @@ exports[`Notification position top-right 1`] = `
   padding-bottom: 6px;
 }
 
-.c4 {
+.c5 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4408,7 +4588,7 @@ exports[`Notification position top-right 1`] = `
   padding-right: 12px;
 }
 
-.c6 {
+.c7 {
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
@@ -4417,13 +4597,13 @@ exports[`Notification position top-right 1`] = `
   flex-direction: column;
 }
 
-.c7 {
+.c8 {
   font-size: 18px;
   line-height: 24px;
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   margin-right: 6px;
   font-size: 18px;
   line-height: 24px;
@@ -4473,7 +4653,21 @@ exports[`Notification position top-right 1`] = `
   animation: ffftsv 0.2s ease-in-out forwards;
 }
 
-.c8 {
+.c2 {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c9 {
   margin: 0px;
   font-size: 18px;
   line-height: 24px;
@@ -4481,27 +4675,27 @@ exports[`Notification position top-right 1`] = `
 }
 
 @media only screen and (max-width: 768px) {
-  .c2 {
+  .c3 {
     border-radius: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-left: 6px;
     padding-right: 6px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c3 {
+  .c4 {
     padding-top: 3px;
     padding-bottom: 3px;
   }
 }
 
 @media only screen and (max-width: 768px) {
-  .c4 {
+  .c5 {
     padding-right: 6px;
   }
 }
@@ -4517,18 +4711,22 @@ exports[`Notification position top-right 1`] = `
     id="position-test"
     role="status"
   >
-    <div
+    <span
       class="c2"
+      tabindex="-1"
+    />
+    <div
+      class="c3"
     >
       <div
-        class="c3"
+        class="c4"
       >
         <div
-          class="c4"
+          class="c5"
         >
           <svg
             aria-label="Status is unknown"
-            class="c5"
+            class="c6"
             viewBox="0 0 12 12"
           >
             <rect
@@ -4543,18 +4741,18 @@ exports[`Notification position top-right 1`] = `
           </svg>
         </div>
         <div
-          class="c6"
+          class="c7"
         >
           <span
-            class="c7"
+            class="c8"
           >
             title
           </span>
           <p
-            class="c8"
+            class="c9"
           >
             <span
-              class="c9"
+              class="c10"
             >
               message
             </span>