From d88fd8a5414801b1c333802f90784e18d0bc5b73 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 6 Oct 2021 14:23:26 -0500
Subject: [PATCH 1/5] remove visibiliy:hidden; rely on opacity

---
 src/components/popover/_popover.scss | 2 --
 src/components/popover/popover.tsx   | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index 188bccdab17..ca875456fa4 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -38,7 +38,6 @@
   backface-visibility: hidden;
   pointer-events: none;
   opacity: 0; /* 2 */
-  visibility: hidden; /* 2 */
   transition: /* 2 */
     opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
     visibility $euiAnimSlightBounce $euiAnimSpeedSlow;
@@ -54,7 +53,6 @@
 
   &.euiPopover__panel-isOpen {
     opacity: 1;
-    visibility: visible;
     pointer-events: auto;
   }
 
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index c45771dfeae..7bf8200d478 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -435,8 +435,8 @@ export class EuiPopover extends Component<Props, State> {
         // there isn't a focus target, one of two reasons:
         // #1 is the whole panel hidden? If so, schedule another check
         // #2 panel is visible but no tabbables exist, move focus to the panel
-        const panelVisibility = window.getComputedStyle(this.panel).visibility;
-        if (panelVisibility === 'hidden') {
+        const panelVisibility = window.getComputedStyle(this.panel).opacity;
+        if (panelVisibility === '0') {
           // #1
           this.updateFocus();
         } else {

From bf3a3630703d74726de5c13b0f7d469ca370a718 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 6 Oct 2021 14:24:56 -0500
Subject: [PATCH 2/5] revert me

---
 src-docs/src/views/progress/progress_chart.js | 95 ++++++++++++-------
 1 file changed, 61 insertions(+), 34 deletions(-)

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
index 16ac692236d..dcb15f21eca 100644
--- a/src-docs/src/views/progress/progress_chart.js
+++ b/src-docs/src/views/progress/progress_chart.js
@@ -1,6 +1,12 @@
 import React, { Fragment } from 'react';
 
-import { EuiProgress, EuiSpacer } from '../../../../src/components';
+import {
+  EuiBadge,
+  EuiPopover,
+  EuiButton,
+  EuiProgress,
+  EuiSpacer,
+} from '../../../../src/components';
 
 const data = [
   { label: 'Basic percentage', value: '80' },
@@ -13,36 +19,57 @@ const data = [
   { label: "Women's Accessories", value: '24.0256' },
 ];
 
-export default () => (
-  <Fragment>
-    <div style={{ maxWidth: 160 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="success"
-            size="s"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-    <EuiSpacer size="m" />
-    <div style={{ maxWidth: 200 }}>
-      {data.map((item) => (
-        <>
-          <EuiProgress
-            valueText={true}
-            max={100}
-            color="primary"
-            size="m"
-            {...item}
-          />
-          <EuiSpacer size="s" />
-        </>
-      ))}
-    </div>
-  </Fragment>
-);
+export default () => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Show popover
+    </EuiButton>
+  );
+
+  return (
+    <Fragment>
+      <EuiPopover
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+      >
+        <EuiBadge>Text</EuiBadge>
+        <div style={{ maxWidth: 160 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="success"
+                size="s"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+        <EuiSpacer size="m" />
+        <div style={{ maxWidth: 200 }}>
+          {data.map((item) => (
+            <>
+              <EuiProgress
+                valueText={true}
+                max={100}
+                color="primary"
+                size="m"
+                {...item}
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </div>
+      </EuiPopover>
+    </Fragment>
+  );
+};

From e31348c8d99cae2464f6e7b888ee169345e5841c Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 6 Oct 2021 14:58:50 -0500
Subject: [PATCH 3/5] more visibility removal

---
 src/components/popover/_popover.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index ca875456fa4..66cc75f1ab2 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -38,16 +38,13 @@
   backface-visibility: hidden;
   pointer-events: none;
   opacity: 0; /* 2 */
-  transition: /* 2 */
-    opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
-    visibility $euiAnimSlightBounce $euiAnimSpeedSlow;
+  transition: opacity $euiAnimSlightBounce $euiAnimSpeedSlow; /* 2 */
 
   // Don't animate when using the attached mode like for inputs
   &:not(.euiPopover__panel-isAttached) {
     transform: translateY(0) translateX(0) translateZ(0); /* 2 */
     transition: /* 2 */
       opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
-      visibility $euiAnimSlightBounce $euiAnimSpeedSlow,
       transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms);
   }
 

From c412e18ee2b66f9c452ab5ab6726fb9e609692e5 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 11 Oct 2021 11:10:09 -0500
Subject: [PATCH 4/5] CL

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5594bd7f00a..937d6dd5613 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 - Added support for `ghost` and `text` `EuiIcon` colors on Elastic logos ([#5245](https://github.com/elastic/eui/pull/5245))
 - Added a default `data-test-subj` to `EuiErrorBoundary` ([#5232](https://github.com/elastic/eui/pull/5232))
 
+**Bug fixes**
+
+- Fixed content in `EuiPopover` from being inaccessable during the opening animation ([#5249](https://github.com/elastic/eui/pull/5249))
+
 ## [`39.0.0`](https://github.com/elastic/eui/tree/v39.0.0)
 
 - Added `maxWidth` prop to `EuiTour`, made `subtitle` optional, and fixed heading levels and footer background ([#5225](https://github.com/elastic/eui/pull/5225))

From 3470254a2358db5ef7e0a8852a1c860e9ea608ce Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 12 Oct 2021 12:58:56 -0500
Subject: [PATCH 5/5] Revert "revert me"

This reverts commit bf3a3630703d74726de5c13b0f7d469ca370a718.
---
 src-docs/src/views/progress/progress_chart.js | 95 +++++++------------
 1 file changed, 34 insertions(+), 61 deletions(-)

diff --git a/src-docs/src/views/progress/progress_chart.js b/src-docs/src/views/progress/progress_chart.js
index dcb15f21eca..16ac692236d 100644
--- a/src-docs/src/views/progress/progress_chart.js
+++ b/src-docs/src/views/progress/progress_chart.js
@@ -1,12 +1,6 @@
 import React, { Fragment } from 'react';
 
-import {
-  EuiBadge,
-  EuiPopover,
-  EuiButton,
-  EuiProgress,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiProgress, EuiSpacer } from '../../../../src/components';
 
 const data = [
   { label: 'Basic percentage', value: '80' },
@@ -19,57 +13,36 @@ const data = [
   { label: "Women's Accessories", value: '24.0256' },
 ];
 
-export default () => {
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
-
-  const onButtonClick = () =>
-    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
-  const closePopover = () => setIsPopoverOpen(false);
-
-  const button = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
-      Show popover
-    </EuiButton>
-  );
-
-  return (
-    <Fragment>
-      <EuiPopover
-        button={button}
-        isOpen={isPopoverOpen}
-        closePopover={closePopover}
-      >
-        <EuiBadge>Text</EuiBadge>
-        <div style={{ maxWidth: 160 }}>
-          {data.map((item) => (
-            <>
-              <EuiProgress
-                valueText={true}
-                max={100}
-                color="success"
-                size="s"
-                {...item}
-              />
-              <EuiSpacer size="s" />
-            </>
-          ))}
-        </div>
-        <EuiSpacer size="m" />
-        <div style={{ maxWidth: 200 }}>
-          {data.map((item) => (
-            <>
-              <EuiProgress
-                valueText={true}
-                max={100}
-                color="primary"
-                size="m"
-                {...item}
-              />
-              <EuiSpacer size="s" />
-            </>
-          ))}
-        </div>
-      </EuiPopover>
-    </Fragment>
-  );
-};
+export default () => (
+  <Fragment>
+    <div style={{ maxWidth: 160 }}>
+      {data.map((item) => (
+        <>
+          <EuiProgress
+            valueText={true}
+            max={100}
+            color="success"
+            size="s"
+            {...item}
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </div>
+    <EuiSpacer size="m" />
+    <div style={{ maxWidth: 200 }}>
+      {data.map((item) => (
+        <>
+          <EuiProgress
+            valueText={true}
+            max={100}
+            color="primary"
+            size="m"
+            {...item}
+          />
+          <EuiSpacer size="s" />
+        </>
+      ))}
+    </div>
+  </Fragment>
+);