refactor(overlays): add RAF

Author: thetaPC

core/src/utils/overlays.ts

@@ -114,7 +114,6 @@ export const createOverlay = <T extends HTMLIonOverlayElement>(
     return window.customElements.whenDefined(tagName).then(() => {
       const element = document.createElement(tagName) as HTMLIonOverlayElement;
       element.classList.add('overlay-hidden');
-      element.setAttribute('aria-hidden', 'true');
 
       /**
        * Convert the passed in overlay options into props
@@ -745,7 +744,6 @@ const overlayAnimation = async (
 ): Promise<boolean> => {
   // Make overlay visible in case it's hidden
   baseEl.classList.remove('overlay-hidden');
-  baseEl.removeAttribute('aria-hidden');
 
   const aniRoot = overlay.el;
   const animation = animationBuilder(aniRoot, opts);
@@ -755,6 +753,9 @@ const overlayAnimation = async (
   }
 
   animation.beforeAddWrite(() => {
+    console.log('beforeAddWrite');
+    baseEl.setAttribute('aria-hidden', 'true');
+
     if (overlay.keyboardClose) {
       const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
       if (activeElement?.matches('input,ion-input, ion-textarea')) {
@@ -763,6 +764,13 @@ const overlayAnimation = async (
     }
   });
 
+  animation.afterAddWrite(() => {
+    requestAnimationFrame(() => {
+      baseEl.removeAttribute('aria-hidden');
+      console.log('afterAddWrite');
+    });
+  });
+
   const activeAni = activeAnimations.get(overlay) || [];
   activeAnimations.set(overlay, [...activeAni, animation]);