@vaadin/app-layout 23.0.0-alpha1 → 23.0.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,17 +34,17 @@
   "dependencies": {
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-alpha1",
-    "@vaadin/component-base": "23.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
+    "@vaadin/button": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/tabs": "23.0.0-alpha1",
+    "@vaadin/tabs": "23.0.0-alpha2",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

package/src/detect-ios-navbar.js

@@ -5,7 +5,7 @@
  */
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 
-export const _detectIosNavbar = function () {
+export function _detectIosNavbar() {
   /* c8 ignore next 11 */
   if (isIOS) {
     const innerHeight = window.innerHeight;
@@ -18,7 +18,7 @@ export const _detectIosNavbar = function () {
       document.documentElement.style.setProperty('--vaadin-viewport-offset-bottom', '');
     }
   }
-};
+}
 
 _detectIosNavbar();
 window.addEventListener('resize', _detectIosNavbar);

package/src/safe-area-inset.js

@@ -4,19 +4,10 @@ $_documentContainer.innerHTML = `
   <style>
     /* Use units so that the values can be used in calc() */
     html {
-      --safe-area-inset-top: constant(safe-area-inset-top, 0px);
-      --safe-area-inset-right: constant(safe-area-inset-right, 0px);
-      --safe-area-inset-bottom: constant(safe-area-inset-bottom, 0px);
-      --safe-area-inset-left: constant(safe-area-inset-left, 0px);
-    }
-
-    @supports (padding-left: env(safe-area-inset-left)) {
-      html {
-        --safe-area-inset-top: env(safe-area-inset-top, 0px);
-        --safe-area-inset-right: env(safe-area-inset-right, 0px);
-        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
-        --safe-area-inset-left: env(safe-area-inset-left, 0px);
-      }
+      --safe-area-inset-top: env(safe-area-inset-top, 0px);
+      --safe-area-inset-right: env(safe-area-inset-right, 0px);
+      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+      --safe-area-inset-left: env(safe-area-inset-left, 0px);
     }
   </style>
 `;

package/src/vaadin-app-layout.d.ts

@@ -3,9 +3,14 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+export interface AppLayoutI18n {
+  drawer: string;
+}
+
 /**
  * Fired when the `drawerOpened` property changes.
  */
@@ -72,7 +77,6 @@ export type AppLayoutEventMap = HTMLElementEventMap & AppLayoutCustomEventMap;
  * --------------|---------------------------------------------------------|
  * `navbar`      | Container for the navigation bar
  * `drawer`      | Container for the drawer area
- * `content`     | Container for page content.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
@@ -119,7 +123,29 @@ export type AppLayoutEventMap = HTMLElementEventMap & AppLayoutCustomEventMap;
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
  * @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
  */
-declare class AppLayout extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))) {
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * `i18n` object with a custom one.
+   *
+   * To update individual properties, extend the existing i18n object as follows:
+   * ```js
+   * appLayout.i18n = {
+   *   ...appLayout.i18n,
+   *   drawer: 'Drawer'
+   * }
+   * ```
+   *
+   * The object has the following structure and default values:
+   * ```
+   * {
+   *   drawer: 'Drawer'
+   * }
+   * ```
+   */
+  i18n: AppLayoutI18n;
+
   /**
    * Defines whether navbar or drawer will come first visually.
    * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.

package/src/vaadin-app-layout.js

@@ -10,9 +10,15 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusTrapController } from '@vaadin/component-base/src/focus-trap-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+/**
+ * @typedef {import('./vaadin-app-layout.js').AppLayoutI18n} AppLayoutI18n
+ */
+
 /**
  * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
  *
@@ -54,7 +60,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * --------------|---------------------------------------------------------|
  * `navbar`      | Container for the navigation bar
  * `drawer`      | Container for the drawer area
- * `content`     | Container for page content.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
@@ -104,8 +109,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
+ * @mixes ControllerMixin
  */
-class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement))) {
+class AppLayout extends ElementMixin(
+  ThemableMixin(ControllerMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))
+) {
   static get template() {
     return html`
       <style>
@@ -148,7 +156,6 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
 
         :host(:not([no-scroll])) [content] {
           overflow: auto;
-          -webkit-overflow-scrolling: touch;
         }
 
         [content] {
@@ -201,16 +208,20 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
           right: auto;
           bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
           left: var(--vaadin-app-layout-navbar-offset-left, 0);
-          transition: transform var(--vaadin-app-layout-transition);
+          transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
           transform: translateX(-100%);
           max-width: 90%;
           width: 16em;
           box-sizing: border-box;
           padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
           outline: none;
+          /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
+          visibility: hidden;
         }
 
         :host([drawer-opened]) [part='drawer'] {
+          /* The drawer should be accessible by the tabbing navigation when it is opened. */
+          visibility: visible;
           transform: translateX(0%);
           touch-action: manipulation;
         }
@@ -287,7 +298,7 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
         <slot name="navbar"></slot>
       </div>
       <div part="backdrop" on-click="_close" on-touchstart="_close"></div>
-      <div part="drawer" id="drawer">
+      <div part="drawer" id="drawer" on-keydown="__onDrawerKeyDown">
         <slot name="drawer" id="drawerSlot"></slot>
       </div>
       <div content>
@@ -306,6 +317,39 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
 
   static get properties() {
     return {
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * `i18n` object with a custom one.
+       *
+       * To update individual properties, extend the existing i18n object as follows:
+       * ```js
+       * appLayout.i18n = {
+       *   ...appLayout.i18n,
+       *   drawer: 'Drawer'
+       * }
+       * ```
+       *
+       * The object has the following structure and default values:
+       * ```
+       * {
+       *   drawer: 'Drawer'
+       * }
+       * ```
+       *
+       * @type {AppLayoutI18n}
+       * @default {English/US}
+       */
+      i18n: {
+        type: Object,
+        observer: '__i18nChanged',
+        value: () => {
+          return {
+            drawer: 'Drawer'
+          };
+        }
+      },
+
       /**
        * Defines whether navbar or drawer will come first visually.
        * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
@@ -318,7 +362,7 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
         value: 'navbar',
         notify: true,
         reflectToAttribute: true,
-        observer: '_primarySectionObserver'
+        observer: '__primarySectionChanged'
       },
 
       /**
@@ -334,7 +378,7 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
         notify: true,
         value: true,
         reflectToAttribute: true,
-        observer: '_drawerOpenedObserver'
+        observer: '__drawerOpenedChanged'
       },
 
       /**
@@ -371,6 +415,9 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
     this.__boundResizeListener = this._resize.bind(this);
     this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
     this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
+    this.__trapFocusInDrawer = this.__trapFocusInDrawer.bind(this);
+    this.__releaseFocusFromDrawer = this.__releaseFocusFromDrawer.bind(this);
+    this.__focusTrapController = new FocusTrapController(this);
   }
 
   /** @protected */
@@ -404,6 +451,12 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
     window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+    this.addController(this.__focusTrapController);
+  }
+
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -423,31 +476,59 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
     window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
   }
 
-  /** @private */
-  _primarySectionObserver(value) {
-    const isValid = ['navbar', 'drawer'].indexOf(value) !== -1;
+  /**
+   * A callback for the `primarySection` property observer.
+   *
+   * Ensures the property is set to its default value `navbar`
+   * whenever the new value is not one of the valid values: `navbar`, `drawer`.
+   *
+   * @param {string} value
+   * @private
+   */
+  __primarySectionChanged(value) {
+    const isValid = ['navbar', 'drawer'].includes(value);
     if (!isValid) {
       this.set('primarySection', 'navbar');
     }
   }
 
-  /** @private */
-  _drawerOpenedObserver() {
-    const drawer = this.$.drawer;
-
-    drawer.removeAttribute('tabindex');
-
+  /**
+   * A callback for the `drawerOpened` property observer.
+   *
+   * When the drawer opens, the method ensures the drawer has a proper height and sets focus on it.
+   * As long as the drawer is open, the focus is trapped within the drawer.
+   *
+   * When the drawer closes, the method releases focus from the drawer, setting focus on the drawer toggle.
+   *
+   * @param {boolean} drawerOpened
+   * @param {boolean} oldDrawerOpened
+   * @private
+   */
+  __drawerOpenedChanged(drawerOpened, oldDrawerOpened) {
     if (this.overlay) {
-      if (this.drawerOpened) {
-        drawer.setAttribute('tabindex', 0);
-        drawer.focus();
+      if (drawerOpened) {
         this._updateDrawerHeight();
+        this.__trapFocusInDrawer();
+      } else if (oldDrawerOpened) {
+        this.__releaseFocusFromDrawer();
       }
     }
 
     this.notifyResize();
   }
 
+  /**
+   * A callback for the `i18n` property observer.
+   *
+   * The method ensures the drawer has ARIA attributes updated
+   * once the `i18n` property changes.
+   *
+   * @private
+   */
+  __i18nChanged() {
+    this.__updateDrawerAriaAttributes();
+  }
+
   /** @protected */
   _afterFirstRender() {
     this._blockAnimationUntilAfterNextRender();
@@ -515,8 +596,7 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
 
   /** @protected */
   _updateOverlayMode() {
-    const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
-    const drawer = this.$.drawer;
+    const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
 
     if (!this.overlay && overlay) {
       // Changed from not overlay to overlay
@@ -526,28 +606,109 @@ class AppLayout extends ElementMixin(ThemableMixin(mixinBehaviors([IronResizable
 
     this._setOverlay(overlay);
 
+    if (!this.overlay && this._drawerStateSaved) {
+      this.drawerOpened = this._drawerStateSaved;
+      this._drawerStateSaved = null;
+    }
+
+    this._updateDrawerHeight();
+    this.__updateDrawerAriaAttributes();
+
+    if (this.overlay !== overlay) {
+      this.notifyResize();
+    }
+  }
+
+  /**
+   * Updates ARIA attributes on the drawer depending on the drawer mode.
+   *
+   * - In the overlay mode, the method marks the drawer with ARIA attributes as a dialog
+   * labelled with the `i18n.drawer` property.
+   * - In the normal mode, the method removes the ARIA attributes that has been set for the overlay mode.
+   *
+   * @private
+   */
+  __updateDrawerAriaAttributes() {
+    const drawer = this.$.drawer;
     if (this.overlay) {
       drawer.setAttribute('role', 'dialog');
       drawer.setAttribute('aria-modal', 'true');
-      drawer.setAttribute('aria-label', 'drawer');
+      drawer.setAttribute('aria-label', this.i18n.drawer);
     } else {
-      if (this._drawerStateSaved) {
-        this.drawerOpened = this._drawerStateSaved;
-        this._drawerStateSaved = null;
-      }
-
       drawer.removeAttribute('role');
       drawer.removeAttribute('aria-modal');
       drawer.removeAttribute('aria-label');
     }
+  }
 
-    this._updateDrawerHeight();
+  /**
+   * Returns a promise that resolves when the drawer opening/closing CSS transition ends.
+   *
+   * The method relies on the `--vaadin-app-layout-transition` CSS variable to detect whether
+   * the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `none`,
+   * the promise resolves immediately.
+   *
+   * @return {Promise}
+   * @private
+   */
+  __drawerTransitionComplete() {
+    return new Promise((resolve) => {
+      if (this._getCustomPropertyValue('--vaadin-app-layout-transition') === 'none') {
+        resolve();
+        return;
+      }
 
-    if (this.overlay !== overlay) {
-      this.notifyResize();
+      this.$.drawer.addEventListener('transitionend', resolve, { once: true });
+    });
+  }
+
+  /** @private */
+  async __trapFocusInDrawer() {
+    // Wait for the drawer CSS transition before focusing the drawer
+    // in order for VoiceOver to have a proper outline.
+    await this.__drawerTransitionComplete();
+
+    if (!this.drawerOpened) {
+      // The drawer has been closed during the CSS transition.
+      return;
+    }
+
+    this.$.drawer.setAttribute('tabindex', '0');
+    this.__focusTrapController.trapFocus(this.$.drawer);
+  }
+
+  /** @private */
+  async __releaseFocusFromDrawer() {
+    // Wait for the drawer CSS transition in order to restore focus to the toggle
+    // only after `visibility` becomes `hidden`, that is, the drawer becomes inaccessible by the tabbing navigation.
+    await this.__drawerTransitionComplete();
+
+    if (this.drawerOpened) {
+      // The drawer has been opened during the CSS transition.
+      return;
     }
 
-    // TODO(jouni): ARIA attributes. The drawer should act similar to a modal dialog when in ”overlay” mode
+    this.__focusTrapController.releaseFocus();
+    this.$.drawer.removeAttribute('tabindex');
+
+    // Move focus to the drawer toggle when closing the drawer.
+    const toggle = this.querySelector('vaadin-drawer-toggle');
+    if (toggle) {
+      toggle.focus();
+      toggle.setAttribute('focus-ring', 'focus');
+    }
+  }
+
+  /**
+   * Closes the drawer on Escape press if it has been opened in the overlay mode.
+   *
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  __onDrawerKeyDown(event) {
+    if (event.key === 'Escape' && this.overlay) {
+      this.drawerOpened = false;
+    }
   }
 
   /** @private */