@crowdstrike/glide-core 0.9.0 → 0.9.2

package/dist/menu.test.events.js

@@ -2,8 +2,10 @@
 import './menu.js';
 import './menu.link.js';
 import './menu.options.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-it('dispatches a "click" event when a link is clicked', async () => {
+import { assert, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
+it('dispatches one link "click" event when a link is selected via click', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -11,21 +13,113 @@ it('dispatches a "click" event when a link is clicked', async () => {
         <glide-core-menu-link label="Link"></glide-core-menu-link>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-link')?.click());
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    setTimeout(() => link.click());
     const event = await oneEvent(component, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
 });
-it('dispatches a "click" event when a button is clicked', async () => {
+it('dispatches one button "click" event when a button 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-button label="Link"></glide-core-menu-button>
+        <glide-core-menu-button label="Button"></glide-core-menu-button>
       </glide-core-menu-options>
     </glide-core-menu>`);
-    setTimeout(() => document.querySelector('glide-core-menu-button')?.click());
-    const event = await oneEvent(component, 'click');
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    setTimeout(() => button.click());
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one link "click" event when a link 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>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    const event = await oneEvent(link, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one button "click" event when a button 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-button label="Button"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Space' });
+    const event = await oneEvent(button, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one link "click" event when a link 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>`);
+    const spy = sinon.spy();
+    const link = component.querySelector('glide-core-menu-link');
+    assert(link);
+    link.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(link, 'click');
+    expect(event instanceof PointerEvent).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(link);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one button "click" event when a button 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-button label="Button"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>`);
+    const spy = sinon.spy();
+    const button = component.querySelector('glide-core-menu-button');
+    assert(button);
+    button.addEventListener('click', spy);
+    component.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(button, 'click');
     expect(event instanceof PointerEvent).to.be.true;
     expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(button);
+    expect(spy.callCount).to.equal(1);
 });

package/dist/menu.test.focus.js

@@ -69,7 +69,7 @@ it('remains open when an option is focused', async () => {
     expect(component.open).to.be.true;
     expect(defaultSlot?.checkVisibility()).to.be.true;
 });
-it('sets the focused option as active', async () => {
+it('sets an inactive option as active when focused', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -81,12 +81,35 @@ it('sets the focused option as active', async () => {
     // Wait for Floating UI.
     await aTimeout(0);
     component.focus();
-    const target = component.querySelector('glide-core-menu-button');
+    const button = component.querySelector('glide-core-menu-button');
     const link = component.querySelector('glide-core-menu-link');
     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(button?.privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(link?.id);
 });
+// Kind of an odd test. There's a comment in `#onDefaultSlotFocusin` that
+// explains it.
+it('sets an already active option as active when focused', async () => {
+    const component = await fixture(html `<glide-core-menu open>
+      <button slot="target">Target</button>
+
+      <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>`);
+    // Wait for Floating UI.
+    await aTimeout(0);
+    component.focus();
+    const button = component.querySelector('glide-core-menu-button');
+    const link = component.querySelector('glide-core-menu-link');
+    const options = component.querySelector('glide-core-menu-options');
+    button?.focus();
+    await elementUpdated(component);
+    expect(button?.privateActive).to.be.true;
+    expect(link?.privateActive).to.be.false;
+    expect(options?.getAttribute('aria-activedescendant')).to.equal(button?.id);
+});

package/dist/menu.test.interactions.js

@@ -412,7 +412,7 @@ it('closes when something outside of it is clicked', async () => {
     expect(options?.getAttribute('aria-activedescendant')).to.equal('');
     expect(target?.ariaExpanded).to.equal('false');
 });
-it('closes on Escape when the button has focus', async () => {
+it('closes on Escape', async () => {
     const component = await fixture(html `<glide-core-menu open>
       <button slot="target">Target</button>
 
@@ -422,7 +422,7 @@ it('closes on Escape when the button has focus', async () => {
     </glide-core-menu>`);
     // Wait for it to open
     await aTimeout(0);
-    component.querySelector('button')?.click();
+    component.focus();
     await sendKeys({ press: 'Escape' });
     const defaultSlot = component?.shadowRoot?.querySelector('slot:not([name])');
     const options = component.querySelector('glide-core-menu-options');
@@ -712,6 +712,7 @@ it('activates the first option on Meta + ArrowUp', async () => {
     links[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ up: 'Meta' });
     expect(links[0].privateActive).to.be.true;
     expect(links[1].privateActive).to.be.false;
     expect(options?.getAttribute('aria-activedescendant')).to.equal(links[0].id);
@@ -872,6 +873,7 @@ it('does not wrap on Meta + ArrowUp', async () => {
     await aTimeout(0);
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ up: 'Meta' });
     const link = component.querySelector('glide-core-menu-link');
     expect(link?.privateActive).to.be.true;
 });
@@ -910,5 +912,6 @@ it('does not wrap on ArrowDown', async () => {
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     await sendKeys({ down: 'Meta' });
     await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ up: 'Meta' });
     expect(options[1].privateActive).to.be.true;
 });

package/dist/modal.d.ts

@@ -10,10 +10,6 @@ declare global {
  *
  * @event close - Emitted when the Modal closes.
  *
- * @function showModal - A method on the `glide-core-modal` component to open the Modal programmatically.
- *
- * @function close - A method on the `glide-core-modal` component to close the Modal programmatically.
- *
  * @slot - The content of the modal.
  *
  * @slot header-actions - A slot for placing additional header actions. These are co-located with the close button.
@@ -36,9 +32,6 @@ export default class GlideCoreModal extends LitElement {
     showBackButton: boolean;
     /** Fixed-size options for the Modal. */
     size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Event called by consumers to programmatically close the Modal.
-     */
     close(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/modal.icon-button.test.basics.js

@@ -8,28 +8,28 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-modal-icon-button')).to.equal(GlideCoreModalIconButton);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
-    await expect(element).to.be.accessible();
+    const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    await expect(component).to.be.accessible();
 });
 it('renders and sets default attributes', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-modal-icon-button>Test</glide-core-modal-icon-button>
   `);
-    expect(element).to.be.ok;
-    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    expect(component).to.be.ok;
+    const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
     expect(buttonElement).to.be.not.null;
     expect(buttonElement).to.have.attribute('variant', 'tertiary');
 });
 it('adds an accessible label when given', async () => {
-    const element = await fixture(html `<glide-core-modal-icon-button label="test-label"
+    const component = await fixture(html `<glide-core-modal-icon-button label="test-label"
       >Test</glide-core-modal-icon-button
     >`);
-    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
     expect(buttonElement).to.have.attribute('label', 'test-label');
 });
 it('does not add an acceessible label when not given', async () => {
-    const element = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
-    const buttonElement = element.shadowRoot?.querySelector('glide-core-icon-button');
+    const component = await fixture(html `<glide-core-modal-icon-button>Test</glide-core-modal-icon-button>`);
+    const buttonElement = component.shadowRoot?.querySelector('glide-core-icon-button');
     expect(buttonElement).to.have.attribute('label', '');
 });
 it('throws if it does not have a default slot', async () => {

package/dist/modal.stories.d.ts

@@ -1,6 +1,7 @@
 import './button.js';
 import './icons/storybook.js';
 import './modal.js';
+import './modal.js';
 import './modal.tertiary-icon.js';
 import './tooltip.js';
 import type { Meta, StoryObj } from '@storybook/web-components';

package/dist/modal.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".body:focus-visible")}
+  `,css`
     /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
     @keyframes backdrop-fade-in {
       from {
@@ -130,10 +132,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       &:focus {
         outline: none;
       }
-
-      &:focus-visible {
-        ${focusOutline};
-      }
     }
 
     .footer {

package/dist/modal.tertiary-icon.test.basics.js

@@ -9,41 +9,41 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-modal-tertiary-icon')).to.equal(GlideCoreModalTertiaryIcon);
 });
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    await expect(element).to.be.accessible();
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    await expect(component).to.be.accessible();
 });
 it('renders and sets default attributes', async () => {
-    const element = await fixture(html `
+    const component = await fixture(html `
     <glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>
   `);
-    expect(element).to.be.ok;
-    const spanTag = element.shadowRoot?.querySelector('span');
+    expect(component).to.be.ok;
+    const spanTag = component.shadowRoot?.querySelector('span');
     expect(spanTag?.getAttribute('tabindex')).to.equal('0');
-    const toolip = element.shadowRoot?.querySelector('glide-core-tooltip');
-    expect(toolip).to.not.be.null;
+    const tooltip = component.shadowRoot?.querySelector('glide-core-tooltip');
+    expect(tooltip).to.not.be.null;
 });
 it('adds an accessible label when given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"
+    const component = await fixture(html `<glide-core-modal-tertiary-icon label="test-label"
       >Test</glide-core-modal-tertiary-icon
     >`);
-    const spanElement = element.shadowRoot?.querySelector('span');
+    const spanElement = component.shadowRoot?.querySelector('span');
     expect(spanElement).to.have.attribute('aria-label', 'test-label');
 });
 it('does not add an acceessible label when not given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    const spanElement = element.shadowRoot?.querySelector('span');
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    const spanElement = component.shadowRoot?.querySelector('span');
     expect(spanElement).to.not.have.attribute('aria-label');
 });
 it('sets the tooltip placement when attribute "tooltip-placement" is given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon tooltip-placement="right"
+    const component = await fixture(html `<glide-core-modal-tertiary-icon tooltip-placement="right"
       >Test</glide-core-modal-tertiary-icon
     >`);
-    const toolTip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
     expect(toolTip).to.have.attribute('placement', 'right');
 });
 it('sets the tooltip placement to "bottom" when attribute "tooltip-placement" is not given', async () => {
-    const element = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
-    const toolTip = element.shadowRoot?.querySelector('glide-core-tooltip');
+    const component = await fixture(html `<glide-core-modal-tertiary-icon>Test</glide-core-modal-tertiary-icon>`);
+    const toolTip = component.shadowRoot?.querySelector('glide-core-tooltip');
     expect(toolTip).to.have.attribute('placement', 'bottom');
 });
 it('throws if it does not have a default slot', async () => {

package/dist/modal.test.accessibility.js

@@ -3,47 +3,36 @@ import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreModal from './modal.js';
 GlideCoreModal.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    await expect(element).to.be.accessible();
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    await expect(component).to.be.accessible();
 });
 it('focuses the dialog upon opening', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
-    expect(element.shadowRoot?.activeElement).to.equal(dialogElement);
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
+    expect(component.shadowRoot?.activeElement).to.equal(dialogElement);
 });
 it('sets the tabindex on the dialog to "-1"', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const dialogElement = component.shadowRoot?.querySelector('dialog');
     expect(dialogElement?.getAttribute('tabindex')).to.equal('-1');
 });
 it('sets the "toolbar" role on the header-actions section', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const toolbar = element.shadowRoot?.querySelector('[role="toolbar"');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const toolbar = component.shadowRoot?.querySelector('[role="toolbar"');
     expect(toolbar).to.be.ok;
 });
 it('sets proper aria attributes and roles on the article', async () => {
-    const element = await fixture(html `<glide-core-modal label="Modal title">
-      Modal Content
-    </glide-core-modal>`);
-    element.showModal();
-    const content = element.shadowRoot?.querySelector('[role="region"');
+    const component = await fixture(html `<glide-core-modal label="Label">Content</glide-core-modal>`);
+    component.showModal();
+    const content = component.shadowRoot?.querySelector('[role="region"');
     expect(content).to.be.ok;
     expect(content?.tagName).to.equal('ARTICLE');
     expect(content?.getAttribute('aria-labelledby')).to.equal('heading');
     expect(content?.getAttribute('tabindex')).to.equal('0');
-    // Verify the aria-labelledby id attribute is found
-    const label = element.shadowRoot?.querySelector('#heading');
+    const label = component.shadowRoot?.querySelector('#heading');
     expect(label).to.be.ok;
     expect(label?.tagName).to.equal('H2');
 });