@dile/ui 2.27.3 → 2.27.4

package/components/app-drawer/app-drawer.spec.js

@@ -0,0 +1,262 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './app-drawer.js';
+import { DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './index.js';
+
+describe('dile-app-drawer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  async function renderDrawer(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-app-drawer');
+    await el.updateComplete;
+    return el;
+  }
+
+  describe('Default state', () => {
+    it('defaults to direction "top" and closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      expect(el.direction).toBe('top');
+      expect(el.opened).toBe(false);
+    });
+
+    it('reflects the opened property to the opened attribute', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.hasAttribute('opened')).toBe(true);
+    });
+  });
+
+  describe('Public API', () => {
+    it('open() sets opened to true', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(true);
+    });
+
+    it('close() sets opened to false and dispatches dile-app-drawer-closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+      let fired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { fired = true; });
+
+      el.close();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+      expect(fired).toBe(true);
+    });
+
+    it('toggle() flips the opened state', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      el.toggle();
+      await el.updateComplete;
+      expect(el.opened).toBe(true);
+
+      el.toggle();
+      await el.updateComplete;
+      expect(el.opened).toBe(false);
+    });
+  });
+
+  describe('Modal overlay', () => {
+    it('renders a modal overlay by default', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      expect(el.shadowRoot.querySelector('.modal')).toBeTruthy();
+    });
+
+    it('does not render a modal overlay when no-modal is set', async () => {
+      const el = await renderDrawer('<dile-app-drawer no-modal></dile-app-drawer>');
+
+      expect(el.shadowRoot.querySelector('.modal')).toBeNull();
+    });
+
+    it('clicking the overlay closes the drawer and dispatches closed + click-outside events', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+      let closedFired = false;
+      let outsideFired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSED, () => { closedFired = true; });
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
+
+      el.shadowRoot.querySelector('.modal').click();
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+      expect(closedFired).toBe(true);
+      expect(outsideFired).toBe(true);
+    });
+
+    it('clicking the overlay while already closed does not dispatch events', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      let outsideFired = false;
+      el.addEventListener(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, () => { outsideFired = true; });
+
+      el.shadowRoot.querySelector('.modal').click();
+      await el.updateComplete;
+
+      expect(outsideFired).toBe(false);
+    });
+
+    it('stops click events on the menu content from bubbling past the drawer', async () => {
+      const el = await renderDrawer('<div id="wrapper"><dile-app-drawer opened></dile-app-drawer></div>');
+      const wrapper = document.querySelector('#wrapper');
+      let wrapperClicked = false;
+      wrapper.addEventListener('click', () => { wrapperClicked = true; });
+
+      el.shadowRoot.querySelector('.menu').click();
+
+      expect(wrapperClicked).toBe(false);
+      expect(el.opened).toBe(true);
+    });
+  });
+
+  describe('Dialog accessibility', () => {
+    it('renders the menu as a labeled, described dialog', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+
+      expect(menu.getAttribute('role')).toBe('dialog');
+      expect(menu.getAttribute('aria-label')).toBe('Application menu');
+      expect(menu.getAttribute('aria-description')).toContain('Escape');
+    });
+
+    it('sets aria-modal to reflect the opened state', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+
+      expect(menu.getAttribute('aria-modal')).toBe('false');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(menu.getAttribute('aria-modal')).toBe('true');
+    });
+
+    it('marks the menu (and overlay) inert while closed, interactive while opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+      const menu = el.shadowRoot.querySelector('.menu');
+      const modal = el.shadowRoot.querySelector('.modal');
+
+      expect(menu.hasAttribute('inert')).toBe(true);
+      expect(modal.hasAttribute('inert')).toBe(true);
+
+      el.open();
+      await el.updateComplete;
+
+      expect(menu.hasAttribute('inert')).toBe(false);
+      expect(modal.hasAttribute('inert')).toBe(false);
+    });
+  });
+
+  describe('Keyboard - Escape', () => {
+    it('closes the drawer when Escape is pressed while opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer opened></dile-app-drawer>');
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+    });
+
+    it('does nothing when Escape is pressed while already closed', async () => {
+      const el = await renderDrawer('<dile-app-drawer></dile-app-drawer>');
+
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await el.updateComplete;
+
+      expect(el.opened).toBe(false);
+    });
+  });
+
+  describe('Focus management', () => {
+    it('moves focus into the menu when opened', async () => {
+      const el = await renderDrawer('<dile-app-drawer><button>Item</button></dile-app-drawer>');
+
+      el.open();
+      await el.updateComplete;
+
+      expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.menu'));
+    });
+
+    it('restores focus to the trigger element after closing', async () => {
+      document.body.innerHTML = '<button id="trigger">Open</button><dile-app-drawer></dile-app-drawer>';
+      const trigger = document.querySelector('#trigger');
+      const el = document.querySelector('dile-app-drawer');
+      await el.updateComplete;
+
+      trigger.focus();
+      el.open();
+      await el.updateComplete;
+      el.close();
+      await el.updateComplete;
+      await wait(10);
+
+      expect(document.activeElement).toBe(trigger);
+    });
+
+    it('traps Tab focus: wraps from the last focusable element to the first', async () => {
+      const el = await renderDrawer(`
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `);
+      await el.updateComplete;
+      const first = el.querySelector('#first');
+      const last = el.querySelector('#last');
+
+      last.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(first);
+    });
+
+    it('traps Shift+Tab focus: wraps from the first focusable element to the last', async () => {
+      const el = await renderDrawer(`
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `);
+      await el.updateComplete;
+      const first = el.querySelector('#first');
+      const last = el.querySelector('#last');
+
+      first.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(last);
+    });
+
+    it('does not move focus when Tab is pressed with focus outside the drawer', async () => {
+      document.body.innerHTML = `
+        <input id="outside" />
+        <dile-app-drawer opened>
+          <button id="first">First</button>
+          <button id="last">Last</button>
+        </dile-app-drawer>
+      `;
+      const el = document.querySelector('dile-app-drawer');
+      await el.updateComplete;
+      const outside = document.querySelector('#outside');
+
+      outside.focus();
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }));
+
+      expect(document.activeElement).toBe(outside);
+    });
+  });
+});

