@coinbase/cds-web 8.49.2 → 8.51.0

package/CHANGELOG.md

@@ -8,6 +8,22 @@ 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
+
+- Feat: iconSize customization for IconButton. [[#474](https://github.com/coinbase/cds/pull/474)]
+
 ## 8.49.2 (3/6/2026 PST)
 
 #### 🐞 Fixes

package/dts/buttons/IconButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IconButtonVariant, IconName } from '@coinbase/cds-common/types';
+import type { IconButtonVariant, IconName, IconSize } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type PressableBaseProps } from '../system/Pressable';
 import { type ButtonBaseProps } from './Button';
@@ -10,6 +10,11 @@ export type IconButtonBaseProps = Polymorphic.ExtendableProps<
   Pick<ButtonBaseProps, 'disabled' | 'transparent' | 'compact' | 'flush'> & {
     /** Name of the icon, as defined in Figma. */
     name: IconName;
+    /**
+     * Size for the icon rendered inside the button.
+     * @default compact ? 's' : 'm'
+     */
+    iconSize?: IconSize;
     /** Whether the icon is active */
     active?: boolean;
     /**

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAG9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,UAAU,CAAC;AAW/D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBA+FxB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,UAAU,CAAC;AAW/D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBA+FxB,CAAC"}

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/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "active", "flush", "loading", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "accessibilityLabel", "accessibilityHint"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -39,6 +39,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       width = compact ? 40 : 56,
       className,
       name,
+      iconSize = compact ? 's' : 'm',
       active,
       flush,
       loading,
@@ -48,7 +49,6 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
   const theme = useTheme();
-  const iconSize = compact ? 's' : 'm';
   const iconSizeValue = theme.iconSize[iconSize];
   const spinnerSizeStyles = useMemo(() => ({
     width: iconSizeValue,

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.49.2",
+  "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.49.2",
+    "@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",