lightning-base-components 1.28.14-alpha → 1.28.16-alpha

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -11,7 +11,10 @@ import AriaObserver from 'lightning/ariaObserver';
 import { features } from 'lightning/features';
 export { Direction } from 'lightning/positionLibrary';
 export const BUBBLE_PREFIX = `salesforce-lightning-tooltip-bubble`;
-const BUBBLE_ID = `${BUBBLE_PREFIX}_${guid()}`;
+const BUBBLE_MODAL_PREFIX = `salesforce-lightning-tooltip-modal-portal`;
+const BUBBLE_GUID = guid();
+const BUBBLE_ID = `${BUBBLE_PREFIX}_${BUBBLE_GUID}`;
+const BUBBLE_MODAL_ID = `${BUBBLE_MODAL_PREFIX}_${BUBBLE_GUID}`;
 function isResizeObserverSupported() {
     return window.ResizeObserver != null;
 }
@@ -23,6 +26,9 @@ function getCachedBubbleElement() {
             is: LightningPrimitiveBubble,
         });
         CACHED_BUBBLE_ELEMENT.contentId = BUBBLE_ID;
+        CACHED_BUBBLE_ELEMENT.contentModalPortalId = features.enableHelptextA11yInModal
+            ? BUBBLE_MODAL_ID
+            : undefined;
         CACHED_BUBBLE_ELEMENT.style.position = 'absolute';
         CACHED_BUBBLE_ELEMENT.style.minWidth = '75px';
         CACHED_BUBBLE_ELEMENT.disableVisibilityChangeOnLeave = true;
@@ -30,6 +36,20 @@ function getCachedBubbleElement() {
     return CACHED_BUBBLE_ELEMENT;
 }
 const ARIA_DESCRIBEDBY = 'aria-describedby';
