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

package/components/menu/src/InteractiveListMixin.js

@@ -1,10 +1,9 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable import/no-extraneous-dependencies */
 import { html, css, LitElement } from 'lit';
-import { SlotMixin, DisabledMixin } from '@lion/ui/core.js';
+import { SlotMixin, DisabledMixin, uuid } from '@lion/ui/core.js';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { MoreButtonMenuMixin } from './MoreButtonMenuMixin.js';
-import { uuid } from './utils/uuid.js';
 import { isInView } from './utils/isInView.js';
 import {
   isDisabled,
@@ -167,7 +166,7 @@ const InteractiveListMixinImplementation = superclass =>
         multipleChoice: { type: Boolean, attribute: 'multiple-choice' },
         // TODO: align with name of open-ui
         selectionFollowsFocus: { type: Boolean, attribute: 'selection-follows-focus' },
-        // TODO: align with name of open-ui => "wrap" in focsugroup
+        // TODO: align with name of open-ui => "wrap" in focusgroup
         rotateKeyboardNavigation: { type: Boolean, attribute: 'rotate-keyboard-navigation' },
         // TODO: align with name of open-ui
         noPreselect: { type: Boolean, attribute: 'no-preselect' },
@@ -293,7 +292,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' });
       }
 
@@ -556,7 +555,7 @@ const InteractiveListMixinImplementation = superclass =>
       // having hideVisually as hide mechanism (opening on focus, closing on blur).
       // N.B. this._listNode has `display:flex`. This means we need to add `text-wrap: nowrap;`
       // to avoid elems going over two lines, or give them a max-height based on measuring the height of one item.
-      // 2. N.B. hideVisually needs to be implementd in OverlayController.
+      // 2. N.B. hideVisually needs to be implemented in OverlayController.
       // 3. when the more menu opens a next level, MultiLevelListMixin will be applied to the host as well.
       // That means it knows when a child menu is open. If _subListMap of one of the items is open, we should hide more menu like this:
       // https://jsfiddle.net/a4ocktfp/19/
@@ -588,7 +587,7 @@ const InteractiveListMixinImplementation = superclass =>
         }
       });
 
-      this.__syncCurrentPageWithLocationHref(window.location);
+      this._syncCurrentPageWithLocationHref(window.location);
     }
 
     /**
@@ -817,10 +816,13 @@ const InteractiveListMixinImplementation = superclass =>
     /**
      * @param {Location} location
      */
