@lumx/react 3.9.2-alpha.5 → 3.9.2-alpha.6

package/index.d.ts

@@ -2878,6 +2878,8 @@ interface TooltipProps extends GenericProps, HasCloseMode {
     label?: string | null | false;
     /** Placement of the tooltip relative to the anchor. */
     placement?: TooltipPlacement;
+    /** Choose how the tooltip text should link to the anchor */
+    ariaLinkMode?: 'aria-describedby' | 'aria-labelledby';
 }
 /**
  * Tooltip component.

package/index.js

@@ -13913,17 +13913,18 @@ Toolbar.defaultProps = DEFAULT_PROPS$10;
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
  * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
  * will be wrapped in a <span>.
- *
- * @param  children         Original tooltip anchor.
- * @param  setAnchorElement Set tooltip anchor element.
- * @param  isOpen           Whether the tooltip is open or not.
- * @param  id               Tooltip id.
- * @param  label            Tooltip label.
- * @return tooltip anchor.
  */
-const useInjectTooltipRef = (children, setAnchorElement, isOpen, id, label) => {
-  // Only add description when open
-  const describedBy = isOpen ? id : undefined;
+const useInjectTooltipRef = options => {
+  const {
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode
+  } = options;
+  // Only add link when mounted
+  const linkId = isMounted ? id : undefined;
   return useMemo(() => {
     if (!label) return children;
 
@@ -13934,18 +13935,21 @@ const useInjectTooltipRef = (children, setAnchorElement, isOpen, id, label) => {
         ref
       });
 
-      // Add current tooltip to the aria-describedby if the label is not already present
-      if (label !== props['aria-label'] && describedBy) {
-        props['aria-describedby'] = [props['aria-describedby'], describedBy].filter(Boolean).join(' ');
+      // Do not add label/description if the tooltip label is already in aria-label
+      if (linkId && label !== props['aria-label']) {
+        if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';else props[ariaLinkMode] = '';
+        props[ariaLinkMode] += linkId;
       }
       return /*#__PURE__*/cloneElement(children, props);
     }
-    return /*#__PURE__*/React.createElement("div", {
+    const aria = linkId ? {
+      [ariaLinkMode]: linkId
+    } : undefined;
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: "lumx-tooltip-anchor-wrapper",
-      ref: setAnchorElement,
-      "aria-describedby": describedBy
-    }, children);
-  }, [children, setAnchorElement, describedBy, label]);
+      ref: setAnchorElement
+    }, aria), children);
+  }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
 };
 
 /** Return true if the browser does not support pointer hover */
@@ -14088,7 +14092,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$1q = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode"];
+const _excluded$1q = ["label", "children", "className", "delay", "placement", "forceOpen", "closeMode", "ariaLinkMode"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -14111,7 +14115,8 @@ const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
  */
 const DEFAULT_PROPS$11 = {
   placement: Placement.BOTTOM,
-  closeMode: 'unmount'
+  closeMode: 'unmount',
+  ariaLinkMode: 'aria-describedby'
 };
 
 /**
@@ -14135,7 +14140,8 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       delay,
       placement,
       forceOpen,
-      closeMode
+      closeMode,
+      ariaLinkMode
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   // Disable in SSR.
@@ -14163,8 +14169,15 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     onPopperMount
   } = useTooltipOpen(delay, anchorElement);
   const isOpen = (isActivated || forceOpen) && !!label;
-  const isMounted = isOpen || closeMode === 'hide';
-  const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isMounted, id, label);
+  const isMounted = !!label && (isOpen || closeMode === 'hide');
+  const wrappedChildren = useInjectTooltipRef({
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode: ariaLinkMode
+  });
   const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({