[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 bf3a363.

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))

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;
   }
 

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 {