@lion/ui 0.18.0-menu-system.2 → 0.18.0-menu-system.5

package/components/collapsible/test-suites/DisclosureMixin.suite.js

@@ -0,0 +1,30 @@
+// import { LitElement } from 'lit';
+// import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+// import { DisclosureMixin } from '../src/DisclosureMixin.js';
+
+// import '@lion/ui/define/lion-menu.js';
+// import '@lion/ui/define/lion-item.js';
+
+// class DisclosureClass extends DisclosureMixin(LitElement) {}
+
+// /**
+//  * @typedef {import('lit').TemplateResult} TemplateResult
+//  */
+
+// const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+
+// /**
+//  * @param { {tagString?:string, itemTagString?:string} } [customConfig]
+//  */
+// export function runDisclosureMixinSuite(customConfig = {}) {
+//   const cfg = {
+//     tagString: 'lion-menu',
+//     ...customConfig,
+//   };
+
+//   const tagString = cfg.tagString || defineCE(DisclosureClass);
+//   const tag = unsafeStatic(tagString);
+
+//   describe('DisclosureMixin', () => {
+//   });
+// }

package/components/menu/src/InteractiveListMixin.js

@@ -22,7 +22,7 @@ import {
 
 // TODO: consider renaming to FocusGroupMixin
 
-// TODO: make all available in controller/directve (same logic with an elegent prop-to-host-mapping)
+// TODO: make all available in controller/directive (same logic with an elegant prop-to-host-mapping)
 
 /**
  * @param {Element} potentialFocusable
@@ -55,13 +55,25 @@ function isFocusableElement(potentialFocusable) {
 export class LionItem extends LitElement {
   /** @type {any} */
   static get properties() {
-    return { type: String };
+    return {
+      type: { type: String },
+    };
   }
 
   get _invokerNode() {
-    return Array.from(this.children).find(child => child.slot === 'invoker');
+    return /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
+      child => child.slot === 'invoker',
+    );
   }
 
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
+
   constructor() {
     super();
     /** @type {InteractiveListItemRole |''} */
@@ -81,14 +93,6 @@ export class LionItem extends LitElement {
     }
   }
 
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-    `,
-  ];
-
   render() {
     return html`
       <slot name="invoker"></slot>