package/components/app-drawer/src/DileAppDrawer.js

@@ -27,6 +27,9 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
     this.direction = 'top';
     this.opened = false;
     this._documentClose = this._documentClose.bind(this);
+    this._triggerElement = null;
+    this._handleKeyDown = this._handleKeyDown.bind(this);
+    this._focusTrapActive = false;
   }
 
   static get styles() {
@@ -106,22 +109,113 @@ export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
         transform: translateX(0);
         box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
       }
+
+      /* Respect prefers-reduced-motion */
+      @media (prefers-reduced-motion: reduce) {
+        .modal {
+          transition: none;
+        }
+
+        .menu {
+          transition: none;
+        }
+      }
     `;
   }
 
   render() {
     return html`
       ${this.modalTemplate}
-      <div class="menu" @click="${this._contentClick}">
-        <section>
+      <div 
+        class="menu" 
+        role="dialog"
+        aria-modal="${this.opened ? 'true' : 'false'}"
+        aria-label="Application menu"
+        aria-description="Press Escape to close. You can also click outside the menu."
+        ?inert="${!this.opened}"
+        tabindex="-1"
+        @click="${this._contentClick}"
+        @keydown="${this._handleKeyDown}">
+        <nav aria-label="Main navigation">
           <slot></slot>
-        </section>
+        </nav>
       </div>
     `;
   }
 
   get modalTemplate() {
-    return this.noModal ? '' : html`<div class="modal" @click=${this._documentClose}></div>`;
+    return this.noModal ? '' : html`<div 
+      class="modal" 
+      aria-hidden="true"
+      ?inert="${!this.opened}"
+      @click=${this._documentClose}>
+    </div>`;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('opened')) {
+      if (this.opened) {
+        this._openDrawer();
+      } else {
+        this._closeDrawer();
+      }
+    }
+  }
+
+  _openDrawer() {
+    this._triggerElement = document.activeElement;
+    this.shadowRoot.querySelector('.menu').focus();
+    this._focusTrapActive = true;
+    document.addEventListener('keydown', this._handleKeyDown);
+  }
+
+  _closeDrawer() {
+    this._focusTrapActive = false;
+    document.removeEventListener('keydown', this._handleKeyDown);
+    
+    if (this._triggerElement && typeof this._triggerElement.focus === 'function') {
+      setTimeout(() => {
+        this._triggerElement.focus();
+      }, 0);
+    }
+  }
+
+  _getFocusableElements() {
+    const focusableSelector = `
+      button:not([disabled]),
+      [href],
+      input:not([disabled]),
+      select:not([disabled]),
+      textarea:not([disabled]),
+      [tabindex]:not([tabindex="-1"]):not([disabled]),
+      [role="button"]:not([aria-disabled="true"])
+    `;
+    return Array.from(this.querySelectorAll(focusableSelector)).filter(el => {
+      return el.offsetParent !== null;
+    });
+  }
+
+  _handleKeyDown(e) {
+    if (!this._focusTrapActive || e.key !== 'Tab') return;
+    
+    const focusableElements = this._getFocusableElements();
+    if (focusableElements.length === 0) return;
+    
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElement = document.activeElement;
+    
+    const focusIsInsideDrawer = focusableElements.includes(activeElement);
+    if (!focusIsInsideDrawer) return;
+    
+    if (e.shiftKey && activeElement === firstElement) {
+      e.preventDefault();
+      lastElement.focus();
+    }
+    else if (!e.shiftKey && activeElement === lastElement) {
+      e.preventDefault();
+      firstElement.focus();
+    }
   }
 
   _documentClose() {

package/components/hamburger/src/DileHamburger.js

@@ -125,6 +125,19 @@ export class DileHamburger extends LitElement {
       .hamburger:focus-visible .hamburger-inner::after {
         background-color: var(--dile-hamburger-focus-color, var(--dile-primary-dark-color, #0a66ff));
       }
+
+      /* Respect prefers-reduced-motion */
+      @media (prefers-reduced-motion: reduce) {
+        .hamburger {
+          transition: none;
+        }
+
+        .hamburger-inner,
+        .hamburger-inner::before,
+        .hamburger-inner::after {
+          transition: none;
+        }
+      }
     `;
   }
 

package/components/menu-hamburger/src/DileMenuHamburger.js

@@ -63,7 +63,15 @@ export class DileMenuHamburger extends LitElement {
 
   render() {
     return html`
-      <dile-hamburger @click="${this.toggle}" ?active="${this.opened}"></dile-hamburger>
+      <dile-hamburger 
+        @click="${this.toggle}" 
+        ?active="${this.opened}"
+        aria-label="Open main menu"
+        aria-expanded="${this.opened}"
+        aria-controls="drawer"
+        aria-haspopup="dialog"
+        role="button">
+      </dile-hamburger>
       <dile-app-drawer 
         id="drawer" 
         ?opened="${this.opened}" 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.27.3",
+  "version": "2.27.4",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c1d820ed3098c991942d79b299327e2ea6aef07"
+  "gitHead": "d58cfec4206fe5fca4fa634be70f11ab3c9a6899"
 }