(menu): blur active element to prevent a11y reported issue

Author: joselrio

core/src/components/menu/menu.tsx

@@ -418,6 +418,9 @@ export class Menu implements ComponentInterface, MenuI {
    */
   @Method()
   setOpen(shouldOpen: boolean, animated = true, role?: string): Promise<boolean> {
+    // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
+    (document.activeElement as HTMLElement)?.blur();
+
     return menuController._setOpen(this, shouldOpen, animated, role);
   }
 

core/src/utils/overlays.ts

@@ -513,6 +513,7 @@ export const present = async <OverlayPresentOptions>(
     return;
   }
 
+  // Blur the active element to prevent it from being kept focused inside a container that will be set with aria-hidden="true"
   (document.activeElement as HTMLElement)?.blur();
 
   /**
@@ -650,6 +651,7 @@ export const dismiss = async <OverlayDismissOptions>(
     return false;
   }
 
+  // Blur the active element to prevent it from being kept focused inside the overlay, since it will be removed
   (document.activeElement as HTMLElement)?.blur();
 
   const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];