@crowdstrike/glide-core 0.5.2 → 0.6.0

package/dist/menu.test.basics.js

@@ -1,9 +1,9 @@
 import './menu.button.js';
+import './menu.link.js';
 import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';
-import { repeat } from 'lit/directives/repeat.js';
 import GlideCoreMenu from './menu.js';
-import GlideCoreMenuLink from './menu.link.js';
+import GlideCoreMenuOptions from './menu.options.js';
 import expectArgumentError from './library/expect-argument-error.js';
 import sinon from 'sinon';
 GlideCoreMenu.shadowRootOptions.mode = 'open';
@@ -16,43 +16,64 @@ it('has defaults', async () => {
     // eventually typechecked, which means supplying all required attributes and slots.
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
+    const options = component.querySelector('glide-core-menu-options');
     expect(component.getAttribute('size')).to.equal('large');
     expect(component.size).to.equal('large');
+    expect(options?.privateSize).to.equal('large');
 });
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
+    const target = component.querySelector('button');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(target?.getAttribute('aria-controls')).to.equal(options?.id);
+    expect(options?.ariaLabelledby).to.equal(target?.id);
     await expect(component).to.be.accessible();
 });
 it('can be opened', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
-    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const target = component.querySelector('button');
     expect(component.open).to.be.true;
-    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
     expect(target?.ariaExpanded).to.equal('true');
 });
 it('can have a default slot', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     const assignedElements = component.shadowRoot
         ?.querySelectorAll('slot')[1]
         .assignedElements();
-    expect(assignedElements?.at(0) instanceof GlideCoreMenuLink).to.be.true;
+    expect(assignedElements?.at(0) instanceof GlideCoreMenuOptions).to.be.true;
 });
 it('can have a target slot', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     const assignedElements = component.shadowRoot
         ?.querySelector('slot[name="target"]')
@@ -63,38 +84,47 @@ it('activates the first menu link by default', async () => {
     const component = await fixture(html `
     <glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="One"></glide-core-menu-link>
-      <glide-core-menu-link label="Two"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="One"></glide-core-menu-link>
+        <glide-core-menu-link label="Two"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>
   `);
-    const options = component.querySelectorAll('glide-core-menu-link');
-    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
-    expect(options[0].privateActive).to.be.true;
-    expect(options[1].privateActive).to.be.false;
-    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(links[0].privateActive).to.be.true;
+    expect(links[1].privateActive).to.be.false;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0].id);
 });
 it('activates the first menu button by default', async () => {
     const component = await fixture(html `
     <glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-button label="One"></glide-core-menu-button>
-      <glide-core-menu-button label="Two"></glide-core-menu-button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="One"></glide-core-menu-button>
+        <glide-core-menu-button label="Two"></glide-core-menu-button>
+      </glide-core-menu-options>
     </glide-core-menu>
   `);
-    const options = component.querySelectorAll('glide-core-menu-button');
-    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
-    expect(options[0].privateActive).to.be.true;
-    expect(options[1].privateActive).to.be.false;
-    expect(menu?.getAttribute('aria-activedescendant')).to.equal(options[0].id);
+    const buttons = component.querySelectorAll('glide-core-menu-button');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(buttons[0].privateActive).to.be.true;
+    expect(buttons[1].privateActive).to.be.false;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(buttons[0].id);
 });
 it('is not opened when initially `open` and its target is `disabled`', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target" disabled>Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
-    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const target = component.querySelector('button');
-    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.not.be.ok;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.be.ok;
     expect(target?.ariaExpanded).to.equal('false');
 });
 it('throws if it does not have a default slot', async () => {
@@ -123,7 +153,9 @@ it('throws if it does not have a "target" slot', async () => {
     const spy = sinon.spy();
     try {
         await fixture(html `<glide-core-menu>
-        <glide-core-menu-link label="Link"></glide-core-menu-link>
+        <glide-core-menu-options>
+          <glide-core-menu-link label="Link"></glide-core-menu-link>
+        </glide-core-menu-options>
       </glide-core-menu>`);
     }
     catch (error) {
@@ -133,29 +165,19 @@ it('throws if it does not have a "target" slot', async () => {
     }
     expect(spy.called).to.be.true;
 });
-it('does not throw if the default slot only contains whitespace', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-menu>
-        <button slot="target">Target</button>
-        ${repeat([], () => html `<glide-core-menu-link label="Link"></glide-core-menu-link>`)}
-      </glide-core-menu>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.notCalled).to.be.true;
-});
-it('sets accessibility attributes on the target', async () => {
+it('sets accessibility attributes', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     const target = component.querySelector('button');
+    const options = component.querySelector('glide-core-menu-options');
     expect(target?.getAttribute('aria-expanded')).to.equal('false');
     expect(target?.getAttribute('aria-haspopup')).to.equal('true');
     expect(target?.ariaExpanded).to.equal('false');
     expect(target?.ariaHasPopup).to.equal('true');
+    expect(options?.ariaLabelledby).to.equal(target?.id);
 });

package/dist/menu.test.focus.js

@@ -2,11 +2,15 @@ import './menu.link.js';
 import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreMenu from './menu.js';
+import GlideCoreMenuOptions from './menu.options.js';
 GlideCoreMenu.shadowRootOptions.mode = 'open';
 it('focuses the target on `focus()`', async () => {
     const component = await fixture(html `<glide-core-menu>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     component.focus();
     const target = component.querySelector('button');
@@ -16,31 +20,42 @@ it('focuses the target on `focus()`', async () => {
 it('closes when it loses focus', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     component.focus();
     await sendKeys({ press: 'Tab' });
-    const menu = component?.shadowRoot?.querySelector('[data-test="menu"]');
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
     expect(component.open).to.be.false;
-    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.false;
-    expect(menu?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).be.false;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
 });
-it('remains open when the menu focused', async () => {
+it('remains open when the options component is focused', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     component.focus();
-    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
-    assert(menu instanceof HTMLElement);
-    menu.focus();
+    const options = component.querySelector('glide-core-menu-options');
+    assert(options instanceof GlideCoreMenuOptions);
+    options.focus();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     expect(component.open).to.be.true;
-    expect(menu?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
 });
 it('remains open when an option is focused', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     component.focus();
     const option = component.querySelector('glide-core-menu-link');
@@ -51,16 +66,19 @@ it('remains open when an option is focused', async () => {
 it('sets the focused option as active', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
-      <glide-core-menu-button label="Button"></glide-core-menu-button>
-      <glide-core-menu-link label="Link"></glide-core-menu-link>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
     </glide-core-menu>`);
     component.focus();
     const target = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');
-    const menu = component.shadowRoot?.querySelector('[data-test="menu"]');
+    const options = component.querySelector('glide-core-menu-options');
     link?.focus();
     await elementUpdated(component);
     expect(target?.privateActive).to.be.false;
     expect(link?.privateActive).to.be.true;
-    expect(menu?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
 });

package/dist/menu.test.interactions.d.ts

@@ -1 +1,2 @@
 import './menu.link.js';
+import './menu.options.js';