@@ -332,11 +336,10 @@ const InteractiveListMixinImplementation = superclass =>
     setCheckedIndex(index) {
       const item = this.listItems[index];
       if (!item) return;
-
       if (!this.multipleChoice) {
         // Uncheck all
         this.listItems.forEach(listItem => {
-          setChecked(listItem, false);
+          setChecked(listItem, true);
         });
         setChecked(this.listItems[index]);
       } else {
@@ -377,7 +380,7 @@ const InteractiveListMixinImplementation = superclass =>
        * - [role="menubar"](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html)
        * - [role="tree"](https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1b.html)
        * For disclosure menus, we need keyboard navigation, but treat every list item
-       * (more precisely its anchor child) as a tab stop. Also we apply aria-current
+       * (more precisely its anchor child) as a tab stop.
        * @type {'activedescendant'|'roving-tabindex'|'tabbable-disclosure'|'none'}
        */
       this._activeMode = 'activedescendant';
@@ -426,6 +429,16 @@ const InteractiveListMixinImplementation = superclass =>
       this._onListFocusIn = this._onListFocusIn.bind(this);
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      window.addEventListener('popstate', this._onPopState);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      window.removeEventListener('popstate', this._onPopState);
+    }
+
     /**
      * @param {import('lit').PropertyValues } changedProperties
      */
@@ -457,11 +470,10 @@ const InteractiveListMixinImplementation = superclass =>
          * menuitemradios or -checkboxes.
          * When no role at all, we might deal with a wrapped node (for instance triggering a
          * submenu)
-         * Alternatively, when _activeMode is ['disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
+         * Alternatively, when _activeMode is ['tabbable-disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
          * we search for a[href]
          */
         if (node.getAttribute('role') === 'group') {
-          // console.debug('checking children of', node, node.children);
           // @ts-ignore - HTMLCollection is iterable
           for (const child of node.children) {
             // @ts-ignore
@@ -568,6 +580,15 @@ const InteractiveListMixinImplementation = superclass =>
       if (!this.noPreselect && this.checkedIndex === -1) {
         this.checkedIndex = 0;
       }
+      newItems.forEach(item => {
+        if (!item.hasAttribute('checked')) {
+          setChecked(item, true);
+        } else {
+          setChecked(item);
+        }
+      });
+
+      this.__syncCurrentPageWithLocationHref(window.location);
     }
 
     /**
@@ -706,16 +727,8 @@ const InteractiveListMixinImplementation = superclass =>
       // const item = /** @type {HTMLElement} */ (target.closest('[role]'));
       // @ts-ignore - target is HTMLElement
       const foundIndex = this.listItems.indexOf(target);
-      // console.debug('focusin', target, foundIndex, this.listItems);
-      const previousActiveIndex = this.activeIndex;
       if (foundIndex > -1 && foundIndex !== this.activeIndex) {
         this.activeIndex = foundIndex;
-        if (this._activeMode === 'tabbable-disclosure') {
-          const previousActiveItem = this.listItems[previousActiveIndex];
-          previousActiveItem?.removeAttribute('aria-current');
-          const activeItem = this.listItems[this.activeIndex];
-          activeItem.setAttribute('aria-current', 'page');
-        }
       }
     }
 
@@ -800,6 +813,26 @@ const InteractiveListMixinImplementation = superclass =>
     _getPreviousEnabledOption(currentIndex, offset = -1) {
       return this.__getNextOption(currentIndex, offset);
     }
+
+    /**
+     * @param {Location} location
+     */
+    __syncCurrentPageWithLocationHref(location) {
+      this.listItems.forEach(item => {
+        if (/** @type {HTMLAnchorElement} */ (item).href) {
+          if (location.href.includes(/** @type {HTMLAnchorElement} */ (item).href)) {
+            setChecked(item);
+          } else {
+            setChecked(item, true);
+          }
+        }
+      });
+    }
+
+    /** @protected */
+    _onPopState = () => {
+      this.__syncCurrentPageWithLocationHref(document.location);
+    };
   };
 // @ts-ignore
 export const InteractiveListMixin = dedupeMixin(InteractiveListMixinImplementation);

package/components/menu/src/LionMenu.js

@@ -189,7 +189,7 @@ export class LionMenu extends MultiLevelListMixin(LitElement) {
     if (!multiple) {
       // Uncheck all
       listItemsWithinGroup.forEach(listItem => {
-        setChecked(listItem, false);
+        setChecked(listItem, true);
       });
       setChecked(this.listItems[index]);
     } else {

package/components/menu/src/LionToolbar.js

@@ -60,7 +60,7 @@ export class LionToolbar extends LionMenu {
       if (!multiple) {
         // Uncheck all
         listItemsWithinGroup.forEach(listItem => {
-          setChecked(listItem, false);
+          setChecked(listItem, true);
         });
         setChecked(this.listItems[index]);
       } else {

package/components/menu/src/MoreButtonMenuMixin.js

@@ -1,62 +1,31 @@
-// @ts-nocheck
-/**
- * @param {any} superclass
- */
-/** @type {any} */
-
-const styles = `
-  <style>
-    /** More button is hidden by default */
-    [data-more-button-wrapper] {
-      display: none;
-    }
-
-    [data-more-button-menu]:has([role='listitem'] [active]:focus):not(
-        :has([role='listitem'] [active][aria-expanded='true'])
-      ) {
-      overflow: visible;
-      width: auto;
-      height: auto;
-      position: absolute;
-      top: 100%;
-      background-color: var(--oj2_bg_default);
-    }
-    [data-more-button-menu],
-    [data-more-button-menu]:has([role='listitem'] [active][aria-expanded='true']) {
-      overflow: hidden;
-      width: 1px;
-      height: 1px;
-    }
-
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > a,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > button,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > a {
-      white-space: nowrap;
-    }
-    /**
-    * TODO listitem rigth margin/gap is not taken at the account ATM
-    */
-    /**
-     * More button relies on the fact that the menu items do not break the line
-     * TODO is it optimal?
-     */
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > a {
-      white-space: nowrap;
-    }    
-  </style>
-  `;
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from 'lit';
+
+const styles = css`
+  /** More button is hidden by default */
+  [data-more-button-wrapper] {
+    display: none;
+  }
+
+  [data-more-button-menu][data-open]:not(:has([role='listitem'] [aria-expanded='true'])) {
+    position: absolute;
+    overflow: visible;
+    height: auto;
+    width: auto;
+    top: 100%;
+  }
+
+  /** N.B. this is a simplified version of sr-only. when we move to overlayctrl, we should build this into overlayctrl */
+  [data-more-button-menu] {
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+  }
+
+  [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
+    white-space: nowrap;
+  }
+`;
 
 // @ts-ignore - JS mixin typing
 export const MoreButtonMenuMixin = superclass =>
@@ -85,7 +54,7 @@ export const MoreButtonMenuMixin = superclass =>
     // eslint-disable-next-line class-methods-use-this
     _getDeepActiveElement() {
       let host = document.activeElement || document.body;
-      while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+      while (host?.shadowRoot?.activeElement) {
         host = host.shadowRoot.activeElement;
       }
       return host;
@@ -94,7 +63,7 @@ export const MoreButtonMenuMixin = superclass =>
     _createMoreButtonWrapper() {
       const moreButtonWrapper = document.createElement('div');
       const style = document.createElement('style');
-      style.textContent = styles;
+      style.textContent = styles.cssText;
       moreButtonWrapper.appendChild(style);
       moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
       [...this.getMoreButtonSlotProjection().childNodes].forEach(node =>
@@ -107,32 +76,38 @@ export const MoreButtonMenuMixin = superclass =>
       const moreButtonMenu = document.createElement('div');
       moreButtonMenu.setAttribute('data-more-button-menu', '');
       moreButtonWrapper.appendChild(moreButtonMenu);
-      moreButtonMenu.setAttribute('role', 'none');
       this._listNode.appendChild(moreButtonWrapper);
 
-      const isElementDirectFocusableItemUnderMoreButtonMenu = element => {
-        const targetTagName = element?.tagName;
-        return (
-          element?.parentElement?.parentElement === moreButtonMenu &&
-          (targetTagName === 'BUTTON' || targetTagName === 'A')
-        );
-      };
+      const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
+        this.listItems.includes(element) && moreButtonMenu.contains(element);
 
-      moreButtonMenu.addEventListener('focusin', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener(
+        'focusin',
+        /** @type {FocusEvent} */ event => {
+          const target = /** @type {HTMLElement} */ (event?.target);
+          if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
+
+          // A user did `Shift + Tab` from L2 menu to More menu
           if (target?.getAttribute('aria-expanded') === 'true') {
+            // close L2 menu
             target?.click();
           }
           moreButton?.setAttribute('aria-expanded', 'true');
-        }
-      });
+          moreButtonMenu.setAttribute('data-open', '');
+        },
+      );
 
-      moreButtonMenu.addEventListener('focusout', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener('focusout', () => {
+        // We need this timeout for Safari/WebKit.
+        // Unfortunately, an in progress click gets canceled when overflow:hidden is applied.
+        // Although mousedown would work instead, the consuming developer should have the freedom to apply all possible interaction pattterns.
+        // Especially, we should be compatible with 'withClickInteraction'
+        setTimeout(() => {
+          if (isElementDirectFocusableItemUnderMoreButtonMenu(this._getDeepActiveElement())) return;
           moreButton?.setAttribute('aria-expanded', 'false');
-        }
+
+          moreButtonMenu.removeAttribute('data-open');
+        }, 100);
       });
 
       this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
@@ -140,22 +115,26 @@ export const MoreButtonMenuMixin = superclass =>
       moreButton?.addEventListener('mousedown', () => {
         this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
         const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > a, :scope > [role="listitem"] > button',
+          ':scope > [role="listitem"] > :is(a, button)',
         );
 
-        [...focusableFirstLevelItems]?.forEach(focusableFirstLevelItem => {
+        // @ts-ignore Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
+        for (const focusableFirstLevelItem of focusableFirstLevelItems) {
           if (this._getDeepActiveElement() === focusableFirstLevelItem) {
             this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
           }
-        });
+        }
       });
 
       moreButton?.addEventListener('click', () => {
-        if (!this.hasMoreButtonMenuAnyFocusedFirstLevelItems) {
-          moreButtonMenu
-            .querySelector(':scope > [role="listitem"] > a, :scope > [role="listitem"] > button')
-            ?.focus();
-        }
+        if (this.hasMoreButtonMenuAnyFocusedFirstLevelItems) return;
+        /** @type {HTMLElement | null} */
+        const firstInteractiveItem = moreButtonMenu.querySelector(
+          ':scope > [role="listitem"] > :is(a, button)',
+        );
+
+        firstInteractiveItem?.focus();
+        moreButtonMenu.setAttribute('data-open', '');
       });
     }
 
@@ -232,13 +211,13 @@ export const MoreButtonMenuMixin = superclass =>
       return fragment;
     };
 
-    moveItemToMoreButtonMenuFromMainMenu() {
-      const moreButtonMenuElement = this.getMoreButtonMenu();
-      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
-      const listItem = listItems[listItems.length - 1];
-
+    /**
+     * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
+     */
+    moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem }) {
       const fragment = this.getListItemWithAdjacentNodes(listItem);
       moreButtonMenuElement.prepend(fragment);
+      // eslint-disable-next-line no-param-reassign
       listItem.style.display = '';
       this.displayMoreButton();
     }
@@ -268,9 +247,15 @@ export const MoreButtonMenuMixin = superclass =>
       return hiddenItemsCount;
     }
 
+    /**
+     * @param {number} hiddenItemsCount
+     */
     moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
+      const moreButtonMenuElement = this.getMoreButtonMenu();
+      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
       for (let i = 0; i < hiddenItemsCount; i += 1) {
-        this.moveItemToMoreButtonMenuFromMainMenu();
+        const listItem = listItems[listItems.length - 1 - i];
+        this.moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem });
       }
     }
 
