@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/menu.test.interactions.js

@@ -0,0 +1,664 @@
+import './menu.link.js';
+import './menu.options.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreMenu from './menu.js';
+GlideCoreMenu.shadowRootOptions.mode = 'open';
+it('opens when clicked', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('does not open when clicked when its target is `disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" disabled>Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('does not open when clicked when its target is `aria-disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button aria-disabled="true" slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('opens on Enter', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'Enter' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on ArrowUp', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'ArrowUp' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on ArrowDown', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens on Space', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.focus();
+    await sendKeys({ press: ' ' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('opens when opened programmatically', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('does not open when opened programmatically and its target is `disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target" disabled>Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('does not open when opened programmatically and its target is `aria-disabled`', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button aria-disabled="true" slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.open = true;
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+// See the `document` click listener comment in `menu.ts` for an explanation.
+it('opens when opened programmatically via the click handler of another element', async () => {
+    const div = document.createElement('div');
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`, { parentNode: div });
+    const anotherElement = document.createElement('button');
+    anotherElement.addEventListener('click', () => (component.open = true));
+    div.append(anotherElement);
+    anotherElement.click();
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    const link = component.querySelector('glide-core-menu-link');
+    expect(component.open).to.be.true;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+    expect(target?.ariaExpanded).to.equal('true');
+});
+it('sets `privateSize` on the options component when `size` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.size = 'small';
+    const options = component.querySelector('glide-core-menu-options');
+    expect(options?.privateSize).to.equal('small');
+});
+it('closes when clicked', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when something outside of it is clicked', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    document.body.click();
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes on Escape when the button has focus', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await sendKeys({ press: 'Escape' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('glide-core-menu-link')?.click();
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.focus();
+    component
+        .querySelector('glide-core-menu-link')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'Enter' });
+    await elementUpdated(component);
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('closes when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <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: ' ' });
+    const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
+    const options = component.querySelector('glide-core-menu-options');
+    const target = component.querySelector('button');
+    expect(component.open).to.be.false;
+    expect(defaultSlot?.checkVisibility({ checkVisibilityCSS: true })).not.ok;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(target?.ariaExpanded).to.equal('false');
+});
+it('activates the first menu link by default', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    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>
+      <button slot="target">Target</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>
+  `);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    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')).equal(buttons[0]?.id);
+});
+it('activates a menu link on "mouseover"', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <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 links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
+it('activates a menu button on "mouseover"', async () => {
+    const component = await fixture(html `
+    <glide-core-menu open>
+      <button slot="target">Target</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 buttons = component.querySelectorAll('glide-core-menu-button');
+    const options = component.querySelector('glide-core-menu-options');
+    buttons[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(buttons[0].privateActive).to.be.false;
+    expect(buttons[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).equal(buttons[1].id);
+});
+it('activates the next option on ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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-link label="Three"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowDown' });
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.false;
+    expect(links[2].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[2].id);
+});
+it('activates the previous option on ArrowUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowUp' });
+    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 option on Home', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'Home' });
+    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 option on PageUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'PageUp' });
+    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 option on ArrowUp + Meta', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'ArrowUp' });
+    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 last option on End', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    await sendKeys({ press: 'End' });
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
+it('activates the last option on PageDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'PageDown' });
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
+it('activates the last option on Meta + ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    component.focus();
+    const links = component.querySelectorAll('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    links[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ up: 'Meta' });
+    expect(links[0].privateActive).to.be.false;
+    expect(links[1].privateActive).to.be.true;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(links[1].id);
+});
+it('sets `aria-activedescendant` on open', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const link = component.querySelector('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
+});
+it('sets `aria-activedescendant` on close', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    await elementUpdated(component);
+    const options = component.querySelector('glide-core-menu-options');
+    expect(options?.getAttribute('aria-activedescendant')).to.equal('');
+});
+it('sets `aria-expanded` on open', async () => {
+    const component = await fixture(html `<glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const button = component.querySelector('button');
+    expect(button?.getAttribute('aria-expanded')).to.equal('true');
+});
+it('sets `aria-expanded` on close', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-link label="Link"></glide-core-menu-link>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    component.querySelector('button')?.click();
+    const button = component.querySelector('button');
+    expect(button?.getAttribute('aria-expanded')).to.equal('false');
+});
+it('does not wrap on ArrowUp', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    await sendKeys({ press: 'ArrowUp' });
+    const link = component.querySelector('glide-core-menu-link');
+    expect(link?.privateActive).to.be.true;
+});
+it('does not wrap on ArrowDown', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <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>
+  `);
+    component.querySelector('button')?.click();
+    const options = component.querySelectorAll('glide-core-menu-link');
+    options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await sendKeys({ press: 'ArrowDown' });
+    expect(options[1].privateActive).to.be.true;
+});

package/dist/modal.icon-button.js

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var p=(t,e,o,a)=>{for(var i=a>1?void 0:a?E(e,o):e,f=t.length-1,n;f>=0;f--)(n=t[f])&&(i=(a?n(e,o,i):n(i))||i);return a&&i&&u(e,o,i),i};var c=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(c(t,e,"read from private field"),o?o.call(t):e.get(t)),d=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var h=(t,e,o)=>(c(t,e,"access private method"),o);var l,s,v;import"./icon-button.js";import{LitElement as b,html as R}from"lit";import{createRef as S,ref as w}from"lit/directives/ref.js";import{customElement as y,property as L}from"lit/decorators.js";import{ifDefined as T}from"lit/directives/if-defined.js";import{owSlot as g}from"./library/ow.js";import $ from"./modal.icon-button.styles.js";let r=class extends b{constructor(){super(...arguments);d(this,s);this.label="";d(this,l,S())}firstUpdated(){g(m(this,l).value)}render(){return R`<glide-core-icon-button label="${T(this.label)}" variant="tertiary"><slot @slotchange="${h(this,s,v)}" ${w(m(this,l))}></slot></glide-core-icon-button>`}};l=new WeakMap,s=new WeakSet,v=function(){g(m(this,l).value)},r.shadowRootOptions={...b.shadowRootOptions,mode:"closed"},r.styles=$,p([L()],r.prototype,"label",2),r=p([y("glide-core-modal-icon-button")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(t,e,o,l){var r,i=arguments.length,n=i<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,l);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(n=(i<3?r(n):i>3?r(e,o,n):r(e,o))||n);return i>3&&n&&Object.defineProperty(e,o,n),n};import"./icon-button.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./modal.icon-button.styles.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></glide-core-icon-button>`}#t;#e(){owSlot(this.#t.value)}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;