From d3f0abfda70fc92fc8df39e3924f32fcf9918298 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 12 Oct 2021 13:26:15 -0500
Subject: [PATCH] [EuiPopover] Allow content to be accessible during opening
 animation (#5249)

* remove visibiliy:hidden; rely on opacity

* revert me

* more visibility removal

* CL

* Revert "revert me"

This reverts commit bf3a3630703d74726de5c13b0f7d469ca370a718.
---
 CHANGELOG.md                         | 4 ++++
 src/components/popover/_popover.scss | 7 +------
 src/components/popover/popover.tsx   | 4 ++--
 3 files changed, 7 insertions(+), 8 deletions(-)

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))
diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index 188bccdab17..66cc75f1ab2 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -38,23 +38,18 @@
   backface-visibility: hidden;
   pointer-events: none;
   opacity: 0; /* 2 */
-  visibility: hidden; /* 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);
   }
 
   &.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 {