@@ -279,6 +264,8 @@ export const MoreButtonMenuMixin = superclass =>
         return;
       }
 
+      this.style.visibility = 'hidden';
+
       this.__resizeTimeout = setTimeout(() => {
         this.__resizeTimeout = null;
 

package/components/menu/src/MultiLevelListMixin.js

@@ -214,7 +214,7 @@ const MultiLevelListMixinImplementation = superclass =>
           if (
             this.orientation === 'horizontal' &&
             subListOfActiveItem &&
-            this._activeMode !== 'disclosure'
+            this._activeMode !== 'tabbable-disclosure'
           ) {
             this.activeItem.click();
           }

package/components/menu/src/utils/listItemInteractions.js

@@ -3,6 +3,10 @@
  * 'smart' (LionOption) and 'regular' items
  */
 
+/**
+ * @typedef {import('@lion/ui/checkbox-group.js').LionCheckboxIndeterminate} LionCheckboxIndeterminate
+ */
+
 /**
  * @param {HTMLElement} item
  */
@@ -34,18 +38,33 @@ export function toggleDisabled(item) {
  * @param {HTMLElement} item
  */
 export function isChecked(item) {
-  return item.hasAttribute('checked') || item.getAttribute('aria-selected') === 'true';
+  return item.hasAttribute('checked');
 }
 
 /**
  * @param {HTMLElement} item
- * @param {boolean} [shouldSet=false]
+ * @param {Object} [options]
+ * @param {boolean} [options.unset=false]
+ * @param {'page'|'mixed'} [options.text] - optional text to set for aria-checked/aria-selected/aria-current (e.g. "mixed")
  */
-export function setChecked(item, shouldSet = true) {
-  const ariaAttr = item.getAttribute('role') === 'option' ? 'selected' : 'checked';
-  if (shouldSet) {
+export function setChecked(item, unset = false) {
+  const role = item.getAttribute('role');
+  let ariaAttr = 'current';
+  if (role?.endsWith('checkbox') || role?.endsWith('radio')) {
+    ariaAttr = 'checked';
+  } else if (role === 'option' || role === 'treeitem') {
+    ariaAttr = 'selected';
+  }
+  let text;
+  if (/** @type {HTMLAnchorElement} */ (item).href) {
+    text = 'page';
+  }
+  if (/** @type {LionCheckboxIndeterminate} */ (item).mixedState) {
+    text = 'mixed';
+  }
+  if (!unset) {
     item.setAttribute('checked', '');
-    item.setAttribute(`aria-${ariaAttr}`, 'true');
+    item.setAttribute(`aria-${ariaAttr}`, text || 'true');
   } else {
     item.removeAttribute('checked');
     item.setAttribute(`aria-${ariaAttr}`, 'false');

package/components/menu/test/lion-menu.test.js

@@ -1,3 +1,4 @@
 import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+import '@lion/ui/define/lion-menu.js';
 
-runInteractiveListMixinSuite();
+runInteractiveListMixinSuite({ tagString: 'lion-menu' });