@ordergroove/offers 2.45.6 → 2.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.45.6",
+  "version": "2.46.0",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -46,8 +46,8 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.9.8",
+    "@ordergroove/offers-templates": "^0.10.0",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "60f759b8f2452b4569e6e5d0f6c8e06c96581d8e"
+  "gitHead": "29fe0f44f5d9dc13b9c8a150b894b5a99c31cd8d"
 }

package/src/components/Tooltip.js

@@ -1,9 +1,32 @@
 import { LitElement, html, css } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+
+const ACTIVATION_TYPES = {
+  AUTOMATIC: 'automatic',
+  MANUAL: 'manual'
+};
 
 export class Tooltip extends LitElement {
+  constructor() {
+    super();
+    this.triggerLabel = 'Show tooltip';
+    this.open = false;
+    /** Default is "automatic" for backwards compatibility with existing templates */
+    this.activationType = ACTIVATION_TYPES.AUTOMATIC;
+  }
+
   static get properties() {
     return {
-      placement: { type: String, default: 'bottom' }
+      placement: { type: String, default: 'bottom' },
+      /** Set the aria-label attribute of the trigger. */
+      triggerLabel: { type: String, attribute: 'trigger-label' },
+      /**
+       * "automatic" - show tooltip on hover and focus
+       * "manual" - show tooltip on hover and click
+       */
+      activationType: { type: String, attribute: 'activation-type' },
+      /** Whether the tooltip is showing. Internal property; only here so that we re-render when it changes */
+      open: { type: Boolean, attribute: false }
     };
   }
 
@@ -19,11 +42,27 @@ export class Tooltip extends LitElement {
         z-index: 9;
       }
 
+      /* reset default button styles */
+      button.trigger {
+        all: unset;
+      }
+
+      /* do not reset the button's default focus outline */
+      button.trigger:focus {
+        outline: revert;
+      }
+
       .trigger {
         display: block;
         cursor: pointer;
       }
 
+      /* for manual activation, hide the content completely from screen readers when the tooltip is closed */
+      /* otherwise, interactive elements may receive focus even when they are not visible */
+      [data-manual] .content {
+        visibility: hidden;
+      }
+
       .content {
         box-sizing: border-box;
         font-family: var(--og-tooltip-family, inherit);
@@ -152,9 +191,8 @@ export class Tooltip extends LitElement {
         border-left: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
-      .tooltip:hover .content,
-      .trigger:focus + .content,
-      .content:focus-within {
+      .tooltip[data-open] .content {
+        visibility: visible;
         opacity: 1;
         width: 200px;
         pointer-events: auto;
@@ -165,12 +203,22 @@ export class Tooltip extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.recalculatePosition = this.recalculatePosition.bind(this);
-    this.addEventListener('mouseenter', this.recalculatePosition);
-    this.addEventListener('focusin', this.recalculatePosition);
+    this.abortController = new AbortController();
+    const signal = this.abortController.signal;
+
+    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this), { signal });
+    this.addEventListener('mouseleave', this.handleMouseLeave.bind(this), { signal });
+    this.addEventListener('focusin', this.handleFocusIn.bind(this), { signal });
+    this.addEventListener('focusout', this.handleFocusOut.bind(this), { signal });
+    this.addEventListener('keydown', this.handleKeyDown.bind(this), { signal });
+
+    document.addEventListener('click', this.handleDocumentClick.bind(this), { signal });
   }
 
-  recalculatePosition() {
+  async recalculatePosition() {
+    // wait for state changes to apply
+    await this.updateComplete;
+    if (!this.open) return;
     const trigger = this.shadowRoot.querySelector('.trigger');
     const triggerRect = trigger.getBoundingClientRect();
     const content = this.shadowRoot.querySelector('.content');
@@ -181,19 +229,83 @@ export class Tooltip extends LitElement {
       content.style.top = `${(-1 * contentRect.height + triggerRect.height) / 2}px`;
   }
 
+  handleMouseEnter() {
+    this.open = true;
+    this.recalculatePosition();
+  }
+
+  handleMouseLeave() {
+    this.open = false;
+  }
+
+  handleFocusIn() {
+    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
+    this.open = true;
+    this.recalculatePosition();
+  }
+
+  handleFocusOut(event) {
+    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
+    // keep the tooltip open if we're moving focus to another element inside the tooltip
+    if (!this.contains(event.relatedTarget)) {
+      this.open = false;
+    }
+  }
+
+  handleKeyDown(event) {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
+    // close the tooltip on Escape press
+    if (event.key === 'Escape' && this.open) {
+      this.open = false;
+      event.stopPropagation();
+    }
+  }
+
+  handleClick() {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
+    this.open = !this.open;
+    this.recalculatePosition();
+  }
+
+  handleDocumentClick(event) {
+    if (this.activationType !== ACTIVATION_TYPES.MANUAL || !this.open) return;
+    // close the tooltip if the user clicks outside of it
+    if (!this.contains(event.target)) {
+      this.open = false;
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('mouseenter', this.recalculatePosition);
-    this.removeEventListener('focusin', this.recalculatePosition);
+    // remove event listeners
+    this.abortController.abort();
   }
 
   render() {
+    // allow removing aria-label by setting trigger-label to any falsy value
+    // e.g. if the content inside the tooltip is sufficient
+    const triggerLabel = this.triggerLabel ? this.triggerLabel : undefined;
+
     return html`
-      <span class="tooltip">
-        <span class="trigger" tabindex="0">
-          <slot name="trigger">${this.trigger}</slot>
-        </span>
-        <div class="content ${this.placement || 'bottom'}">
+      <span class="tooltip" ?data-open="${this.open}" ?data-manual="${this.activationType === ACTIVATION_TYPES.MANUAL}">
+        ${this.activationType === ACTIVATION_TYPES.MANUAL
+          ? html`
+              <button
+                class="trigger"
+                aria-label="${ifDefined(triggerLabel)}"
+                aria-expanded="${this.open}"
+                aria-controls="tooltip-content"
+                @click="${this.handleClick}"
+              >
+                <slot name="trigger">${this.trigger}</slot>
+              </button>
+            `
+          : html`
+              <span class="trigger" tabindex="0" aria-label="${ifDefined(triggerLabel)}">
+                <slot name="trigger">${this.trigger}</slot>
+              </span>
+            `}
+        <div class="content ${this.placement || 'bottom'}" role="tooltip" id="tooltip-content">
           <slot name="content">${this.content}</slot>
         </div>
       </span>

package/src/components/__tests__/Tooltip.spec.js

@@ -16,17 +16,20 @@ describe('Tooltip', () => {
     );
   });
 
-  const getTooltip = async placement => {
+  const getTooltip = async ({ placement, activationType } = {}) => {
     const element = new Tooltip();
     if (placement) {
       element.setAttribute('placement', placement);
     }
+    if (activationType) {
+      element.setAttribute('activation-type', activationType);
+    }
     await appendToBody(element);
     return element;
   };
 
   const checkContentStyles = async (expectedStyles, placement, contentStyles) => {
-    const element = await getTooltip(placement);
+    const element = await getTooltip({ placement });
     const contentDiv = element.shadowRoot.querySelector('.content');
 
     // Modify shadow content
@@ -36,7 +39,8 @@ describe('Tooltip', () => {
       });
     }
 
-    element.recalculatePosition();
+    element.open = true;
+    await element.recalculatePosition();
     Object.keys(expectedStyles).forEach(key => expect(contentDiv.style[key]).toEqual(expectedStyles[key]));
   };
 
@@ -75,4 +79,211 @@ describe('Tooltip', () => {
   it('should not set style properties if placement is top-left', async () => {
     await checkContentStyles({ top: '', left: '' }, 'top-left');
   });
+
+  const ACTIVATION_TYPES = ['automatic', 'manual'];
+
+  ACTIVATION_TYPES.forEach(activationType => {
+    it(`${activationType} should show tooltip on mouseenter`, async () => {
+      const element = await getTooltip({ activationType });
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('mouseenter'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it(`${activationType} should hide tooltip on mouseleave`, async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      element.dispatchEvent(new Event('mouseleave'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it(`${activationType} should remove aria-label when trigger-label is empty`, async () => {
+      const element = await getTooltip({ activationType });
+      element.setAttribute('trigger-label', '');
+      await element.updateComplete;
+
+      const trigger = element.shadowRoot.querySelector('.trigger');
+      expect(trigger.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it(`${activationType} should set aria-label when trigger-label has value`, async () => {
+      const element = await getTooltip({ activationType });
+      element.setAttribute('trigger-label', 'Custom tooltip label');
+      await element.updateComplete;
+
+      const trigger = element.shadowRoot.querySelector('.trigger');
+      expect(trigger.getAttribute('aria-label')).toBe('Custom tooltip label');
+    });
+  });
+
+  describe('automatic activation behavior', () => {
+    it('should show tooltip on focusin', async () => {
+      const element = await getTooltip();
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('focusin'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('should hide tooltip on focusout when focus moves outside', async () => {
+      const element = await getTooltip();
+      const externalElement = document.createElement('div');
+      document.body.appendChild(externalElement);
+
+      element.open = true;
+      await element.updateComplete;
+
+      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: externalElement });
+      element.dispatchEvent(focusOutEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+      document.body.removeChild(externalElement);
+    });
+
+    it('should keep tooltip open on focusout when focus stays within tooltip', async () => {
+      const element = await getTooltip();
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      element.open = true;
+      await element.updateComplete;
+
+      // focus moving out of one element and back to the trigger
+      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: trigger });
+      element.dispatchEvent(focusOutEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('should not open tooltip on click', async () => {
+      const element = await getTooltip();
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      expect(element.open).toBe(false);
+
+      trigger.click();
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should not do anything when clicking outside tooltip', async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      const outsideClick = new Event('click', { bubbles: true });
+      document.body.dispatchEvent(outsideClick);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+
+    it('updates attributes', async () => {
+      const element = await getTooltip();
+      element.open = true;
+      await element.updateComplete;
+
+      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.opacity).toBe('1');
+
+      element.open = false;
+      await element.updateComplete;
+      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.opacity).toBe('0');
+    });
+  });
+
+  describe('manual activation behavior', () => {
+    it('should toggle tooltip on click', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      const trigger = element.shadowRoot.querySelector('.trigger');
+
+      expect(element.open).toBe(false);
+
+      trigger.click();
+      await element.updateComplete;
+      expect(element.open).toBe(true);
+
+      trigger.click();
+      await element.updateComplete;
+      expect(element.open).toBe(false);
+    });
+
+    it('should not open tooltip on focus', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+
+      expect(element.open).toBe(false);
+
+      element.dispatchEvent(new Event('focusin'));
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should close tooltip when clicking outside', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      const outsideClick = new Event('click', { bubbles: true });
+      document.body.dispatchEvent(outsideClick);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('updates attributes', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('true');
+      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.visibility).toBe('visible');
+      expect(style.opacity).toBe('1');
+
+      element.open = false;
+      await element.updateComplete;
+      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('false');
+      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
+      expect(style.visibility).toBe('hidden');
+      expect(style.opacity).toBe('0');
+    });
+
+    it('should close tooltip on Escape key', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      element.dispatchEvent(escapeEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(false);
+    });
+
+    it('should not close tooltip on other keys', async () => {
+      const element = await getTooltip({ activationType: 'manual' });
+      element.open = true;
+      await element.updateComplete;
+
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Alt' });
+      element.dispatchEvent(enterEvent);
+      await element.updateComplete;
+
+      expect(element.open).toBe(true);
+    });
+  });
 });