@dile/ui 3.16.1 → 3.17.0

package/components/modal/modal.spec.js

@@ -43,4 +43,208 @@ describe('dile-modal', () => {
     expect(el.opened).toBe(false);
     expect(closed).toBe(true);
   });
+
+  it('releases the background layer immediately when the animation duration is 0s', async () => {
+    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0s">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    el.close();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    expect(getComputedStyle(section).display).toBe('none');
+  });
+
+  it('releases the background layer after the close animation even without transitionend', async () => {
+    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0.1s">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    el.close();
+    await el.updateComplete;
+    const section = el.shadowRoot.querySelector('section');
+    expect(getComputedStyle(section).pointerEvents).toBe('none');
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await el.updateComplete;
+    expect(getComputedStyle(section).display).toBe('none');
+  });
+
+  it('ignores transitionend events coming from inner elements', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+    el.close();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    const content = el.shadowRoot.querySelector('.content');
+    content.dispatchEvent(new TransitionEvent('transitionend', { bubbles: true, propertyName: 'opacity' }));
+    await el.updateComplete;
+
+    expect(section.classList.contains('opened')).toBe(true);
+  });
+
+  it('dispatches dile-modal-closed and animates when the opened property is set to false', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.opened = true;
+    await el.updateComplete;
+
+    let closed = false;
+    el.addEventListener('dile-modal-closed', () => { closed = true; });
+
+    el.opened = false;
+    await el.updateComplete;
+
+    expect(closed).toBe(true);
+    expect(el.shadowRoot.querySelector('section').classList.contains('opened')).toBe(true);
+  });
+
+  it('opens and closes through the opened attribute', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    let closed = false;
+    el.addEventListener('dile-modal-closed', () => { closed = true; });
+
+    el.setAttribute('opened', '');
+    await el.updateComplete;
+    expect(el.opened).toBe(true);
+
+    el.removeAttribute('opened');
+    await el.updateComplete;
+    expect(el.opened).toBe(false);
+    expect(closed).toBe(true);
+  });
+
+  it('reflects the opened property to the attribute', async () => {
+    const el = await renderModal('<dile-modal opened>Modal content</dile-modal>');
+    el.close();
+    await el.updateComplete;
+    expect(el.hasAttribute('opened')).toBe(false);
+
+    el.setAttribute('opened', '');
+    await el.updateComplete;
+    expect(el.opened).toBe(true);
+  });
+
+  it('closes a blocking modal when Esc is pressed', async () => {
+    const el = await renderModal('<dile-modal blocking>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await el.updateComplete;
+
+    expect(el.opened).toBe(false);
+  });
+
+  it('closes only the topmost modal when Esc is pressed', async () => {
+    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
+    const first = document.getElementById('first');
+    const second = document.getElementById('second');
+    await first.updateComplete;
+    await second.updateComplete;
+    first.open();
+    second.open();
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(second.opened).toBe(false);
+    expect(first.opened).toBe(true);
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(first.opened).toBe(false);
+  });
+
+  it('exposes the content as an accessible modal dialog', async () => {
+    const el = await renderModal('<dile-modal label="Settings">Modal content</dile-modal>');
+    const dialog = el.shadowRoot.querySelector('[role="dialog"]');
+
+    expect(dialog).not.toBeNull();
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.getAttribute('aria-label')).toBe('Settings');
+  });
+
+  it('renders the close icon as an accessible button', async () => {
+    const el = await renderModal('<dile-modal showCloseIcon closeLabel="Cerrar">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    const button = el.shadowRoot.querySelector('button.closebutton');
+    expect(button.getAttribute('aria-label')).toBe('Cerrar');
+
+    button.click();
+    expect(el.opened).toBe(false);
+  });
+
+  it('moves the focus into the modal and restores it on close', async () => {
+    document.body.innerHTML = '<button id="opener">Open</button><dile-modal>Modal content</dile-modal>';
+    const opener = document.getElementById('opener');
+    const el = document.querySelector('dile-modal');
+    await el.updateComplete;
+
+    opener.focus();
+    el.open();
+    await el.updateComplete;
+    expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.content'));
+
+    el.close();
+    expect(document.activeElement).toBe(opener);
+  });
+
+  it('keeps the focus on content focused by the user when opening', async () => {
+    const el = await renderModal('<dile-modal><input id="field"></dile-modal>');
+    const field = document.getElementById('field');
+
+    el.open();
+    await el.updateComplete;
+    field.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(document.activeElement).toBe(field);
+  });
+
+  it('dispatches dile-modal-opened when opened', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    let opened = false;
+    el.addEventListener('dile-modal-opened', () => { opened = true; });
+
+    el.open();
+    expect(opened).toBe(true);
+  });
+
+  it('becomes opaque after opening', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    await expect.poll(() => section.classList.contains('opaque')).toBe(true);
+  });
+
+  it('locks the page scroll while any modal is opened', async () => {
+    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
+    const first = document.getElementById('first');
+    const second = document.getElementById('second');
+    await second.updateComplete;
+    const root = document.documentElement;
+
+    first.open();
+    second.open();
+    expect(root.style.overflow).toBe('hidden');
+
+    second.close();
+    expect(root.style.overflow).toBe('hidden');
+
+    first.close();
+    expect(root.style.overflow).toBe('');
+  });
+
+  it('unlocks the page scroll when an opened modal is removed from the document', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    expect(document.documentElement.style.overflow).toBe('hidden');
+
+    el.remove();
+    expect(document.documentElement.style.overflow).toBe('');
+  });
 });

