@lion/ui 0.18.0-menu-system.4 → 0.18.0-menu-system.6

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>
@@ -289,7 +293,7 @@ const InteractiveListMixinImplementation = superclass =>
       }
 
       // @ts-ignore - focusableEl is safely used as HTMLElement here
-      if (!isInView(this._scrollTargetNode, focusableEl)) {
+      if (this.orientation === 'vertical' && !isInView(this._scrollTargetNode, focusableEl)) {
         focusableEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
@@ -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
      */
@@ -461,7 +474,6 @@ const InteractiveListMixinImplementation = superclass =>
          * 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,29 @@ 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) {
+          const pathname = location.pathname.endsWith('/')
+            ? location.pathname.substring(0, location.pathname.length - 1)
+            : location.pathname;
+          if (pathname === /** @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

@@ -18,8 +18,8 @@ const styles = css`
   /** 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;
+    height: 0;
+    width: 0;
   }
 
   [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
@@ -75,11 +75,13 @@ export const MoreButtonMenuMixin = superclass =>
       moreButton?.setAttribute('aria-expanded', 'false');
       const moreButtonMenu = document.createElement('div');
       moreButtonMenu.setAttribute('data-more-button-menu', '');
+      moreButtonMenu.setAttribute('tabindex', '-1');
       moreButtonWrapper.appendChild(moreButtonMenu);
       this._listNode.appendChild(moreButtonWrapper);
 
       const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
-        this.listItems.includes(element) && moreButtonMenu.contains(element);
+        (this.listItems.includes(element) && moreButtonMenu.contains(element)) ||
+        element === moreButtonMenu;
 
       moreButtonMenu.addEventListener(
         'focusin',
@@ -87,6 +89,9 @@ export const MoreButtonMenuMixin = superclass =>
           const target = /** @type {HTMLElement} */ (event?.target);
           if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
 
+          // If applicable hide any other L2 menus
+          this.querySelector('[level="2"]:has([data-open])')?._overlayCtrl?.hide();
+
           // A user did `Shift + Tab` from L2 menu to More menu
           if (target?.getAttribute('aria-expanded') === 'true') {
             // close L2 menu
@@ -110,31 +115,11 @@ export const MoreButtonMenuMixin = superclass =>
         }, 100);
       });
 
-      this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-
-      moreButton?.addEventListener('mousedown', () => {
-        this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
-        const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        // @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) return;
-        /** @type {HTMLElement | null} */
-        const firstInteractiveItem = moreButtonMenu.querySelector(
-          ':scope > [role="listitem"] > :is(a, button)',
-        );
-
-        firstInteractiveItem?.focus();
-        moreButtonMenu.setAttribute('data-open', '');
+        if (moreButtonMenu.getAttribute('data-open') === null) {
+          moreButtonMenu?.focus({ preventScroll: true });
+          moreButtonMenu.setAttribute('data-open', '');
+        }
       });
     }
 
@@ -186,6 +171,9 @@ export const MoreButtonMenuMixin = superclass =>
       const previousNodes = [];
       let { previousSibling } = listItem;
       while (previousSibling) {
+        if (previousSibling.nodeType === Node.ELEMENT_NODE) {
+          break;
+        }
         previousNodes.unshift(previousSibling);
         if (isMarkerComment(previousSibling)) {
           break;
@@ -196,6 +184,9 @@ export const MoreButtonMenuMixin = superclass =>
       const nextNodes = [];
       let { nextSibling } = listItem;
       while (nextSibling) {
+        if (nextSibling.nodeType === Node.ELEMENT_NODE) {
+          break;
+        }
         nextNodes.push(nextSibling);
 
         if (isMarkerComment(nextSibling)) {

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');
@@ -56,7 +75,8 @@ export function setChecked(item, shouldSet = true) {
  * @param {HTMLElement} item
  */
 export function toggleChecked(item) {
-  setChecked(item, !isChecked(item));
+  const shouldUnset = isChecked(item);
+  setChecked(item, shouldUnset);
 }
 
 /**

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

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