@lion/ui 0.18.0-menu-system.4 → 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
      */
@@ -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,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/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' });

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { expect, html, fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { expect, html, fixture as _fixture, unsafeStatic, defineCE } from '@open-wc/testing';
 import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
 
 class InteractiveListClass extends InteractiveListMixin(LitElement) {}
@@ -20,10 +20,15 @@ const supportedRoles = [
 ];
 
 /**
- * @typedef {Object} TestConfig
+ * @typedef {import('../src/LionMenu.js').LionMenu} LionMenu
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ *
+ * * @typedef {Object} TestConfig
  * @property {string} tagString
  */
 
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionMenu>} */ (_fixture);
+
 /**
  * @param {TestConfig} [customConfig]
  */
@@ -122,6 +127,163 @@ export function runInteractiveListMixinSuite(customConfig) {
       });
     });
 
+    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.
+      const item = /** @param {number} i, @param {string} role */ (i, role) => html`
+        <div role="${role}" id="item${i}">Item ${i}</div>
+      `;
+
+      it('set checked state sets aria-current attribute with role="listitem"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'listitem')}
+            ${item(2, 'listitem')}
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-current')).to.equal('true');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-current')).to.equal('false');
+      });
+
+      it('set checked state sets aria-selected attribute with role="option"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'option')}
+            ${item(2, 'option')}
+          </${tag}>
+        `);
+        console.debug('listItems', el.listItems);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-selected')).to.equal('false');
+
+        el.setCheckedIndex(1);
+        expect(item1.getAttribute('aria-selected')).to.equal('true');
+
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-selected')).to.equal('false');
+      });
+
+      it('set checked state sets aria-selected attribute with role="treeitem"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'treeitem')}
+            ${item(2, 'treeitem')}
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        // @ts-ignore - test element with InteractiveListMixin properties
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-selected')).to.equal('true');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-selected')).to.equal('false');
+      });
+
+      it('set checked state sets aria-current attribute with role="menuitem"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'menuitem')}
+            ${item(2, 'menuitem')}
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-current')).to.equal('true');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-current')).to.equal('false');
+      });
+
+      it('set checked state sets aria-checked attribute with role="menuitemradio"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'menuitemradio')}
+            ${item(2, 'menuitemradio')}
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-checked')).to.equal('true');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-checked')).to.equal('false');
+      });
+
+      it('set checked state sets aria-checked attribute with role="menuitemcheckbox"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'menuitemcheckbox')}
+            ${item(2, 'menuitemcheckbox')}
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-checked')).to.equal('true');
+        el.setCheckedIndex(0);
+        // As this is multiple choice it doesn't unset the checked state
+        expect(item1.getAttribute('aria-checked')).to.equal('true');
+      });
+
+      it('can set checked state to "page" for role="listitem"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <a role="listitem" id="item1" href="#">Item 1</a>
+            <a role="listitem" id="item2" href="#">Item 2</a>
+          </${tag}>
+        `);
+        el.setCheckedIndex(1);
+        const item1 = el.listItems[1];
+        expect(item1.getAttribute('aria-current')).to.equal('page');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-current')).to.equal('false');
+      });
+
+      it('can set checked state to "mixed" for role="menuitemcheckbox"', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            ${item(1, 'menuitemcheckbox')}
+            ${item(2, 'menuitemcheckbox')}
+          </${tag}>
+        `);
+        const item1 = el.listItems[1];
+        // @ts-ignore - not yet supported property
+        item1.mixedState = true;
+        el.setCheckedIndex(1);
+        expect(item1.getAttribute('aria-checked')).to.equal('mixed');
+        el.setCheckedIndex(0);
+        expect(item1.getAttribute('aria-checked')).to.equal('mixed');
+      });
+
+      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">
+            <div role="menuitem" id="item1">Item 1</div>
+          </${tag}>
+        `);
+        expect(() => {
+          el.checkedIndex = -1;
+          el.checkedIndex = 1;
+        }).to.not.throw();
+        expect(el.checkedIndex).to.equal(-1);
+      });
+
+      it('unsets checked on other options when option becomes checked', async () => {
+        const el = await fixture(html`
+          <${tag}>
+            <div role="menuitem" id="item1">Item 1</div>
+            <div role="menuitem" id="item2">Item 2</div>
+          </${tag}>
+        `);
+        const { listItems } = el;
+        el.setCheckedIndex(0);
+        expect(listItems[0].hasAttribute('checked')).to.be.true;
+        expect(listItems[1].hasAttribute('checked')).to.be.false;
+        el.setCheckedIndex(1);
+        expect(listItems[0].hasAttribute('checked')).to.be.false;
+        expect(listItems[1].hasAttribute('checked')).to.be.true;
+      });
+    });
+
     // Copy tests from ListboxMixin. Later, make this mixin a fundament of the ListboxMixin
 
     // orientation