package/components/modal/src/DileModal.js

@@ -1,33 +1,72 @@
 import { LitElement, html, css } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import '../../icon/icon.js';
 import { closeIcon } from '@dile/icons/index.js'
 import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js'
 
+// Opened modals, in opening order. The last one is the topmost modal.
+const openedModals = [];
+// Escape keydown events already handled by a modal.
+const handledEscEvents = new WeakSet();
+// Inline styles of the document before locking the page scroll.
+let scrollLockBackup = null;
+
+// Locks the page scroll while any modal is opened.
+function updateScrollLock() {
+  const root = document.documentElement;
+  if (openedModals.length && !scrollLockBackup) {
+    const scrollbarWidth = window.innerWidth - root.clientWidth;
+    scrollLockBackup = {
+      overflow: root.style.overflow,
+      paddingRight: root.style.paddingRight,
+    };
+    root.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      // Avoids the layout shift caused by the scrollbar disappearing.
+      const paddingRight = parseFloat(getComputedStyle(root).paddingRight) || 0;
+      root.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
+    }
+  } else if (!openedModals.length && scrollLockBackup) {
+    root.style.overflow = scrollLockBackup.overflow;
+    root.style.paddingRight = scrollLockBackup.paddingRight;
+    scrollLockBackup = null;
+  }
+}
+
 export class DileModal extends DileCloseOnEscPressed(LitElement) {
   static get properties() {
     return {
-      _toChange: { type: Boolean },
+      _toChange: { state: true },
       /**
        * If true the modal box is in opened status.
        */
-      opened: { type: Boolean },
+      opened: { type: Boolean, reflect: true, noAccessor: true },
       /**
        * If true the modal box displays a close icon
        */
       showCloseIcon: { type: Boolean },
       /**
-       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
+       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box does not close.
        */
       blocking: { type: Boolean },
+      /**
+       * Accessible name of the modal box, announced by screen readers when it opens.
+       */
+      label: { type: String },
+      /**
+       * Accessible label of the close icon button.
+       */
+      closeLabel: { type: String },
     };
   }
 
   constructor() {
     super();
     this._toChange = false;
-    this.opened = false;
+    this._opened = false;
     this.showCloseIcon = false;
     this.blocking = false;
+    this.closeLabel = 'Close';
   }
 
   static get styles() {
@@ -52,11 +91,10 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
           left: 0;
           top: 0;
           height: 100vh;
+          height: 100dvh;
           width: 100vw;
           display: none;
           transition: opacity var(--dile-modal-animation-duration, 0.3s) ease-in;
-          -webkit-transition: opacity var(--dile-modal-animation-duration, 0.3s)
-            ease-in;
           align-items: center;
           justify-content: center;
           z-index: var(--dile-modal-z-index, 100);
@@ -87,13 +125,13 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         }
         article {
           overflow: auto;
-          max-height: 100%;
           padding-right: var(--dile-modal-content-padding, 1em);
           height: var(--dile-modal-height, auto);
           max-height: var(--dile-modal-max-height, 90vh);
         }
         .transparent {
           opacity: 0;
+          pointer-events: none;
         }
         .opaque {
           opacity: 1;
@@ -102,12 +140,20 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         .opened {
           display: flex !important;
         }
-        dile-icon {
+        .content:focus {
+          outline: none;
+        }
+        .closebutton {
           position: absolute;
-          display: inline-block;
+          display: inline-flex;
           top: var(--dile-modal-close-icon-top, 5px);
           right: var(--dile-modal-close-icon-right, 18px);
           z-index: 1002;
+          padding: 0;
+          margin: 0;
+          border: none;
+          background: none;
+          color: inherit;
           cursor: var(--dile-modal-close-icon-cursor, pointer);
         }
         .contentIconSeparation {
@@ -125,9 +171,17 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         @transitionend="${this.animationEnd}"
         id="backgroundmodal"
       >
-        <div class="content" @click="${this.contentClick}">
+        <div
+          class="content"
+          role="dialog"
+          aria-modal="true"
+          aria-label="${ifDefined(this.label)}"
+          tabindex="-1"
+        >
           ${this.showCloseIcon
-            ? html`<dile-icon .icon="${closeIcon}" @click="${this.close}" class="closeicon"></dile-icon>`
+            ? html`<button type="button" class="closebutton" aria-label="${this.closeLabel}" @click="${this.close}">
+                <dile-icon .icon="${closeIcon}" class="closeicon"></dile-icon>
+              </button>`
             : ""}
           <article class="${this.showCloseIcon ? "contentIconSeparation" : ""}">
             <slot></slot>
@@ -153,12 +207,29 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
     return '';
   }
 
+  get opened() {
+    return this._opened;
+  }
+
+  // The opened property can be changed by open() / close(), or directly
+  // by the property or the attribute. All ways run the same transitions.
+  set opened(value) {
+    const oldValue = this._opened;
+    value = Boolean(value);
+    if (value === oldValue) {
+      return;
+    }
+    this._opened = value;
+    this.requestUpdate('opened', oldValue);
+    if (value) {
+      this._startOpening();
+    } else {
+      this._startClosing();
+    }
+  }
+
   open() {
     this.opened = true;
-    this._toChange = true;
-    setTimeout(() => {
-      this._toChange = false;
-    }, 50);
   }
 
   _backgroundModalClick(e) {
@@ -175,22 +246,166 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
   }
 
   close() {
-    if(this.opened) {
-      this.opened = false;
-      this._toChange = true;
-      this.dispatchEvent(
-        new CustomEvent("dile-modal-closed", {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        })
-      );
+    this.opened = false;
+  }
+
+  _startOpening() {
+    this._clearCloseTimeout();
+    this._removeFromOpenedModals();
+    if (this.isConnected) {
+      this._addToOpenedModals();
+    }
+    this._toChange = true;
+    this._cancelOpenFrame();
+    // Waits for the layer to be painted with opacity 0, so the fade-in transition runs.
+    this.updateComplete.then(() => {
+      this._openFrame = requestAnimationFrame(() => {
+        this._openFrame = requestAnimationFrame(() => {
+          this._openFrame = null;
+          if (this.opened) {
+            this._toChange = false;
+          }
+        });
+      });
+    });
+    this._previousFocus = this._getDeepActiveElement();
+    this.updateComplete.then(() => this._focusContent());
+    this.dispatchEvent(
+      new CustomEvent("dile-modal-opened", {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      })
+    );
+  }
+
+  _cancelOpenFrame() {
+    if (this._openFrame) {
+      cancelAnimationFrame(this._openFrame);
+      this._openFrame = null;
+    }
+  }
+
+  // Moves the focus inside the modal, unless the content already took it.
+  _focusContent() {
+    if (!this.opened || this.matches(':focus-within')) {
+      return;
+    }
+    this.shadowRoot.querySelector('.content')?.focus({ preventScroll: true });
+  }
+
+  // Returns the focus to the element that had it before opening the modal.
+  _restoreFocus() {
+    const previousFocus = this._previousFocus;
+    this._previousFocus = null;
+    const active = this._getDeepActiveElement();
+    const focusLost = !active || active === document.body;
+    if (!previousFocus?.isConnected || !(focusLost || this.matches(':focus-within'))) {
+      return;
+    }
+    previousFocus.focus({ preventScroll: true });
+  }
+
+  _getDeepActiveElement() {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    return active;
+  }
+
+  _startClosing() {
+    this._cancelOpenFrame();
+    this._removeFromOpenedModals();
+    this._toChange = true;
+    this._restoreFocus();
+    this._scheduleCloseEnd();
+    this.dispatchEvent(
+      new CustomEvent("dile-modal-closed", {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      })
+    );
+  }
+
+  _removeFromOpenedModals() {
+    const index = openedModals.indexOf(this);
+    if (index !== -1) {
+      openedModals.splice(index, 1);
+      updateScrollLock();
+    }
+  }
+
+  _addToOpenedModals() {
+    if (!openedModals.includes(this)) {
+      openedModals.push(this);
+      updateScrollLock();
+    }
+  }
+
+  // Only the topmost modal reacts to the Esc key.
+  escClose(e) {
+    if (e.key !== "Escape" || !this.opened || handledEscEvents.has(e)) {
+      return;
+    }
+    if (openedModals[openedModals.length - 1] !== this) {
+      return;
     }
+    handledEscEvents.add(e);
+    this.close();
   }
 
-  animationEnd() {
+  animationEnd(e) {
+    if (e && (e.target !== e.currentTarget || e.propertyName !== 'opacity')) {
+      return;
+    }
+    this._clearCloseTimeout();
     this._toChange = false;
   }
 
-  
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.opened) {
+      this._addToOpenedModals();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearCloseTimeout();
+    this._cancelOpenFrame();
+    this._removeFromOpenedModals();
+  }
+
+  // transitionend is not fired when the transition duration is 0 (or the
+  // transition is interrupted), so the background layer is also released by a timer.
+  _scheduleCloseEnd() {
+    this._clearCloseTimeout();
+    const duration = this._getAnimationDuration();
+    if (duration <= 0) {
+      this.animationEnd();
+      return;
+    }
+    this._closeTimeout = setTimeout(() => this.animationEnd(), duration + 50);
+  }
+
+  _clearCloseTimeout() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout);
+      this._closeTimeout = null;
+    }
+  }
+
+  _getAnimationDuration() {
+    const section = this.shadowRoot?.querySelector('section');
+    if (!section) {
+      return 0;
+    }
+    const durations = getComputedStyle(section).transitionDuration.split(',');
+    return Math.max(...durations.map((value) => {
+      const time = parseFloat(value) || 0;
+      return value.trim().endsWith('ms') ? time : time * 1000;
+    }));
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb98f6a98cd4fc1034d9fb05fe35cf6379cda54f"
+  "gitHead": "ea92314b81f3274d6f843b7a926fc528f1a13879"
 }