fix(overlays): blur focused element on hide if inside overlay

.changeset/fifty-chairs-bow.md

@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+When closing an overlays we check if the active element is/was within the overalys content. If so we blur it to make sure the focus returns to the body.

packages/overlays/src/OverlayController.js

@@ -847,6 +847,11 @@ export class OverlayController extends EventTargetShim {
     // Otherwise we assume the 'outside world' has, purposefully, taken over
     if (this.elementToFocusAfterHide) {
       this.elementToFocusAfterHide.focus();
+    } else if (
+      document.activeElement &&
+      this.__contentWrapperNode?.contains(document.activeElement)
+    ) {
+      /** @type {HTMLElement} */ (document.activeElement).blur();
     }
   }
 

packages/overlays/test/OverlayController.test.js

@@ -1,14 +1,6 @@
 /* eslint-disable no-new */
 import '@lion/core/test-helpers/keyboardEventShimIE.js';
-import {
-  aTimeout,
-  defineCE,
-  expect,
-  fixture,
-  html,
-  nextFrame,
-  unsafeStatic,
-} from '@open-wc/testing';
+import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { fixtureSync } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
 import { OverlayController } from '../src/OverlayController.js';
@@ -676,7 +668,6 @@ describe('OverlayController', () => {
         expect(document.activeElement).to.equal(input);
 
         await ctrl.hide();
-        await nextFrame(); // moving focus to body takes time?
         expect(document.activeElement).to.equal(document.body);
       });