test(ac): hide during animation

Author: thetaPC

core/src/components/action-sheet/action-sheet.tsx

@@ -201,10 +201,18 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   async present(): Promise<void> {
     const unlock = await this.lockController.lock();
 
+    // hide from screen readers before animating
+    // this is to avoid reading the action sheet content
+    // before it's fully visible
+    this.el.setAttribute('aria-hidden', 'true');
+
     await this.delegateController.attachViewToDom();
 
     await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
 
+    // show to screen readers after animation
+    this.el.removeAttribute('aria-hidden');
+
     unlock();
   }
 

core/src/components/action-sheet/animations/md.enter.ts

@@ -20,10 +20,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .keyframes([
-      { offset: 0, transform: 'translateY(100%)' },
-      { offset: 1, transform: 'translateY(0%)' }
-    ]);
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation
     .addElement(baseEl)

core/src/components/action-sheet/animations/md.leave.ts

@@ -14,10 +14,7 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
-    .keyframes([
-    { offset: 0, transform: 'translateY(0%)' },
-    { offset: 1, transform: 'translateY(100%)' }
-  ]);
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation
     .addElement(baseEl)