+const MODAL_SELECTOR = '[data-modal][aria-modal="true"]';
+const MODAL_TOOLTIP_PORTAL_SELECTOR = '[data-modal-tooltip-portal]';
+const BUBBLE_BODY_SELECTOR = '.slds-popover__body';
+function findTooltipPortalElement(target) {
+    if (import.meta.env.SSR || !target) {
+        return null;
+    }
+    const dialog = target.closest?.(MODAL_SELECTOR);
+    const HTMLElementCtor = globalThis?.HTMLElement;
+    if (!dialog || !HTMLElementCtor || !(dialog instanceof HTMLElementCtor)) {
+        return null;
+    }
+    return dialog.querySelector?.(MODAL_TOOLTIP_PORTAL_SELECTOR);
+}
 const NUBBIN_SIZE = 16;
 const NUBBIN_OFFSET = 24;
 export const TooltipType = {
@@ -51,6 +71,9 @@ export class Tooltip {
     _target;
     _element;
     _type;
+    boundHandleTooltipMouseLeave;
+    _modalPortalElement = null;
+    _isTooltipInModal = false;
     constructor(value, config) {
         assert(!!config.target, 'target for tooltip is undefined or missing');
         this.value = value;
@@ -76,6 +99,10 @@ export class Tooltip {
         this.handleDocumentTouch = this.handleDocumentTouch.bind(this);
         this.handleEscape = this.handleEscape.bind(this);
         this.hide = this.hide.bind(this);
+        if (features.enableTooltipFlashingFix) {
+            this.boundHandleTooltipMouseLeave =
+                this._handleTooltipMouseLeave.bind(this);
+        }
     }
     detach() {
         this._disabled = true;
@@ -106,10 +133,18 @@ export class Tooltip {
             this._initialized = true;
         }
     }
+    getDescriptionElement() {
+        const { _modalPortalElement, _isTooltipInModal } = this;
+        return features.enableHelptextA11yInModal && _isTooltipInModal && _modalPortalElement
+            ? _modalPortalElement
+            : this._element();
+    }
     disconnect() {
         if (this._ariaObserver) {
             this._ariaObserver.disconnect();
         }
+        this._modalPortalElement = null;
+        this._isTooltipInModal = false;
         if (this._visible) {
             this.hide();
         }
@@ -161,6 +196,30 @@ export class Tooltip {
             this.hide();
         }
     }
+    _handleTooltipMouseLeave = (event) => {
+        if (!this._visible) {
+            return;
+        }
+        if (event instanceof MouseEvent && event.clientX && event.clientY) {
+            try {
+                const target = this._target();
+                if (target) {
+                    const { clientX, clientY } = event;
+                    const { left, right, top, bottom } = target.getBoundingClientRect();
+                    const tolerance = 1;
+                    if (clientX >= left - tolerance &&
+                        clientX <= right + tolerance &&
+                        clientY >= top - tolerance &&
+                        clientY <= bottom + tolerance) {
+                        return;
+                    }
+                }
+            }
+            catch (ex) {
+            }
+        }
+        this.hide();
+    };
     addToggleListeners() {
         const target = this._target();
         if (!this._initialized && target) {
@@ -200,11 +259,19 @@ export class Tooltip {
                         this.hide(false);
                         return;
                     }
-                    this.startPositioning().then(() => {
+                    this.startPositioning()
+                        .then(() => {
                         if (this._initialResize) {
-                            tooltip.addEventListener('mouseleave', this.hide);
+                            if (features.enableTooltipFlashingFix) {
+                                tooltip.addEventListener('mouseleave', this.boundHandleTooltipMouseLeave);
+                            }
+                            else {
+                                tooltip.addEventListener('mouseleave', this.hide);
+                            }
                             this._initialResize = false;
                         }
+                    })
+                        .catch(() => {
                     });
                 }
             });
@@ -234,9 +301,36 @@ export class Tooltip {
         this._visible = true;
         this._initialResize = true;
         const tooltip = this._element();
+        const target = this._target();
         tooltip.visible = this._visible;
-        tooltip.content = this._value;
+        const { _value } = this;
+        tooltip.content = _value;
+        if (!import.meta.env.SSR &&
+            target &&
+            features.enableHelptextA11yInModal) {
+            this._modalPortalElement = null;
+            const portal = findTooltipPortalElement(target);
+            if (portal?.isConnected) {
+                this._modalPortalElement = portal;
+                this._isTooltipInModal = true;
+                portal.textContent = '';
+                portal.setAttribute('id', tooltip.contentModalPortalId);
+                portal.removeAttribute('aria-hidden');
+                const bubbleBody = tooltip.shadowRoot?.querySelector(BUBBLE_BODY_SELECTOR);
+                if (bubbleBody) {
+                    bubbleBody.setAttribute('aria-hidden', 'true');
+                }
+                portal.textContent = _value;
+            }
+        }
         if (this._ariaObserver && this._root && this._root.isConnected) {
+            if (features.enableHelptextA11yInModal) {
+                this._ariaObserver.connect({
+                    attribute: ARIA_DESCRIBEDBY,
+                    targetNode: this._target(),
+                    relatedNodes: this.getDescriptionElement(),
+                });
+            }
             this._ariaObserver.sync();
         }
         this.startPositioning();
@@ -247,13 +341,33 @@ export class Tooltip {
     hide(hideBubble = true) {
         this._visible = false;
         const tooltip = this._element();
+        const { _isTooltipInModal, _modalPortalElement } = this;
+        if (features.enableHelptextA11yInModal && _isTooltipInModal && _modalPortalElement) {
+            const portal = _modalPortalElement;
+            portal.setAttribute('aria-hidden', 'true');
+            portal.removeAttribute('id');
+            portal.textContent = '';
+            const bubbleBody = tooltip.shadowRoot
+                ? tooltip.shadowRoot.querySelector(BUBBLE_BODY_SELECTOR)
+                : null;
+            if (bubbleBody) {
+                bubbleBody.removeAttribute('aria-hidden');
+            }
+            this._isTooltipInModal = false;
+            this._modalPortalElement = null;
+        }
         if (hideBubble) {
             tooltip.visible = this._visible;
         }
         this.stopPositioning();
         document.removeEventListener('touchstart', this.handleDocumentTouch);
         document.removeEventListener('keydown', this.handleEscape);
-        tooltip.removeEventListener('mouseleave', this.hide);
+        if (features.enableTooltipFlashingFix) {
+            tooltip.removeEventListener('mouseleave', this.boundHandleTooltipMouseLeave);
+        }
+        else {
+            tooltip.removeEventListener('mouseleave', this.hide);
+        }
         this.resizeObserver.unobserve(tooltip);
         if (features.enableTooltipHoverDismiss) {
             setActiveTooltip(null);