fix: remove focus trap when overlay mode is reset to false (#9514)

Author: TatuLund

packages/app-layout/src/vaadin-app-layout-mixin.js

@@ -69,6 +69,7 @@ export const AppLayoutMixin = (superclass) =>
           readOnly: true,
           value: false,
           reflectToAttribute: true,
+          observer: '__overlayChanged',
           sync: true,
         },
 
@@ -247,6 +248,22 @@ export const AppLayoutMixin = (superclass) =>
       this.__setAriaExpanded();
     }
 
+    /**
+     * A callback for the `overlay` property observer.
+     *
+     * When layout resizes while in the overlay mode, drawer opened state
+     * is not changed, but focus trap needs to be removed.
+     *
+     * @param {boolean} overlay
+     * @param {boolean} oldOverlay
+     * @private
+     */
+    __overlayChanged(_overlay, oldOverlay) {
+      if (oldOverlay) {
+        this.__restoreFocus();
+      }
+    }
+
     /**
      * A callback for the `i18n` property observer.
      *
@@ -409,9 +426,7 @@ export const AppLayoutMixin = (superclass) =>
         return;
       }
 
-      this.__ariaModalController.close();
-      this.__focusTrapController.releaseFocus();
-      this.$.drawer.removeAttribute('tabindex');
+      this.__restoreFocus();
 
       // Move focus to the drawer toggle when closing the drawer.
       const toggle = this.querySelector('vaadin-drawer-toggle');
@@ -421,6 +436,13 @@ export const AppLayoutMixin = (superclass) =>
       }
     }
 
+    /** @private */
+    __restoreFocus() {
+      this.__ariaModalController.close();
+      this.__focusTrapController.releaseFocus();
+      this.$.drawer.removeAttribute('tabindex');
+    }
+
     /**
      * Closes the drawer on Escape press if it has been opened in the overlay mode.
      *

packages/app-layout/test/app-layout.test.js

@@ -458,6 +458,17 @@ describe('vaadin-app-layout', () => {
           await nextFrame();
           expect(spy.called).to.be.false;
         });
+
+        it('should remove drawer tabindex when it resizes from the overlay mode', async () => {
+          expect(drawer.hasAttribute('tabindex')).to.be.true;
+
+          // Force it to desktop layout
+          layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'false');
+          layout._updateOverlayMode();
+          await nextRender();
+
+          expect(drawer.hasAttribute('tabindex')).to.be.false;
+        });
       });
     });
   });