@vaadin/app-layout 24.1.0 → 24.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "24.1.0",
+  "version": "24.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,22 +36,22 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.0",
-    "@vaadin/button": "~24.1.0",
-    "@vaadin/component-base": "~24.1.0",
-    "@vaadin/vaadin-lumo-styles": "~24.1.0",
-    "@vaadin/vaadin-material-styles": "~24.1.0",
-    "@vaadin/vaadin-themable-mixin": "~24.1.0"
+    "@vaadin/a11y-base": "~24.1.1",
+    "@vaadin/button": "~24.1.1",
+    "@vaadin/component-base": "~24.1.1",
+    "@vaadin/vaadin-lumo-styles": "~24.1.1",
+    "@vaadin/vaadin-material-styles": "~24.1.1",
+    "@vaadin/vaadin-themable-mixin": "~24.1.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/tabs": "~24.1.0",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/tabs": "~24.1.1",
+    "@vaadin/testing-helpers": "^0.4.2",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7fdfe7d5ceb4c305a894f8e9dc11e5b7d04cf1f2"
+  "gitHead": "c3a3d904885bd37ebb07a84b09617a340b4fab7e"
 }

package/src/vaadin-app-layout.js

@@ -8,6 +8,7 @@ import './detect-ios-navbar.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender, beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -401,6 +402,11 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
     this.__trapFocusInDrawer = this.__trapFocusInDrawer.bind(this);
     this.__releaseFocusFromDrawer = this.__releaseFocusFromDrawer.bind(this);
+
+    // Hide all the elements except the drawer toggle and drawer content
+    this.__ariaModalController = new AriaModalController(this, () => [
+      ...this.querySelectorAll('vaadin-drawer-toggle, [slot="drawer"]'),
+    ]);
     this.__focusTrapController = new FocusTrapController(this);
   }
 
@@ -661,6 +667,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     }
 
     this.$.drawer.setAttribute('tabindex', '0');
+
+    this.__ariaModalController.showModal();
     this.__focusTrapController.trapFocus(this.$.drawer);
   }
 
@@ -675,6 +683,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
       return;
     }
 
+    this.__ariaModalController.close();
     this.__focusTrapController.releaseFocus();
     this.$.drawer.removeAttribute('tabindex');
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.1.0",
+  "version": "24.1.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.1.0",
+  "version": "24.1.1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {