@lion/ui 0.7.5 → 0.7.7

package/components/overlays/src/OverlayController.js

@@ -201,6 +201,8 @@ export class OverlayController extends EventTarget {
     this.__hasActiveBackdrop = true;
     /** @private */
     this.__escKeyHandler = this.__escKeyHandler.bind(this);
+    /** @private */
+    this.__cancelHandler = this.__cancelHandler.bind(this);
   }
 
   /**
@@ -510,6 +512,8 @@ export class OverlayController extends EventTarget {
       this.__contentHasBeenInitialized = true;
     }
 
+    this.__wrappingDialogNode?.addEventListener('cancel', this.__cancelHandler);
+
     // Reset all positioning styles (local, c.q. Popper) and classes (global)
     this.contentWrapperNode.removeAttribute('style');
     this.contentWrapperNode.removeAttribute('class');
@@ -636,13 +640,14 @@ export class OverlayController extends EventTarget {
   __setupTeardownAccessibility({ phase }) {
     if (phase === 'init') {
       this.__storeOriginalAttrs(this.contentNode, ['role', 'id']);
+      const isModal = this.trapsKeyboardFocus;
 
       if (this.invokerNode) {
-        this.__storeOriginalAttrs(this.invokerNode, [
-          'aria-expanded',
-          'aria-labelledby',
-          'aria-describedby',
-        ]);
+        const attributesToStore = ['aria-labelledby', 'aria-describedby'];
+        if (!isModal) {
+          attributesToStore.push('aria-expanded');
+        }
+        this.__storeOriginalAttrs(this.invokerNode, attributesToStore);
       }
 
       if (!this.contentNode.id) {
@@ -657,7 +662,7 @@ export class OverlayController extends EventTarget {
         }
         this.contentNode.setAttribute('role', 'tooltip');
       } else {
-        if (this.invokerNode) {
+        if (this.invokerNode && !isModal) {
           this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
         }
         if (!this.contentNode.getAttribute('role')) {
@@ -783,6 +788,10 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _keepBodySize({ phase }) {
+    if (!this.preventsScroll) {
+      return;
+    }
+
     switch (phase) {
       case 'before-show':
         this.__bodyClientWidth = document.body.clientWidth;
@@ -1126,6 +1135,17 @@ export class OverlayController extends EventTarget {
     }
   }
 
+  /**
+   * When the overlay is a modal dialog hidesOnEsc works out of the box, so we prevent that.
+   *
+   * There is currently a bug in chrome that makes the dialog close when pressing Esc the second time
+   * @private
+   */
+  // eslint-disable-next-line class-methods-use-this
+  __cancelHandler(/** @type {Event} */ ev) {
+    ev.preventDefault();
+  }
+
   /** @private */
   __escKeyHandler(/** @type {KeyboardEvent} */ ev) {
     return ev.key === 'Escape' && this.hide();
@@ -1284,7 +1304,8 @@ export class OverlayController extends EventTarget {
     if (phase === 'init' || phase === 'teardown') {
       this.__setupTeardownAccessibility({ phase });
     }
-    if (this.invokerNode && !this.isTooltip) {
+    const isModal = this.trapsKeyboardFocus;
+    if (this.invokerNode && !this.isTooltip && !isModal) {
       this.invokerNode.setAttribute('aria-expanded', `${phase === 'show'}`);
     }
   }
@@ -1292,6 +1313,7 @@ export class OverlayController extends EventTarget {
   teardown() {
     this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
+    this.__wrappingDialogNode?.removeEventListener('cancel', this.__cancelHandler);
   }
 
   /** @private */

package/components/overlays/src/OverlayMixin.js

@@ -72,7 +72,11 @@ export const OverlayMixinImplementation = superclass =>
     requestUpdate(name, oldValue, options) {
       super.requestUpdate(name, oldValue, options);
       if (name === 'opened' && this.opened !== oldValue) {
-        this.dispatchEvent(new Event('opened-changed'));
+        this.dispatchEvent(
+          new CustomEvent('opened-changed', {
+            detail: { opened: this.opened },
+          }),
+        );
       }
     }
 

package/components/overlays/src/utils/deep-contains.js

@@ -1,20 +1,149 @@
+/**
+ * A number, or a string containing a number.
+ * @typedef {{element: HTMLElement; deepContains: boolean} | null} CacheItem
+ */
+
 /**
  * Whether first element contains the second element, also goes through shadow roots
  * @param {HTMLElement|ShadowRoot} el
  * @param {HTMLElement|ShadowRoot} targetEl
+ * @param {{[key: string]: CacheItem[]}} cache
  * @returns {boolean}
  */
-export function deepContains(el, targetEl) {
+export function deepContains(el, targetEl, cache = {}) {
+  /**
+   * @description A `Typescript` `type guard` for `HTMLElement`
+   * @param {Element|ShadowRoot} htmlElement
+   * @returns {htmlElement is HTMLElement}
+   */
+  function isHTMLElement(htmlElement) {
+    return 'getAttribute' in htmlElement;
+  }
+
+  /**
+   * @description Returns a cached item for the given element or null otherwise
+   * @param {HTMLElement|ShadowRoot} element
+   * @returns {CacheItem|null}
+   */
+  function getCachedItem(element) {
+    if (!isHTMLElement(element)) {
+      return null;
+    }
+    const slotName = element.getAttribute('slot');
+    /** @type {CacheItem|null} */
+    let result = null;
+    if (slotName) {
+      const cachedItemsWithSameName = cache[slotName];
+      if (cachedItemsWithSameName) {
+        result = cachedItemsWithSameName.filter(item => item?.element === element)[0] || null;
+      }
+    }
+    return result;
+  }
+
+  const cachedItem = getCachedItem(el);
+  if (cachedItem) {
+    return cachedItem.deepContains;
+  }
+
+  /**
+   * @description Cache an html element and its `deepContains` status
+   * @param {boolean} contains The `deepContains` status for the element
+   * @returns {void}
+   */
+  function cacheItem(contains) {
+    if (!isHTMLElement(el)) {
+      return;
+    }
+    const slotName = el.getAttribute('slot');
+    if (slotName) {
+      // eslint-disable-next-line no-param-reassign
+      cache[slotName] = cache[slotName] || [];
+      cache[slotName].push({ element: el, deepContains: contains });
+    }
+  }
+
   let containsTarget = el.contains(targetEl);
   if (containsTarget) {
+    cacheItem(true);
     return true;
   }
 
+  /**
+   * A `Typescript` `type guard` for `HTMLSlotElement`
+   * @param {HTMLElement|HTMLSlotElement} htmlElement
+   * @returns {htmlElement is HTMLSlotElement}
+   */
+  function isSlot(htmlElement) {
+    return htmlElement.tagName === 'SLOT';
+  }
+
+  /**
+   * Returns a slot projection or it returns `null` if `htmlElement` is not an `HTMLSlotElement`
+   * @example
+   * Let's say this is a custom element declared as follows:
+   * ```
+   * <custom-element>
+   *   shadowRoot
+   *     <div id="dialog-wrapper">
+   *       <div id="dialog-header">Header</div>
+   *       <div id="dialog-content">
+   *         <slot id="dialog-content-slot" name="content"></slot>
+   *       </div>
+   *     </div>
+   *   <!-- Light DOM -->
+   *   <div id="my-slot-content" slot="content">my content</div>
+   * </custom-element>
+   * ```
+   * Then for `slot#dialog-content-slot` which is defined in the ShadowDom the function returns `div#my-slot-content` which is defined in the LightDom
+   * @param {HTMLElement|HTMLSlotElement} htmlElement
+   * @returns {Element[]}
+   * */
+  function getSlotProjections(htmlElement) {
+    return isSlot(htmlElement) ? /** @type {Element[]}  */ (htmlElement.assignedElements()) : [];
+  }
+
+  /**
+   * @description A `Typescript` `type guard` for `ShadowRoot`
+   * @param {Element|ShadowRoot} htmlElement
+   * @returns {htmlElement is ShadowRoot}
+   */
+  function isShadowRoot(htmlElement) {
+    return htmlElement.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+  }
+
+  /**
+   * Check whether any element contains target
+   * @param {(Element|ShadowRoot|null)[]} elements
+   * */
+  function checkElements(elements) {
+    let contains = false;
+    for (let i = 0; i < elements.length; i += 1) {
+      const element = elements[i];
+      if (
+        element &&
+        (isHTMLElement(element) || isShadowRoot(element)) &&
+        deepContains(element, targetEl, cache)
+      ) {
+        contains = true;
+        break;
+      }
+    }
+    return contains;
+  }
+
   /** @param {HTMLElement|ShadowRoot} elem */
   function checkChildren(elem) {
     for (let i = 0; i < elem.children.length; i += 1) {
       const child = /** @type {HTMLElement}  */ (elem.children[i]);
-      if (child.shadowRoot && deepContains(child.shadowRoot, targetEl)) {
+      const cachedChild = getCachedItem(child);
+      if (cachedChild) {
+        containsTarget = cachedChild.deepContains || containsTarget;
+        break;
+      }
+      const slotProjections = getSlotProjections(child);
+      const childSubElements = [child.shadowRoot, ...slotProjections];
+      if (checkElements(childSubElements)) {
         containsTarget = true;
         break;
       }
@@ -26,11 +155,13 @@ export function deepContains(el, targetEl) {
 
   // If element is not shadowRoot itself
   if (el instanceof HTMLElement && el.shadowRoot) {
-    containsTarget = deepContains(el.shadowRoot, targetEl);
+    containsTarget = deepContains(el.shadowRoot, targetEl, cache);
     if (containsTarget) {
+      cacheItem(true);
       return true;
     }
   }
   checkChildren(el);
+  cacheItem(containsTarget);
   return containsTarget;
 }

package/components/overlays/test/OverlayController.test.js

@@ -585,6 +585,17 @@ describe('OverlayController', () => {
         expect(ctrl.isShown).to.be.false;
       });
 
+      it("doesn't hide when [escape] is pressed and hidesOnEsc is set to false", async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          hidesOnEsc: false,
+        });
+        await ctrl.show();
+        ctrl.contentNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+        await aTimeout(0);
+        expect(ctrl.isShown).to.be.true;
+      });
+
       it('stays shown when [escape] is pressed on outside element', async () => {
         const ctrl = new OverlayController({
           ...withGlobalTestConfig(),
@@ -1517,6 +1528,23 @@ describe('OverlayController', () => {
       expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal('false');
     });
 
+    it('does not synchronize [aria-expanded] on invoker when the overlay is modal', async () => {
+      const invokerNode = /** @type {HTMLElement} */ (
+        await fixture('<div role="button">invoker</div>')
+      );
+      const ctrl = new OverlayController({
+        ...withLocalTestConfig(),
+        trapsKeyboardFocus: true,
+        handlesAccessibility: true,
+        invokerNode,
+      });
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+      await ctrl.show();
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+      await ctrl.hide();
+      expect(ctrl.invokerNode?.getAttribute('aria-expanded')).to.equal(null);
+    });
+
     it('creates unique id for content', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
@@ -1753,4 +1781,33 @@ describe('OverlayController', () => {
       );
     });
   });
+
+  describe('run _keepBodySize only with scroll prevention', () => {
+    /**
+     * @type {OverlayController}
+     */
+    const overlayControllerNoPrevent = new OverlayController({
+      ...withLocalTestConfig(),
+      preventsScroll: false,
+    });
+
+    const overlayControllerPreventsScroll = new OverlayController({
+      ...withLocalTestConfig(),
+      preventsScroll: true,
+    });
+
+    it('should not run with scroll prevention', async () => {
+      await overlayControllerNoPrevent.show();
+
+      expect(overlayControllerNoPrevent.__bodyMarginRightInline).to.equal(undefined);
+      expect(overlayControllerNoPrevent.__bodyMarginRight).to.equal(undefined);
+    });
+
+    it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.show();
+
+      expect(overlayControllerPreventsScroll.__bodyMarginRightInline).to.not.equal(undefined);
+      expect(overlayControllerPreventsScroll.__bodyMarginRight).to.not.equal(undefined);
+    });
+  });
 });

package/components/overlays/test/utils-tests/deep-contains.test.js

@@ -124,4 +124,102 @@ describe('deepContains()', () => {
     expect(deepContains(element, elementFirstChildShadowChildShadow)).to.be.true;
     expect(deepContains(element, elementFirstChildShadowChildShadowLastChild)).to.be.true;
   });
+
+  it('returns true if the element, which is located in ShadowsRoot, contains a target element, located in the LightDom', async () => {
+    const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
+    mainElement.innerHTML = `      
+      <div slot="content" id="light-el-content">
+        <input type="text" id="light-el-input-1"></input>
+      </div>
+      <div slot="content" id="light-el-content">
+        <input type="text" id="light-el-input-2"></input>
+      </div>
+    `;
+    const shadowRoot = mainElement.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div id="dialog-wrapper">
+        <div id="dialog-header">
+          Header          
+        </div>  
+        <div id="dialog-content">
+          <slot name="content" id="shadow-el-content"></slot>
+        </div>  
+      </div>      
+    `;
+    const inputElement = /** @type {HTMLElement} */ (
+      mainElement.querySelector('#light-el-input-2')
+    );
+    const dialogWrapperElement = /** @type {HTMLElement} */ (
+      shadowRoot.querySelector('#dialog-wrapper')
+    );
+    expect(deepContains(dialogWrapperElement, inputElement)).to.be.true;
+  });
+
+  it(`returns true if the element, which is located in ShadowRoot, contains a target element, located in the ShadowRoot element of the LightDom element  `, async () => {
+    /**
+     * The DOM for the `main` element looks as follows:
+     *
+     * <div id="main">
+     *   #shadow-root
+     *     <div id="dialog-wrapper">                                        // dialogWrapperElement
+     *       <div id="dialog-header">
+     *         Header
+     *       </div>
+     *       <div id="dialog-content">
+     *         <slot name="content" id="shadow-el-content"></slot>
+     *       </div>
+     *     </div>
+     *   <div slot="content" id="light-el-content">
+     *     <div id="conent-wrapper">
+     *       #shadow-root
+     *         <div id="conent-wrapper-sub">
+     *           #shadow-root
+     *             <input type="type" id="content-input"></input>           //inputElement
+     *         </div>
+     *     </div>
+     *   </div>
+     * </div>
+     */
+    const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
+    mainElement.innerHTML = `      
+      <div slot="content" id="light-el-content">
+        <div id="content-wrapper"></div>
+      </div>
+      <div slot="content" id="light-el-content">
+        <div id="content-wrapper"></div>
+      </div>
+    `;
+    const contentWrapper = /** @type {HTMLElement} */ (
+      mainElement.querySelector('#content-wrapper')
+    );
+    const contentWrapperShadowRoot = contentWrapper.attachShadow({ mode: 'open' });
+    contentWrapperShadowRoot.innerHTML = `
+      <div id="conent-wrapper-sub"></div>
+    `;
+    const contentWrapperSub = /** @type {HTMLElement} */ (
+      contentWrapperShadowRoot.querySelector('#conent-wrapper-sub')
+    );
+    const contentWrapperSubShadowRoot = contentWrapperSub.attachShadow({ mode: 'open' });
+    contentWrapperSubShadowRoot.innerHTML = `
+      <input type="type" id="content-input"></input>
+    `;
+    const inputElement = /** @type {HTMLElement} */ (
+      contentWrapperSubShadowRoot.querySelector('#content-input')
+    );
+    const mainElementShadowRoot = mainElement.attachShadow({ mode: 'open' });
+    mainElementShadowRoot.innerHTML = `
+      <div id="dialog-wrapper">
+        <div id="dialog-header">
+          Header          
+        </div>  
+        <div id="dialog-content">
+          <slot name="content" id="shadow-el-content"></slot>
+        </div>  
+      </div>      
+    `;
+    const dialogWrapperElement = /** @type {HTMLElement} */ (
+      mainElementShadowRoot.querySelector('#dialog-wrapper')
+    );
+    expect(deepContains(dialogWrapperElement, inputElement)).to.be.true;
+  });
 });

package/components/select-rich/src/LionSelectRich.js

@@ -196,6 +196,18 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       }
     }
 
+    if (changedProperties.has('singleOption')) {
+      if (this.singleOption) {
+        this._invokerNode.removeAttribute('role');
+        this._invokerNode.removeAttribute('aria-haspopup');
+        this._invokerNode.removeAttribute('aria-expanded');
+      } else {
+        this._invokerNode.setAttribute('role', 'button');
+        this._invokerNode.setAttribute('aria-haspopup', 'listbox');
+        this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
+      }
+    }
+
     if (this._inputNode && this._invokerNode) {
       if (changedProperties.has('_ariaLabelledNodes')) {
         this._invokerNode.setAttribute(

package/components/select-rich/test/lion-select-rich.test.js

@@ -148,6 +148,32 @@ describe('lion-select-rich', () => {
       expect(_invokerNode.hasAttribute('single-option')).to.be.true;
     });
 
+    it('sets and removes the button role and aria attributes on change of singleOption', async () => {
+      const el = await fixture(html`
+        <lion-select-rich>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20}>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+      const { _invokerNode } = getSelectRichMembers(el);
+
+      expect(_invokerNode.hasAttribute('role')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+
+      el.singleOption = true;
+      await el.updateComplete;
+      expect(_invokerNode.hasAttribute('role')).to.be.false;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.false;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.false;
+
+      el.singleOption = false;
+      await el.updateComplete;
+      expect(_invokerNode.hasAttribute('role')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-haspopup')).to.be.true;
+      expect(_invokerNode.hasAttribute('aria-expanded')).to.be.true;
+    });
+
     it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
       const tagString = defineCE(
         class LionCustomOption extends LionOption {