-    __syncCurrentPageWithLocationHref(location) {
+    _syncCurrentPageWithLocationHref(location) {
       this.listItems.forEach(item => {
         if (/** @type {HTMLAnchorElement} */ (item).href) {
-          if (location.href.includes(/** @type {HTMLAnchorElement} */ (item).href)) {
+          const pathname = location.href.endsWith('/')
+            ? location.href.substring(0, location.href.length - 1)
+            : location.href;
+          if (pathname === /** @type {HTMLAnchorElement} */ (item).href) {
             setChecked(item);
           } else {
             setChecked(item, true);
@@ -831,7 +833,7 @@ const InteractiveListMixinImplementation = superclass =>
 
     /** @protected */
     _onPopState = () => {
-      this.__syncCurrentPageWithLocationHref(document.location);
+      this._syncCurrentPageWithLocationHref(document.location);
     };
   };
 // @ts-ignore

package/components/menu/src/LionMenu.js

@@ -187,7 +187,7 @@ export class LionMenu extends MultiLevelListMixin(LitElement) {
     }
 
     if (!multiple) {
-      // Uncheck all
+      // Uncheck all within group
       listItemsWithinGroup.forEach(listItem => {
         setChecked(listItem, true);
       });

package/components/menu/src/LionTree.js

@@ -22,7 +22,7 @@ export class LionTree extends MultiLevelListMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('level')) {
-      if (this.level > 0) {
+      if (this.level > 1) {
         this._listNode.setAttribute('role', 'group');
       }
       this.__setAriaLevelForListItems();

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/MultiLevelListMixin.js

@@ -3,10 +3,12 @@ import { html } from 'lit';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 // import { DisclosureMixin } from '@lion/ui/collapsible.js';
 import { InteractiveListMixin } from './InteractiveListMixin.js';
-
+import { isChecked, setChecked } from './utils/listItemInteractions.js';
 /**
  * @typedef {import('./InteractiveListMixin.js').LionItem} LionItem
  * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListHost} InteractiveList
+ * @typedef {typeof import('../../overlays/types/OverlayMixinTypes.js').OverlayHost} OverlayHost
+ * @typedef {import('./LionMenuOverlay.js').LionMenuOverlay} LionMenuOverlay
  */
 
 /**
@@ -37,8 +39,13 @@ const MultiLevelListMixinImplementation = superclass =>
      * @configure DisclosureMixin
      */
     get _invokerNode() {
-      // @ts-ignore - accessing static method and super property
-      return this.constructor._getFocusableInvokerEl(this.invokerNode) || super._invokerNode;
+      const ctor = /** @type {OverlayHost} */ (this.constructor);
+      if (ctor._getFocusableInvokerEl && this.invokerNode) {
+        // @ts-ignore - accessing static method and super property
+        return ctor._getFocusableInvokerEl(this.invokerNode);
+      }
+      // @ts-ignore
+      return super._invokerNode;
     }
 
     /**
@@ -84,6 +91,7 @@ const MultiLevelListMixinImplementation = superclass =>
       this.noPreselect = true;
       /**
        * @configure InteractiveListMixin
+       * @type {'activedescendant'|'roving-tabindex'|'tabbable-disclosure'}
        */
       this._activeMode = 'roving-tabindex';
       /**
@@ -184,12 +192,12 @@ const MultiLevelListMixinImplementation = superclass =>
      * @param {*} ev
      */
     _onListKeyDown(ev) {
-      const targetFromsubList = Array.from(this._subListMap).find(
+      const targetFromSubList = Array.from(this._subListMap).find(
         // @ts-ignore - contains method on InteractiveListHost
         ([, s]) => s === ev.target || s.contains(ev.target),
       );
 
-      if (targetFromsubList) {
+      if (targetFromSubList) {
         return;
       }
 
@@ -228,22 +236,51 @@ const MultiLevelListMixinImplementation = superclass =>
           if (this.orientation === 'horizontal' && parentListOfActiveItem) {
             // @ts-ignore - close method
             this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
+            if (
+              /** @type {InteractiveList & LionMenuOverlay} */ (parentListOfActiveItem)
+                ._onOverlayShow
+            ) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
           }
           break;
         case 'ArrowLeft':
           if (this.orientation === 'vertical' && parentListOfActiveItem) {
             // @ts-ignore - close method
             this.close();
-            // @ts-ignore - _onOverlayShow method
-            parentListOfActiveItem._onOverlayShow();
+            if (
+              /** @type {InteractiveList & LionMenuOverlay} */ (parentListOfActiveItem)
+                ._onOverlayShow
+            ) {
+              // @ts-ignore - _onOverlayShow method
+              /** @type {OverlayHost} */ (parentListOfActiveItem)._onOverlayShow();
+            }
           }
           break;
         /* no default */
       }
     }
 
+    /**
+     * @param {Location} location
+     */
+    _syncCurrentPageWithLocationHref(location) {
+      super._syncCurrentPageWithLocationHref(location);
+
+      this._subListMap.forEach(subList => {
+        subList.listItems.forEach(
+          /** @param {LionItem|HTMLElement} item */ item => {
+            // @ts-ignore
+            if (isChecked(item) && subList._invokerNode) {
+              // @ts-ignore
+              setChecked(subList._invokerNode);
+            }
+          },
+        );
+      });
+    }
+
     // /**
     //  * @enhance DisclosureMixin
     //  */

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

@@ -75,7 +75,8 @@ export function setChecked(item, unset = false) {
  * @param {HTMLElement} item
  */
 export function toggleChecked(item) {
-  setChecked(item, !isChecked(item));
+  const shouldUnset = isChecked(item);
+  setChecked(item, shouldUnset);
 }
 
 /**

package/components/menu/test/InteractiveListMixin.test.js

@@ -0,0 +1,3 @@
+import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+
+runInteractiveListMixinSuite();

package/components/menu/test/MoreButtonMenuMixin.test.js

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

package/components/menu/test/MultiLevelListMixin.test.js

@@ -0,0 +1,3 @@
+import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+
+runMultiLevelListMixinSuite();

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

@@ -0,0 +1,3 @@
+import { runLionMenuHybridSuite } from '../test-suites/LionMenuHybrid.suite.js';
+
+runLionMenuHybridSuite();

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

@@ -1,4 +1,11 @@
 import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
+import { runLionMenuSuite } from '../test-suites/LionMenu.suite.js';
 import '@lion/ui/define/lion-menu.js';
+import '@lion/ui/define/lion-menu-overlay.js';
 
 runInteractiveListMixinSuite({ tagString: 'lion-menu' });
+runMultiLevelListMixinSuite({ tagString: 'lion-menu', tagChildString: 'lion-menu-overlay' });
+runMoreButtonMenuMixinSuite({ tagString: 'lion-menu' });
+runLionMenuSuite({ tagString: 'lion-menu' });

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

@@ -0,0 +1,8 @@
+// import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import { runMoreButtonMenuMixinSuite } from '../test-suites/MoreButtonMenuMixin.suite.js';
+import '@lion/ui/define/lion-toolbar.js';
+
+// runInteractiveListMixinSuite({ tagString: 'lion-toolbar' }); // 1 test fails
+// runMultiLevelListMixinSuite({ tagString: 'lion-toolbar', tagChildString: 'lion-toolbar' }); // hangs
+runMoreButtonMenuMixinSuite({ tagString: 'lion-toolbar' });

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

@@ -0,0 +1,7 @@
+import { runInteractiveListMixinSuite } from '../test-suites/InteractiveListMixin.suite.js';
+// import { runMultiLevelListMixinSuite } from '../test-suites/MultiLevelListMixin.suite.js';
+import '@lion/ui/define/lion-tree.js';
+
+runInteractiveListMixinSuite({ tagString: 'lion-tree' });
+// TODO: fix failing tests. LionTree is missing a close function, should this be coming from the DisclosureMixin?
+// runMultiLevelListMixinSuite({ tagString: 'lion-tree', tagChildString: 'lion-tree' });

package/components/menu/test-helpers/mimicKeyPress.js

@@ -0,0 +1,9 @@
+/**
+ * @param {HTMLElement} el
+ * @param {string} key
+ * @param {string} code
+ */
+export function mimicKeyPress(el, key, code = '') {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
+  el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+}

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
+import { mimicKeyPress } from '../test-helpers/mimicKeyPress.js';
 
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
 
@@ -127,6 +128,28 @@ export function runInteractiveListMixinSuite(customConfig) {
       });
     });
 
+    describe('preselect', () => {
+      it('sets the checkedIndex to 0 by default when noPreselect is false', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <div role="menuitem" id="item1">Item 1</div>
+          </${tag}>
+        `);
+        if (!el.noPreselect) {
+          expect(el.checkedIndex).to.equal(0);
+        }
+      });
+
+      it('sets the checkedIndex to -1 when noPreselect is true', async () => {
+        const el = await fixture(html`
+          <${tag} no-preselect>
+            <div role="menuitem" id="item1">Item 1</div>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.equal(-1);
+      });
+    });
+
     describe('Programmatic interaction', () => {
       // If we have the item line directly in the fixture the linting rule lit-a11y/role-has-required-aria-attrs
       // will fail. Inside our code we set the required aria attributes, but the linter doesn't know that.
@@ -155,7 +178,6 @@ export function runInteractiveListMixinSuite(customConfig) {
             ${item(2, 'option')}
           </${tag}>
         `);
-        console.debug('listItems', el.listItems);
         const item1 = el.listItems[1];
         expect(item1.getAttribute('aria-selected')).to.equal('false');
 
@@ -211,7 +233,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('set checked state sets aria-checked attribute with role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
-          <${tag}>
+          <${tag} multiple-choice>
             ${item(1, 'menuitemcheckbox')}
             ${item(2, 'menuitemcheckbox')}
           </${tag}>
@@ -240,7 +262,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('can set checked state to "mixed" for role="menuitemcheckbox"', async () => {
         const el = await fixture(html`
-          <${tag}>
+          <${tag} multiple-choice>
             ${item(1, 'menuitemcheckbox')}
             ${item(2, 'menuitemcheckbox')}
           </${tag}>
@@ -256,7 +278,7 @@ export function runInteractiveListMixinSuite(customConfig) {
 
       it('does not allow to set checkedIndex or activeIndex to be out of bound', async () => {
         const el = await fixture(html`
-          <${tag} has-no-default-selected autocomplete="list">
+          <${tag} no-preselect>
             <div role="menuitem" id="item1">Item 1</div>
           </${tag}>
         `);
@@ -284,15 +306,143 @@ export function runInteractiveListMixinSuite(customConfig) {
       });
     });
 
+    it('sets aria-current="page" when the location href matches the item href', async () => {
+      const el = await fixture(html`
+        <${tag}>
+          <div role="menuitem" id="item0">
+            <a href="${window.location.href}">Item 0</a>
+          </div>
+            <div role="menuitem" id="item1">
+              <a href="#bar">Item 1</a>
+          </div>
+        </${tag}>
+      `);
+      const item0 = el.listItems[0];
+      expect(item0.getAttribute('aria-current')).to.equal('page');
+    });
+
     // Copy tests from ListboxMixin. Later, make this mixin a fundament of the ListboxMixin
 
     // orientation
     // multipleChoice
     // selectionFollowsFocus
     // rotateKeyboardNavigation
-    // noPreselect
     // _scrollTargetNode
 
+    describe('Interactions', () => {
+      describe('Keyboard navigation', () => {
+        it('navigates between items on [ArrowDown] [ArrowUp] keys', async () => {
+          const el = await fixture(html`
+            <${tag}>
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(1);
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(2);
+          mimicKeyPress(_listNode, 'ArrowUp');
+          expect(el.activeIndex).to.be.equal(1);
+        });
+
+        it('navigates between items on [ArrowRight] [ArrowLeft] keys when orientation is "horizontal" and _activeMode="tabbable-disclosure"', async () => {
+          const el = await fixture(html`
+            <${tag} orientation="horizontal">
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+          el._activeMode = 'tabbable-disclosure';
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowRight');
+          expect(el.activeIndex).to.be.equal(1);
+          mimicKeyPress(_listNode, 'ArrowRight');
+          expect(el.activeIndex).to.be.equal(2);
+          mimicKeyPress(_listNode, 'ArrowLeft');
+          expect(el.activeIndex).to.be.equal(1);
+        });
+
+        it('stops navigation by default at end of option list', async () => {
+          const el = await fixture(html`
+            <${tag}>
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 0;
+
+          mimicKeyPress(_listNode, 'ArrowUp');
+          expect(el.activeIndex).to.be.equal(0);
+
+          el.activeIndex = 2;
+          mimicKeyPress(_listNode, 'ArrowDown');
+          expect(el.activeIndex).to.be.equal(2);
+        });
+
+        it('navigates to first and last option with [Home] and [End] keys', async () => {
+          const el = await fixture(html`
+            <${tag} orientation="horizontal">
+              <div role="listitem" id="item-0">
+                <button data-invoker>Item 0</button>
+              </div>
+              <div role="listitem" id="item-1">
+                <a href="#baz">Item 1</a>
+              </div>
+              <div role="listitem" id="item-2">
+                <a href="#foobar">Item 2</a>
+              </div>
+            </${tag}>
+          `);
+
+          const { _listNode } = el;
+
+          // Normalize
+          el.activeIndex = 2;
+
+          mimicKeyPress(_listNode, 'Home');
+          expect(el.activeIndex).to.equal(0);
+          mimicKeyPress(_listNode, 'End');
+          expect(el.activeIndex).to.equal(2);
+        });
+      });
+    });
+
     describe('Widget extensions', () => {
       it('can be extended to [role=listbox]', async () => {});
       it('can be extended to [role=menu]', async () => {});