@coinbase/cds-mcp-server 8.50.0 → 8.51.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.51.0 ((3/9/2026, 06:39 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.50.0 ((3/6/2026, 09:36 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/web/components/Tooltip.txt

@@ -94,7 +94,7 @@ You can use tooltips within `TextInput` to provide more context.
       <InputLabel htmlFor="tooltip-input-example">Display name</InputLabel>
       {/* Add padding to ensure 24x24 tooltip tap target for a11y compliance */}
       <Tooltip content="This will be visible to other users.">
-        <Icon active color="fg" name="info" padding={0.75} size="xs" tabIndex={0} />
+        <Icon active color="fg" name="info" padding={0.75} size="xs" tabIndex={0} role="button" />
       </Tooltip>
     </HStack>
   }
@@ -124,6 +124,92 @@ function TooltipVisibilityDelay() {
 }
 ```
 
+### Accessibility (A11y)
+
+When tooltip content is non-interactive (text only), focus stays on the trigger and the tooltip is rendered in a portal. When tooltip content has **interactive elements** (links, buttons), set **`hasInteractiveContent={true}`** so the tooltip stays in the document flow and keyboard users can tab into the content. This sets `disablePortal`, `disableAutoFocus`, and `disableFocusTrap` appropriately.
+
+**Tooltip on an icon (or other non-button anchor):**
+
+When using an Icon (or other non-`<button>` element) as the tooltip trigger, add **`role="button"`** and **`tabIndex={0}`** so screen readers (e.g. VoiceOver) can discover it with arrow keys and announce the tooltip. If the icon performs an action on click, use **IconButton** instead so the trigger is a real `<button>`.
+
+**Example: tooltip on an icon (string content)**
+
+```jsx live
+function TooltipIconStringContent() {
+  return (
+    <HStack alignItems="center" gap={2}>
+      <Tooltip content="This will be visible to other users.">
+        <Icon active color="fg" name="info" role="button" tabIndex={0} />
+      </Tooltip>
+      <Text as="span" font="body" color="fgMuted">
+        Focus the icon to hear the tooltip announced.
+      </Text>
+    </HStack>
+  );
+}
+```
+
+**Example: tooltip on an icon (React node content)**
+
+```jsx live
+function TooltipIconReactNodeContent() {
+  return (
+    <HStack alignItems="center" gap={2}>
+      <Tooltip
+        content={
+          <Text font="label2">
+            Styled <strong>description</strong> text.
+          </Text>
+        }
+      >
+        <Icon active color="fg" name="info" role="button" tabIndex={0} />
+      </Tooltip>
+      <Text as="span" font="body" color="fgMuted">
+        Focus the icon to hear the tooltip announced.
+      </Text>
+    </HStack>
+  );
+}
+```
+
+**When tooltip content is interactive (links, buttons):**
+
+- Prefer **Modal** or another pattern for actionable content when possible. Tooltips are intended for short, non-interactive descriptions.
+- If you must use interactive content inside a tooltip, set **`hasInteractiveContent={true}`** so the content stays in the document flow. The prop allows keyboard users to tab into the tooltip, through its content, and out to the next focusable element on the page. With the default portal, focus behavior can be inconsistent when moving between trigger and content.
+
+**Example: tooltip with interactive content**
+
+```jsx live
+function TooltipWithInteractiveContent() {
+  return (
+    <Box position="relative" paddingY={5}>
+      <Text as="span" font="body" color="fgMuted">
+        Set your default display currency.{' '}
+      </Text>
+      <Tooltip
+        content={
+          <Text font="label2" color="fg">
+            Learn more at{' '}
+            <Text
+              as="a"
+              href="https://www.coinbase.com/settings"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Settings
+            </Text>
+            .
+          </Text>
+        }
+        hasInteractiveContent
+      >
+        <Icon active color="fg" name="info" paddingStart={1} role="button" tabIndex={0} />
+      </Tooltip>
+    </Box>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -138,6 +224,7 @@ function TooltipVisibilityDelay() {
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines a components shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
 | `focusTabIndexElements` | `boolean` | No | `false` | If true, the focus trap will include all elements with tabIndex values in the list of focusable elements. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | This value corresponds to how big the gap between the subject and the tooltip is. We do not encourage usage of this prop. But it is enabled for special cases as an escape hatch. |
+| `hasInteractiveContent` | `boolean` | No | `-` | Whether the tooltip has interactive elements inside the content. |
 | `invertColorScheme` | `boolean` | No | `true` | Invert the themes activeColorScheme for this component |
 | `openDelay` | `number` | No | `-` | Delay (in ms) before showing the tooltip on pointer hover. Keyboard focus still opens immediately for accessibility. |
 | `placement` | `top \| bottom \| left \| right` | No | `top` | Position of tooltip in relation to the subject. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.50.0",
+  "version": "8.51.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",