fix: respect focusVisible option in FocusRestorationController (#10158) (#10163)

vaadin-bot · web-padawan · web-flow · commit 3e7d14443f2f · 2025-09-12T15:44:57.000+03:00
Co-authored-by: Serhii Kulykov &lt;iamkulykov@gmail.com&gt;
diff --git a/packages/a11y-base/src/focus-restoration-controller.js b/packages/a11y-base/src/focus-restoration-controller.js
@@ -29,16 +29,19 @@ export class FocusRestorationController {
       return;
     }
 
-    const preventScroll = options ? options.preventScroll : false;
+    const focusOptions = {
+      preventScroll: options ? options.preventScroll : false,
+      focusVisible: options ? options.focusVisible : false,
+    };
 
     if (getDeepActiveElement() === document.body) {
       // In Firefox and Safari, focusing the node synchronously
       // doesn't work as expected when the overlay is closing on outside click.
       // These browsers force focus to move to the body element and retain it
       // there until the next event loop iteration.
-      setTimeout(() => focusNode.focus({ preventScroll }));
+      setTimeout(() => focusNode.focus(focusOptions));
     } else {
-      focusNode.focus({ preventScroll });
+      focusNode.focus(focusOptions);
     }
 
     this.focusNode = null;
diff --git a/packages/a11y-base/test/focus-restoration-controller.test.js b/packages/a11y-base/test/focus-restoration-controller.test.js
@@ -60,43 +60,87 @@ describe('focus-restoration-controller', () => {
     expect(getDeepActiveElement()).to.equal(button2);
   });
 
-  it('should not prevent scroll when restoring focus synchronously by default', () => {
-    button1.focus();
-    const spy = sinon.spy(button2, 'focus');
-    controller.saveFocus(button2);
-    controller.restoreFocus();
-    expect(spy).to.be.calledOnce;
-    expect(spy.firstCall.args[0]).to.eql({ preventScroll: false });
-  });
+  describe('preventScroll', () => {
+    it('should not prevent scroll when restoring focus synchronously by default', () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      controller.restoreFocus();
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: false });
+    });
 
-  it('should prevent scroll when restoring focus synchronously with preventScroll', () => {
-    button1.focus();
-    const spy = sinon.spy(button2, 'focus');
-    controller.saveFocus(button2);
-    controller.restoreFocus({ preventScroll: true });
-    expect(spy).to.be.calledOnce;
-    expect(spy.firstCall.args[0]).to.eql({ preventScroll: true });
-  });
+    it('should prevent scroll when restoring focus synchronously with preventScroll', () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      controller.restoreFocus({ preventScroll: true });
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: true });
+    });
 
-  it('should not prevent scroll when restoring focus asynchronously by default', async () => {
-    button1.focus();
-    const spy = sinon.spy(button2, 'focus');
-    controller.saveFocus(button2);
-    outsideClick();
-    controller.restoreFocus();
-    await aTimeout(0);
-    expect(spy).to.be.calledOnce;
-    expect(spy.firstCall.args[0]).to.eql({ preventScroll: false });
+    it('should not prevent scroll when restoring focus asynchronously by default', async () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      outsideClick();
+      controller.restoreFocus();
+      await aTimeout(0);
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: false });
+    });
+
+    it('should prevent scroll when restoring focus asynchronously with preventScroll', async () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      outsideClick();
+      controller.restoreFocus({ preventScroll: true });
+      await aTimeout(0);
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: true });
+    });
   });
 
-  it('should prevent scroll when restoring focus asynchronously with preventScroll', async () => {
-    button1.focus();
-    const spy = sinon.spy(button2, 'focus');
-    controller.saveFocus(button2);
-    outsideClick();
-    controller.restoreFocus({ preventScroll: true });
-    await aTimeout(0);
-    expect(spy).to.be.calledOnce;
-    expect(spy.firstCall.args[0]).to.eql({ preventScroll: true });
+  describe('focusVisible', () => {
+    it('should not set focusVisible when restoring focus synchronously by default', () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      controller.restoreFocus();
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: false });
+    });
+
+    it('should set focusVisible when restoring focus synchronously with focusVisible', () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      controller.restoreFocus({ focusVisible: true });
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: true });
+    });
+
+    it('should not set focusVisible when restoring focus asynchronously by default', async () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      outsideClick();
+      controller.restoreFocus();
+      await aTimeout(0);
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: false });
+    });
+
+    it('should set focusVisible when restoring focus asynchronously with focusVisible', async () => {
+      button1.focus();
+      const spy = sinon.spy(button2, 'focus');
+      controller.saveFocus(button2);
+      outsideClick();
+      controller.restoreFocus({ focusVisible: true });
+      await aTimeout(0);
+      expect(spy).to.be.calledOnce;
+      expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: true });
+    });
   });
 });
diff --git a/packages/overlay/src/vaadin-overlay-focus-mixin.js b/packages/overlay/src/vaadin-overlay-focus-mixin.js
@@ -76,8 +76,9 @@ export const OverlayFocusMixin = (superClass) =>
       }
 
       if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
-        const preventScroll = !isKeyboardActive();
-        this.__focusRestorationController.restoreFocus({ preventScroll });
+        const focusVisible = isKeyboardActive();
+        const preventScroll = !focusVisible;
+        this.__focusRestorationController.restoreFocus({ preventScroll, focusVisible });
       }
     }
 
diff --git a/packages/overlay/test/restore-focus.test.js b/packages/overlay/test/restore-focus.test.js
@@ -143,7 +143,7 @@ describe('restore focus', () => {
           mousedown(document.body);
           overlay.opened = false;
           expect(spy).to.be.calledOnce;
-          expect(spy.firstCall.args[0]).to.eql({ preventScroll: true });
+          expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: true });
         });
 
         it('should not prevent scroll when restoring focus on close after keydown', async () => {
@@ -154,7 +154,31 @@ describe('restore focus', () => {
           escKeyDown(document.body);
           overlay.opened = false;
           expect(spy).to.be.calledOnce;
-          expect(spy.firstCall.args[0]).to.eql({ preventScroll: false });
+          expect(spy.firstCall.args[0]).to.deep.include({ preventScroll: false });
+        });
+      });
+
+      describe('focusVisible', () => {
+        it('should set focusVisible: false when restoring focus on close after mousedown', async () => {
+          focusable.focus();
+          overlay.opened = true;
+          await oneEvent(overlay, 'vaadin-overlay-open');
+          const spy = sinon.spy(focusable, 'focus');
+          mousedown(document.body);
+          overlay.opened = false;
+          expect(spy).to.be.calledOnce;
+          expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: false });
+        });
+
+        it('should set focusVisible: true when restoring focus on close after keydown', async () => {
+          focusable.focus();
+          overlay.opened = true;
+          await oneEvent(overlay, 'vaadin-overlay-open');
+          const spy = sinon.spy(focusable, 'focus');
+          escKeyDown(document.body);
+          overlay.opened = false;
+          expect(spy).to.be.calledOnce;
+          expect(spy.firstCall.args[0]).to.deep.include({ focusVisible: true });
         });
       });
     });
