Skip to content

fix: show copy button confirmation on click only - #77

Open
marekdano wants to merge 2 commits into
mainfrom
72-copy-button-improvement
Open

fix: show copy button confirmation on click only#77
marekdano wants to merge 2 commits into
mainfrom
72-copy-button-improvement

Conversation

@marekdano

Copy link
Copy Markdown
Contributor

Closes #72

Summary

Builds on #61 (which consolidated 17 copy buttons onto a shared CopyButton). This closes #72 by reserving the tooltip for the copy confirmation instead of double-duty as a hover hint, fixing an accessibility/interaction bug along the way: a hover-opened Radix tooltip inside ToolSchemaDialog/TokenCreatedDialog was swallowing the first Escape press meant for the dialog, since only the topmost DismissableLayer responds to Escape.

Interaction

  • CopyButton now shows its confirmation bubble on click only — hover and focus produce nothing.
  • Replaced Radix Tooltip with @floating-ui/react-dom + createPortal, sidestepping the Escape-layering bug and clipping against table/dialog/TestConnectionPanel containers.
  • aria-label stays fixed at all times; a single always-mounted role="status" region is now the sole non-visual announcement channel for the copied/failed state.
  • Added @floating-ui/react-dom as a direct dependency (was already present transitively via Radix).

Accessible labels

  • Standardized copy-button labels on "field + row name" (e.g. Copy tool ID for {name}) across the tools/resources/servers tables and the MCP server / virtual server detail panels.
  • Fixed two spots that were reading a raw URI or identifier aloud instead of naming the field.
  • i18n'd remaining hardcoded English strings (UUID, URL, Input, Output, server ID) and CodeBlock's default "Copy code" label, adding matching es-ES/pt-BR translations.

Focus placement

  • Reverted TokenCreatedDialog's auto-focus redirect — it existed only to dodge the hover-tooltip issue, which no longer applies.
  • Kept ToolSchemaDialog's redirect (Close is still the more useful landing spot in a mostly read-only dialog) with an updated comment.

Tests

  • Rewrote CopyButton tests for the click-only behavior and the always-mounted status region.
  • Updated cascading fixtures across tables/detail panels for the new label text.
  • Fixed a vi.useFakeTimers() leak in ServersTable.test.tsx that was silently hanging unrelated tests after an assertion failure.

Test plan

  • npx vitest run — 183 test files, 3090 tests passing
  • npx tsc -b — clean
  • npx eslint src server e2e — clean
  • npx prettier --check — clean
  • npm run build — succeeds
  • Manual verification in headless Chromium: hover/focus show no bubble; click shows "Copied!" bubble with Check icon swap, positioned above the button; bubble clears after 1.5s; clipboard write confirmed

Signed-off-by: Marek Dano <mk.dano@gmail.com>

@vishu-bh vishu-bh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes are clean just some accessibility/i18n gaps needs closing.

<span className="truncate">{identifier}</span>
<CopyButton
value={identifier}
label={intl.formatMessage(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This button copies component identifier, but accessible label says only Copy {title} (for example, “Copy Tool One”). Use field + row naming, such as “Copy tool ID for Tool One”. Same issue exists in VirtualServerDetailsPanel.tsx:590-593

label={intl.formatMessage(
{ id: "common.copyValue" },
{ label: identifier },
{ label: component.type.slice(0, -1) },

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component.type.slice(0, -1) produces English labels like tool and resource. In Spanish/Portuguese, screen readers announce “Copiar tool/resource”. Add localized singular component labels and use them here.

Signed-off-by: Marek Dano <mk.dano@gmail.com>
@marekdano
marekdano requested a review from vishu-bh August 24, 2026 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Copy buttons: show confirmation on click only

2 participants