From ebeb142cb3965a9ace29f4ac730adf52c14b94a1 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Tue, 15 Nov 2022 16:58:04 +0000
Subject: [PATCH 1/5] [EuiBetaBadge] Add alignment prop

---
 .../__snapshots__/beta_badge.test.tsx.snap    | 51 +++++++++++++++----
 .../badge/beta_badge/beta_badge.styles.ts     | 11 +++-
 .../badge/beta_badge/beta_badge.test.tsx      | 14 ++++-
 .../badge/beta_badge/beta_badge.tsx           |  9 ++++
 .../card/__snapshots__/card.test.tsx.snap     |  2 +-
 .../key_pad_menu_item.test.tsx.snap           |  8 +--
 6 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
index d0d55ed07bc..02b55a1a500 100644
--- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
+++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`EuiBetaBadge is rendered 1`] = `
 <span>
   <span
     aria-label="aria-label"
-    class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m-baseline"
     data-test-subj="test subject string"
     title="Beta"
   >
@@ -13,10 +13,43 @@ exports[`EuiBetaBadge is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBetaBadge props alignement baseline is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
+exports[`EuiBetaBadge props alignement middle is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-middle"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
+exports[`EuiBetaBadge props alignement super is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-super"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
 exports[`EuiBetaBadge props color accent is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-accent-m"
+    class="euiBetaBadge emotion-euiBetaBadge-accent-m-baseline"
     title="Beta"
   >
     Beta
@@ -27,7 +60,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = `
 exports[`EuiBetaBadge props color hollow is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     Beta
@@ -38,7 +71,7 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = `
 exports[`EuiBetaBadge props color subdued is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
+    class="euiBetaBadge emotion-euiBetaBadge-subdued-m-baseline"
     title="Beta"
   >
     Beta
@@ -49,7 +82,7 @@ exports[`EuiBetaBadge props color subdued is rendered 1`] = `
 exports[`EuiBetaBadge props iconType 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     <span
@@ -65,7 +98,7 @@ exports[`EuiBetaBadge props iconType 1`] = `
 exports[`EuiBetaBadge props single letter 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="B"
   >
     B
@@ -76,7 +109,7 @@ exports[`EuiBetaBadge props single letter 1`] = `
 exports[`EuiBetaBadge props size m is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     title="Beta"
   >
     Beta
@@ -87,7 +120,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = `
 exports[`EuiBetaBadge props size s is rendered 1`] = `
 <span>
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-s-baseline"
     title="Beta"
   >
     Beta
@@ -101,7 +134,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
   data-test-subj="DTS"
 >
   <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
+    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline"
     role="button"
     tabindex="0"
   >
diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts
index b5b5cdef519..0faf943a619 100644
--- a/src/components/badge/beta_badge/beta_badge.styles.ts
+++ b/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -22,7 +22,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     euiBetaBadge: css`
       display: inline-block;
-      vertical-align: super; // if displayed inline with text
       border-radius: ${euiTheme.size.l};
       cursor: default;
 
@@ -85,6 +84,16 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       position: relative;
       transform: translate(0, -1px);
     `,
+    // alignment
+    baseline: css`
+      vertical-align: baseline;
+    `,
+    middle: css`
+      vertical-align: middle;
+    `,
+    super: css`
+      vertical-align: super;
+    `,
   };
 };
 
diff --git a/src/components/badge/beta_badge/beta_badge.test.tsx b/src/components/badge/beta_badge/beta_badge.test.tsx
index 7537cdef2d8..bba745f540d 100644
--- a/src/components/badge/beta_badge/beta_badge.test.tsx
+++ b/src/components/badge/beta_badge/beta_badge.test.tsx
@@ -11,7 +11,7 @@ import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
-import { EuiBetaBadge, COLORS, SIZES } from './beta_badge';
+import { EuiBetaBadge, COLORS, SIZES, ALIGNMENTS } from './beta_badge';
 
 describe('EuiBetaBadge', () => {
   shouldRenderCustomStyles(
@@ -72,5 +72,17 @@ describe('EuiBetaBadge', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    describe('alignement', () => {
+      ALIGNMENTS.forEach((alignment) => {
+        test(`${alignment} is rendered`, () => {
+          const component = render(
+            <EuiBetaBadge label="Beta" alignment={alignment} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
   });
 });
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index fb86756f12c..5ff3250d763 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -30,6 +30,9 @@ export type BetaBadgeColor = typeof COLORS[number];
 export const SIZES = ['s', 'm'] as const;
 export type BetaBadgeSize = typeof SIZES[number];
 
+export const ALIGNMENTS = ['baseline', 'middle', 'super'] as const;
+export type BetaBadgeAlignment = typeof ALIGNMENTS[number];
+
 type WithButtonProps = {
   /**
    * Will apply an onclick to the badge itself
@@ -112,6 +115,10 @@ type BadgeProps = {
    */
   color?: BetaBadgeColor;
   size?: BetaBadgeSize;
+  /**
+   * Sets the `vertical-align` CSS property
+   */
+  alignment?: BetaBadgeAlignment;
 } & ExclusiveUnion<LabelAsNode, LabelAsString>;
 
 export type EuiBetaBadgeProps = CommonProps &
@@ -136,6 +143,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
   rel,
   target,
   size = 'm',
+  alignment = 'baseline',
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
@@ -150,6 +158,7 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
     styles.euiBetaBadge,
     styles[color],
     styles[size],
+    styles[alignment],
     isCircular
       ? styles.badgeSizes.circle[size]
       : styles.badgeSizes.default[size],
diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index f02fcb9c3b6..d2ce4bf2bf9 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
       class="emotion-euiCard__betaBadgeAnchor"
     >
       <a
-        class="euiBetaBadge emotion-euiBetaBadge-hollow-m-euiCard__betaBadge"
+        class="euiBetaBadge emotion-euiBetaBadge-hollow-m-baseline-euiCard__betaBadge"
         href="http://www.elastic.co/"
         id="generated-idBetaBadge"
         rel=""
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index 3f7d146d8e4..1f3cc32ca33 100644
--- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B
@@ -142,7 +142,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B
@@ -177,7 +177,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           <span
@@ -217,7 +217,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent
       <span>
         <span
           aria-hidden="true"
-          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s"
+          class="euiBetaBadge euiKeyPadMenuItem__betaBadge emotion-euiBetaBadge-subdued-s-baseline"
           title="B"
         >
           B

From 1443c20f440814162e642fd59e4fb7c3c8cf9f5e Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 16 Nov 2022 12:22:05 +0000
Subject: [PATCH 2/5] Adding CL entry

---
 upcoming_changelogs/6361.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 upcoming_changelogs/6361.md

diff --git a/upcoming_changelogs/6361.md b/upcoming_changelogs/6361.md
new file mode 100644
index 00000000000..8cc873d69ee
--- /dev/null
+++ b/upcoming_changelogs/6361.md
@@ -0,0 +1 @@
+- Added `alignment` prop to `EuiBetaBadge`
\ No newline at end of file

From 4cc099c34039bcd9d17700b7e9b2557a50f9d4f6 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 16 Nov 2022 13:01:22 +0000
Subject: [PATCH 3/5] Fixing comment

---
 src/components/badge/beta_badge/beta_badge.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts
index 0faf943a619..84a015b486c 100644
--- a/src/components/badge/beta_badge/beta_badge.styles.ts
+++ b/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -84,7 +84,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       position: relative;
       transform: translate(0, -1px);
     `,
-    // alignment
+    // Alignments
     baseline: css`
       vertical-align: baseline;
     `,

From 40ab7c57fd6e14925cb5f04d16678b842736bfdd Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 18 Nov 2022 12:54:33 +0000
Subject: [PATCH 4/5] Removinf `super` option

---
 .../__snapshots__/beta_badge.test.tsx.snap    |  11 --
 .../badge/beta_badge/beta_badge.tsx           |   2 +-
 .../collapsible_nav.test.tsx.snap             |  45 -------
 .../__snapshots__/data_grid.test.tsx.snap     |  50 --------
 .../keyboard_shortcuts.test.tsx.snap          |  16 +--
 .../flyout/__snapshots__/flyout.test.tsx.snap | 120 ------------------
 .../__snapshots__/focus_trap.test.tsx.snap    |  15 ---
 .../__snapshots__/super_select.test.tsx.snap  |  40 ------
 .../__snapshots__/confirm_modal.test.tsx.snap |  22 ----
 .../modal/__snapshots__/modal.test.tsx.snap   |  16 +--
 .../__snapshots__/popover.rtl.test.tsx.snap   |   5 -
 .../__snapshots__/popover.test.tsx.snap       |  65 ----------
 .../__snapshots__/tour_step.test.tsx.snap     |  25 ----
 13 files changed, 3 insertions(+), 429 deletions(-)

diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
index 02b55a1a500..b34e7534767 100644
--- a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
+++ b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -35,17 +35,6 @@ exports[`EuiBetaBadge props alignement middle is rendered 1`] = `
 </span>
 `;
 
-exports[`EuiBetaBadge props alignement super is rendered 1`] = `
-<span>
-  <span
-    class="euiBetaBadge emotion-euiBetaBadge-hollow-m-super"
-    title="Beta"
-  >
-    Beta
-  </span>
-</span>
-`;
-
 exports[`EuiBetaBadge props color accent is rendered 1`] = `
 <span>
   <span
diff --git a/src/components/badge/beta_badge/beta_badge.tsx b/src/components/badge/beta_badge/beta_badge.tsx
index 5ff3250d763..7b9d82cc744 100644
--- a/src/components/badge/beta_badge/beta_badge.tsx
+++ b/src/components/badge/beta_badge/beta_badge.tsx
@@ -30,7 +30,7 @@ export type BetaBadgeColor = typeof COLORS[number];
 export const SIZES = ['s', 'm'] as const;
 export type BetaBadgeSize = typeof SIZES[number];
 
-export const ALIGNMENTS = ['baseline', 'middle', 'super'] as const;
+export const ALIGNMENTS = ['baseline', 'middle'] as const;
 export type BetaBadgeAlignment = typeof ALIGNMENTS[number];
 
 type WithButtonProps = {
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 117ec48fcc9..bae474c35c2 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -8,11 +8,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -56,11 +51,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -103,11 +93,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -153,11 +138,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -199,11 +179,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -239,11 +214,6 @@ Array [
 
 exports[`EuiCollapsibleNav props isDocked 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -275,11 +245,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -325,11 +290,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -356,11 +316,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 7223dba7ccc..fe51a6c7c16 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -456,11 +456,6 @@ exports[`EuiDataGrid render column actions renders various column actions config
 
 exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -927,11 +922,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders control columns 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1235,11 +1225,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1350,11 +1335,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1401,11 +1381,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1516,11 +1491,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1567,11 +1537,6 @@ Array [
               style="position:absolute;left:0;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1682,11 +1647,6 @@ Array [
               style="position:absolute;left:250px;top:0;height:34px;width:50px"
               tabindex="-1"
             >
-              <div
-                data-focus-guard="true"
-                style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-                tabindex="-1"
-              />
               <div
                 data-focus-guard="true"
                 style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -1742,11 +1702,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders custom column headers 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -2212,11 +2167,6 @@ Array [
 
 exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
index 1d8a65d631b..a1c228f1642 100644
--- a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`useDataGridKeyboardShortcuts returns a popover containing a list of keyboard shortcuts 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="euiPopover euiPopover-isOpen emotion-euiPopover"
       data-test-subj="dataGridKeyboardShortcutsPopover"
@@ -37,19 +34,10 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
     data-euiportal="true"
   >
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -252,8 +240,6 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
       </div>
     </div>
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index d86fd5482a7..524fc24cda4 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -8,11 +8,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -55,11 +50,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -101,11 +91,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -146,11 +131,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -191,11 +171,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -222,11 +197,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -267,11 +237,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -313,11 +278,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -359,11 +319,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -404,11 +359,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -449,11 +399,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -493,11 +438,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -537,11 +477,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -582,11 +517,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -627,11 +557,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -672,11 +597,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -717,11 +637,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -761,11 +676,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -806,11 +716,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -851,11 +756,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -897,11 +797,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -942,11 +837,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -987,11 +877,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -1026,11 +911,6 @@ Array [
 
 exports[`EuiFlyout props type=push is rendered 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
diff --git a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
index 92691319f29..c7350bc8eb1 100644
--- a/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
+++ b/src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap
@@ -2,11 +2,6 @@
 
 exports[`EuiFocusTrap accepts className and style 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -29,11 +24,6 @@ Array [
 
 exports[`EuiFocusTrap can be disabled 1`] = `
 Array [
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />,
   <div
     data-focus-guard="true"
     style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
@@ -59,11 +49,6 @@ Array [
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 17abea08ee7..48224aab1ca 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -154,11 +154,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -176,11 +171,6 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -427,11 +417,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -449,11 +434,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -589,11 +569,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -611,11 +586,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
@@ -750,11 +720,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -772,11 +737,6 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
           style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="0"
         />
-        <div
-          data-focus-guard="true"
-          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-          tabindex="1"
-        />
         <div
           data-focus-lock-disabled="false"
         >
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 6f4d9753a48..4ce8f887999 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -3,19 +3,10 @@
 exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
 Array [
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -102,8 +93,6 @@ Array [
     </div>
   </div>,
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
@@ -114,19 +103,10 @@ Array [
 exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
 Array [
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="1"
-  />,
   <div
     data-focus-lock-disabled="false"
   >
@@ -197,8 +177,6 @@ Array [
     </div>
   </div>,
   <div
-    aria-hidden="true"
-    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 4ef88e6cd23..3769c2c754d 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -2,29 +2,17 @@
 
 exports[`EuiModal renders 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  />
+  <div />
   <div
     class="euiOverlayMask emotion-euiOverlayMask-aboveHeader"
     data-euiportal="true"
     data-relative-to-header="above"
   >
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-    <div
-      aria-hidden="true"
-      data-aria-hidden="true"
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="1"
-    />
     <div
       data-focus-lock-disabled="false"
     >
@@ -50,8 +38,6 @@ exports[`EuiModal renders 1`] = `
       </div>
     </div>
     <div
-      aria-hidden="true"
-      data-aria-hidden="true"
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
diff --git a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
index dfb5cf0e586..406b3163813 100644
--- a/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -34,11 +34,6 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
   <div
     data-euiportal="true"
   >
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index b0458f3bff7..16fe0321a98 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -95,11 +95,6 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -156,11 +151,6 @@ exports[`EuiPopover props buffer 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -215,11 +205,6 @@ exports[`EuiPopover props buffer for all sides 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -287,11 +272,6 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -359,11 +339,6 @@ exports[`EuiPopover props isOpen renders true 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -418,11 +393,6 @@ exports[`EuiPopover props offset with arrow 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -477,11 +447,6 @@ exports[`EuiPopover props offset without arrow 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -531,11 +496,6 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -590,11 +550,6 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -640,11 +595,6 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -699,11 +649,6 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -758,11 +703,6 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
@@ -818,11 +758,6 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="-1"
     />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
     <div
       data-focus-lock-disabled="disabled"
     >
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index d79bb7c0111..acbf0c7ca91 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -32,11 +32,6 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -135,11 +130,6 @@ exports[`EuiTourStep can have subtitle 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -243,11 +233,6 @@ exports[`EuiTourStep can override the footer action 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -335,11 +320,6 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -433,11 +413,6 @@ exports[`EuiTourStep is rendered 1`] = `
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
   />
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />
   <div
     data-focus-lock-disabled="disabled"
   >

From 29c55074c27a2cceedb7150b3d5585f1433f28dd Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 18 Nov 2022 13:04:47 +0000
Subject: [PATCH 5/5] Removing unnecessary style

---
 src/components/badge/beta_badge/beta_badge.styles.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/badge/beta_badge/beta_badge.styles.ts b/src/components/badge/beta_badge/beta_badge.styles.ts
index 84a015b486c..4a4613bac30 100644
--- a/src/components/badge/beta_badge/beta_badge.styles.ts
+++ b/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -91,9 +91,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     middle: css`
       vertical-align: middle;
     `,
-    super: css`
-      vertical-align: super;
-    `,
   };
 };