@coinbase/cds-web 8.50.0 → 8.51.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.51.0 (3/9/2026 PST)
+
+#### 🚀 Updates
+
+- Added hasInteractiveContent prop to Tooltip to correctly handle keyboard navigation when content includes interactive elements. [[#469](https://github.com/coinbase/cds/pull/469)] [DX-5097]
+
+#### 🐞 Fixes
+
+- Fixed issue when tooltip does not announce its content when content is a React Node instead of a string. [[#469](https://github.com/coinbase/cds/pull/469)]
+
 ## 8.50.0 (3/6/2026 PST)
 
 #### 🚀 Updates

package/dts/overlays/tooltip/Tooltip.d.ts

@@ -5,14 +5,15 @@ export declare const Tooltip: ({
   elevation,
   placement,
   gap,
-  disablePortal,
   testID,
   zIndex,
   tooltipId: tooltipIdDefault,
   visible,
+  hasInteractiveContent,
   invertColorScheme,
-  disableFocusTrap,
   disableAutoFocus,
+  disableFocusTrap,
+  disablePortal,
   disableTypeFocus,
   focusTabIndexElements,
   respectNegativeTabIndex,

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,wRAoBrB,YAAY,4CAiEd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,GAAI,+SAqBrB,YAAY,4CAoFd,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -58,6 +58,10 @@ export type TooltipBaseProps = SharedProps &
      * A unique ID used to ensure tooltips are accessible
      */
     tooltipId?: string;
+    /**
+     * Whether the tooltip has interactive elements inside the content.
+     */
+    hasInteractiveContent?: boolean;
   };
 export type TooltipProps = TooltipBaseProps;
 export type PopperTooltipProps = {

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}

package/esm/overlays/popover/Popover.js

@@ -101,7 +101,7 @@ export const Popover = /*#__PURE__*/memo(_ref => {
         children: content
       }))
     })
-  })), [setPopper, popperStyles.popper, popperAttributes.popper, handleCaptureEvents, handleClose, testID, content, controlledElementAccessibilityProps, disableFocusTrap, disableAutoFocus, disableTypeFocus, focusTabIndexElements, respectNegativeTabIndex, autoFocusDelay, restoreFocusOnUnmount]);
+  })), [setPopper, popperStyles.popper, popperAttributes.popper, handleCaptureEvents, autoFocusDelay, disableAutoFocus, disableFocusTrap, disableTypeFocus, focusTabIndexElements, handleClose, respectNegativeTabIndex, restoreFocusOnUnmount, testID, controlledElementAccessibilityProps, content]);
   const renderContent = hasHoverInteractions ? memoizedContent : /*#__PURE__*/_jsx(Box, {
     "aria-label": accessibilityLabel,
     "aria-modal": "true",
@@ -115,12 +115,12 @@ export const Popover = /*#__PURE__*/memo(_ref => {
   const Wrapper = invertColorScheme ? InvertedThemeProvider : React.Fragment;
   return /*#__PURE__*/_jsxs("div", {
     className: block ? blockCss : undefined,
+    onBlur: onBlur,
     onMouseEnter: disabled ? undefined : onMouseEnter,
     onMouseLeave: disabled ? undefined : onMouseLeave,
     children: [/*#__PURE__*/_jsx("div", {
       ref: setSubject,
       className: cx(subjectCss, block && blockCss),
-      onBlur: onBlur,
       onClick: disabled ? undefined : onPressSubject,
       onFocus: disabled ? undefined : onFocus,
       onMouseDown: disabled ? undefined : onMouseDown,

package/esm/overlays/tooltip/Tooltip.js

@@ -14,14 +14,15 @@ export const Tooltip = _ref => {
     elevation,
     placement = 'top',
     gap = 1,
-    disablePortal,
     testID,
     zIndex,
     tooltipId: tooltipIdDefault,
     visible,
+    hasInteractiveContent,
     invertColorScheme = true,
-    disableFocusTrap,
-    disableAutoFocus,
+    disableAutoFocus = hasInteractiveContent,
+    disableFocusTrap = hasInteractiveContent,
+    disablePortal = hasInteractiveContent,
     disableTypeFocus,
     focusTabIndexElements,
     respectNegativeTabIndex,
@@ -50,14 +51,31 @@ export const Tooltip = _ref => {
     }
   }, [handleOnMouseEnter]);
   const clonedChild = useMemo(() => {
-    return /*#__PURE__*/cloneElement(children, {
+    const isStringContent = typeof content === 'string';
+    return /*#__PURE__*/cloneElement(children,
+    // String content: Use only aria-label so the trigger is announced on focus without
+    // double announcement (aria-describedby would point to the same text when the tooltip is open).
+    // Non-string content: Use only aria-describedby to associate the visible tooltip (id=tooltipId).
+    // We cannot use aria-label here (it accepts only strings). May not announce on focus for
+    // non-button triggers due to timing (describedby target mounts when tooltip opens).
+    isStringContent ? {
+      'aria-label': content
+    } : {
       'aria-describedby': tooltipId
     });
-  }, [children, tooltipId]);
+  }, [children, content, tooltipId]);
   const contentPosition = useMemo(() => ({
     placement
   }), [placement]);
   const isVisible = useMemo(() => visible !== false && isOpen, [visible, isOpen]);
+  const handleBlur = useCallback(event => {
+    const relatedTarget = event === null || event === void 0 ? void 0 : event.relatedTarget;
+    const currentTarget = event === null || event === void 0 ? void 0 : event.currentTarget;
+    if (relatedTarget && currentTarget !== null && currentTarget !== void 0 && currentTarget.contains(relatedTarget)) {
+      return;
+    }
+    handleOnBlur();
+  }, [handleOnBlur]);
   return /*#__PURE__*/_jsx(Popover, {
     autoFocusDelay: autoFocusDelay,
     content: /*#__PURE__*/_jsx(TooltipContent, {
@@ -77,7 +95,7 @@ export const Tooltip = _ref => {
     disableTypeFocus: disableTypeFocus,
     focusTabIndexElements: focusTabIndexElements,
     invertColorScheme: invertColorScheme,
-    onBlur: handleOnBlur,
+    onBlur: handleBlur,
     onFocus: handleOnFocus,
     onMouseDown: preventMouseDown,
     onMouseEnter: handleMouseEnter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.50.0",
+  "version": "8.51.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.50.0",
+    "@coinbase/cds-common": "^8.51.0",
     "@coinbase/cds-icons": "^5.12.0",
     "@coinbase/cds-illustrations": "^4.32.0",
     "@coinbase/cds-lottie-files": "^3.3.4",