@adatechnology/conversations-ui 0.8.0 → 0.9.0

package/dist/styles.css

@@ -1382,8 +1382,8 @@
 .cv-p-chip,
 .cv-p-row,
 .cv-p-thread__older,
-.cv-p-bubble__retry,
-.cv-p-bubble__action {
+.cv-p-failed-menu__trigger,
+.cv-p-failed-menu__item {
   font: inherit;
   color: inherit;
   cursor: pointer;
@@ -1970,8 +1970,7 @@
   min-width: 0;
   margin-inline-end: auto;
 }
-.cv-p-bubble > .cv-p-attachment,
-.cv-p-bubble > .cv-p-bubble__actions {
+.cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
 .cv-p-bubble__meta {
@@ -2004,33 +2003,103 @@
 .cv-p-bubble .cv-status-ticks--failed {
   color: var(--cv-p-i-danger);
 }
-.cv-p-bubble__retry {
-  min-height: var(--cv-p-i-touch);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0 0.5rem;
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border));
+  }
+  .cv-p-bubble--mine.cv-p-bubble--failed {
+    border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+    --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent));
+  }
+}
+.cv-p-failed-retry {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.125rem);
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  width: var(--cv-p-i-touch);
+  height: var(--cv-p-i-touch);
+  padding: 0;
   background: transparent;
-  border: 1px solid var(--cv-p-i-danger);
+  border: 0;
   color: var(--cv-p-i-danger);
-  border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+  font: inherit;
+  cursor: pointer;
 }
-.cv-p-bubble__actions {
-  display: inline-flex;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
+.cv-p-failed-retry__icon {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--cv-p-i-danger);
+  border-radius: 50%;
 }
-.cv-p-bubble__action {
-  min-height: var(--cv-p-i-touch);
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon,
+.cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon {
+  background: var(--cv-p-i-surface-raised);
+}
+.cv-p-failed-menu {
   display: inline-flex;
-  align-items: center;
-  padding: 0 0.75rem;
+}
+.cv-p-failed-menu__trigger {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 0.75rem;
+  padding: 0;
   background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text-muted);
+  font: inherit;
+  line-height: 0.75rem;
+  cursor: pointer;
+}
+.cv-p-failed-menu__trigger::after {
+  content: "";
+  position: absolute;
+  inset: -0.5rem -0.4rem;
+}
+.cv-p-failed-menu__list {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.25rem);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  min-width: 8rem;
+  background: var(--cv-p-i-surface-raised);
   border: 1px solid var(--cv-p-i-border);
-  color: inherit;
   border-radius: var(--cv-p-i-radius);
-  font-size: 0.7rem;
+}
+.cv-p-failed-menu__item {
+  min-height: var(--cv-p-i-touch);
+  padding: 0 0.75rem;
+  background: transparent;
+  border: 0;
+  color: var(--cv-p-i-text);
+  font:
+    0.7rem "SFMono-Regular",
+    Consolas,
+    monospace;
+  text-align: start;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+.cv-p-failed-menu__list--below {
+  bottom: auto;
+  top: calc(100% + 0.25rem);
+}
+.cv-p-failed-menu__item--danger {
+  color: var(--cv-p-i-danger);
+}
+.cv-p-failed-menu__item:hover,
+.cv-p-failed-menu__item:focus-visible {
+  background: var(--cv-p-i-highlight);
 }
 .cv-p-attachment {
   display: flex;
@@ -2529,6 +2598,13 @@
   .cv-p-copyable__done {
     color: CanvasText;
   }
+  .cv-p-failed-menu__list {
+    border-color: CanvasText;
+  }
+  .cv-p-failed-menu__item:focus-visible,
+  .cv-p-failed-menu__item:hover {
+    outline: 2px solid Highlight;
+  }
 }
 @media (forced-colors: active) {
   .cv-p-text__code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -49,6 +49,7 @@
     }
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^18.0.1",
     "@types/bun": "1.3.14",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19",

package/src/Tooltip.tsx

@@ -14,6 +14,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
 /** Atributo que marca um elemento como portador de dica. */
 export const TOOLTIP_ATTRIBUTE = 'data-cv-tooltip'
 
@@ -64,25 +66,16 @@ function tooltipStateFor(target: Element, text: string): TooltipState {
 /**
  * Só uma camada desenha por vez. A camada é montada por cada superfície do pacote (inbox, fluxos,
  * documentos) para o host não precisar montá-la à mão; duas superfícies na mesma tela renderizariam
- * dois balões sobrepostos sem essa trava.
+ * dois balões sobrepostos sem essa trava. Quando a dona desmonta, a posse passa à próxima montada.
  */
-let layerOwner: object | undefined
+const layerRegistry = createTooltipLayerRegistry()
 
 export function TooltipLayer() {
   const identity = useRef({})
   const [isOwner, setIsOwner] = useState(false)
   const [tooltip, setTooltip] = useState<TooltipState | undefined>(undefined)
 
-  useEffect(() => {
-    const owned = identity.current
-    if (layerOwner && layerOwner !== owned) return undefined
-    layerOwner = owned
-    setIsOwner(true)
-
-    return () => {
-      if (layerOwner === owned) layerOwner = undefined
-    }
-  }, [])
+  useEffect(() => layerRegistry.register(identity.current, setIsOwner), [])
 
   useEffect(() => {
     if (!isOwner) return undefined

package/src/TooltipDom.test.tsx

@@ -0,0 +1,78 @@
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+import { act, useRef } from 'react'
+
+import { setupDom, wait, type DomHarness } from './domHarness.test-helper'
+import { TooltipLayer } from './Tooltip'
+import { useSuppressTouchTooltips } from './participant/useSuppressTouchTooltips'
+
+let harness: DomHarness
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+afterAll(() => harness.teardown())
+
+function hover(target: Element): void {
+  act(() => void target.dispatchEvent(new Event('pointerover', { bubbles: true })))
+}
+
+function balloons(): number {
+  return document.body.querySelectorAll('[role="tooltip"]').length
+}
+
+function Target() {
+  return <button type="button" data-cv-tooltip="Hint">x</button>
+}
+
+describe('TooltipLayer ownership', () => {
+  it('draws one balloon with two layers, and keeps drawing after the owner unmounts', async () => {
+    const first = harness.mount(<TooltipLayer />)
+    harness.mount(<TooltipLayer />)
+    const target = harness.mount(<Target />).container.querySelector('button')!
+
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+
+    first.unmount()
+    act(() => void target.dispatchEvent(new Event('pointerdown', { bubbles: true })))
+    hover(target)
+    await wait(200)
+    expect(balloons()).toBe(1)
+  })
+})
+
+function Thread() {
+  const rootRef = useRef<HTMLDivElement>(null)
+  useSuppressTouchTooltips(rootRef)
+  return (
+    <div ref={rootRef}>
+      <Target />
+    </div>
+  )
+}
+
+describe('touch on the participant thread', () => {
+  it('does not light the balloon when a tap focuses the button', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(0)
+  })
+
+  it('still shows it for keyboard focus after a touch', async () => {
+    harness.mount(<TooltipLayer />)
+    const button = harness.mount(<Thread />).container.querySelector('button')!
+
+    act(() => void button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'touch' })))
+    act(() => void button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })))
+    act(() => void button.dispatchEvent(new Event('focusin', { bubbles: true })))
+    await wait(200)
+
+    expect(balloons()).toBe(1)
+  })
+})

package/src/domHarness.test-helper.ts

@@ -0,0 +1,53 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+import { act, type ReactElement } from 'react'
+import type { Root } from 'react-dom/client'
+
+export type MountedTree = {
+  readonly container: HTMLElement
+  readonly unmount: () => void
+}
+
+export type DomHarness = {
+  readonly mount: (element: ReactElement) => MountedTree
+  readonly teardown: () => void
+}
+
+/**
+ * Registers happy-dom for one test file only and mounts React trees into it. react-dom/client is
+ * imported after the registration because it reads the DOM globals when it loads.
+ */
+export async function setupDom(): Promise<DomHarness> {
+  GlobalRegistrator.register()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const { createRoot } = await import('react-dom/client')
+  const roots: Root[] = []
+
+  function mount(element: ReactElement): MountedTree {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    roots.push(root)
+    act(() => root.render(element))
+    return { container, unmount: () => act(() => root.unmount()) }
+  }
+
+  function teardown(): void {
+    for (const root of roots) act(() => root.unmount())
+    document.body.innerHTML = ''
+    GlobalRegistrator.unregister()
+  }
+
+  return { mount, teardown }
+}
+
+export function pressKey(target: Element, key: string): void {
+  act(() => {
+    target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+  })
+}
+
+export function wait(milliseconds: number): Promise<void> {
+  return act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, milliseconds))
+  })
+}

package/src/participant/ParticipantBackButton.tsx

@@ -7,7 +7,7 @@ export type ParticipantBackButtonProps = {
 
 export function ParticipantBackButton({ label, onBack }: ParticipantBackButtonProps) {
   return (
-    <button type="button" className="cv-p-thread__back" aria-label={label} onClick={onBack}>
+    <button type="button" className="cv-p-thread__back" aria-label={label} data-cv-tooltip={label} onClick={onBack}>
       <ArrowLeft size={24} aria-hidden="true" focusable="false" />
     </button>
   )

package/src/participant/ParticipantBubbleBody.tsx

@@ -0,0 +1,54 @@
+import { formatTimestamp } from '../lib/format'
+import { ParticipantAttachmentItem, type ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { OwnStatus } from './ParticipantBubbleStatus'
+import { ParticipantFailedMenu } from './ParticipantFailedMenu'
+import type { BubbleContent } from './ParticipantMessageBubble'
+import { ParticipantMessageText } from './ParticipantMessageText'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantOwnMessageStatus } from './participantMessages'
+
+type BubbleBodyProps = {
+  readonly content: BubbleContent
+  readonly labels: ParticipantConversationsLabels
+  readonly ownStatus?: ParticipantOwnMessageStatus
+  readonly textId?: string
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly onRetry?: () => void
+  readonly onDiscard?: () => void
+  readonly onEdit?: () => void
+}
+
+function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
+  if (content.isMine) return <span className="cv-p-sr-only">{labels.me}</span>
+  if (!content.authorName) return null
+  return <span className="cv-p-bubble__author">{content.authorName}</span>
+}
+
+export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
+  return (
+    <>
+      <BubbleHeading content={content} labels={labels} />
+      {content.text ? <ParticipantMessageText text={content.text} labels={labels} id={textId} /> : null}
+      {content.attachments.map((attachment) => (
+        <ParticipantAttachmentItem
+          key={attachment.id}
+          attachment={attachment}
+          resolveAttachmentUrl={resolveAttachmentUrl}
+          labels={labels}
+        />
+      ))}
+      {content.pendingFilenames.map((filename, index) => (
+        <span key={`${filename}-${index}`} className="cv-p-attachment cv-p-attachment--pending">
+          {filename}
+        </span>
+      ))}
+      <span className="cv-p-bubble__meta">
+        <time className="cv-p-bubble__time" dateTime={content.createdAt}>
+          {formatTimestamp(content.createdAt)}
+        </time>
+        {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : null}
+        {ownStatus === 'failed' ? <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} /> : null}
+      </span>
+    </>
+  )
+}

package/src/participant/ParticipantBubbleStatus.tsx

@@ -24,44 +24,38 @@ export function OwnStatus({ status, labels, onRetry }: OwnStatusProps) {
   const ticksStatus = status === 'sending' ? 'queued' : status
   const isVisibleText = status === 'sending' || status === 'queued' || status === 'failed'
 
-  if (status === 'failed' && onRetry) {
-    return (
-      <button type="button" className="cv-p-bubble__retry" onClick={onRetry}>
-        <StatusTicks status="failed" appearance="stylesheet" />
-        <span>{labels.statusFailed}</span>
-      </button>
-    )
-  }
-
   const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
+  const isTextVisible = isVisibleText && !(status === 'failed' && onRetry)
   return (
     <span className="cv-p-bubble__status">
-      <StatusTicks status={ticksStatus} appearance="stylesheet" />
-      <span className={isVisibleText ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
+      <StatusTicks status={ticksStatus} appearance="stylesheet" title={isTextVisible ? undefined : text} />
+      <span className={isTextVisible ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
     </span>
   )
 }
 
-type FailedActionsProps = {
+type RetryButtonProps = {
   readonly labels: ParticipantConversationsLabels
-  readonly onDiscard?: () => void
-  readonly onEdit?: () => void
+  readonly onRetry: () => void
+  /** Id of the message text, read after the name so the button says which message it resends. */
+  readonly describedBy?: string
 }
 
-export function FailedActions({ labels, onDiscard, onEdit }: FailedActionsProps) {
-  if (!onDiscard && !onEdit) return null
+export function RetryButton({ labels, onRetry, describedBy }: RetryButtonProps) {
   return (
-    <span className="cv-p-bubble__actions">
-      {onEdit ? (
-        <button type="button" className="cv-p-bubble__action" onClick={onEdit}>
-          {labels.edit}
-        </button>
-      ) : null}
-      {onDiscard ? (
-        <button type="button" className="cv-p-bubble__action" onClick={onDiscard}>
-          {labels.discard}
-        </button>
-      ) : null}
-    </span>
+    <button
+      type="button"
+      className="cv-p-failed-retry"
+      aria-label={labels.statusFailed}
+      aria-describedby={describedBy}
+      data-cv-tooltip={labels.statusFailed}
+      onClick={onRetry}
+    >
+      <span className="cv-p-failed-retry__icon">
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path d="M13 8a5 5 0 1 1-1.6-3.7M13 2.5v3h-3" fill="none" stroke="currentColor" strokeWidth="1.5" />
+        </svg>
+      </span>
+    </button>
   )
 }

package/src/participant/ParticipantChannelBadges.tsx

@@ -59,7 +59,11 @@ export function ParticipantChannelBadges({
       <span className="cv-p-channels">
         <span className="cv-p-sr-only">{`${labels.channelsGroup}: `}</span>
         {descriptors.map((descriptor, index) => (
-          <span key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+          <span
+            key={descriptor.channel}
+            className={`cv-p-channel cv-p-channel--${descriptor.channel}`}
+            data-cv-tooltip={resolveParticipantChannelLabel(descriptor, labels)}
+          >
             <BadgeContent
               descriptor={descriptor}
               labels={labels}
@@ -75,7 +79,11 @@ export function ParticipantChannelBadges({
   return (
     <ul className="cv-p-channels" aria-label={labels.channelsGroup}>
       {descriptors.map((descriptor) => (
-        <li key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+        <li
+          key={descriptor.channel}
+          className={`cv-p-channel cv-p-channel--${descriptor.channel}`}
+          data-cv-tooltip={resolveParticipantChannelLabel(descriptor, labels)}
+        >
           <BadgeContent descriptor={descriptor} labels={labels} separator="" iconSize={iconSize} />
         </li>
       ))}

package/src/participant/ParticipantComposer.tsx

@@ -60,7 +60,7 @@ function FileList({ files, labels, onRemove }: FileListProps) {
         <li key={`${file.name}-${file.size}-${index}`} className="cv-p-files__item">
           <span className="cv-p-files__name">{file.name}</span>
           <span className="cv-p-files__size">{formatFileSize(file.size)}</span>
-          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} onClick={() => onRemove(file)}>
+          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} data-cv-tooltip={labels.removeAttachment} onClick={() => onRemove(file)}>
             <span aria-hidden="true">×</span>
             <span className="cv-p-sr-only">{labels.removeAttachment}</span>
           </button>

package/src/participant/ParticipantComposerControls.tsx

@@ -29,6 +29,7 @@ export function AttachControl({ labels, disabled, acceptedTypes, onChosen }: Att
         type="button"
         className="cv-p-composer__attach"
         aria-label={labels.attach}
+        data-cv-tooltip={labels.attach}
         disabled={disabled}
         onClick={() => fileInputRef.current?.click()}
       >
@@ -44,6 +45,7 @@ export function SendButton({ label, disabled }: { readonly label: string; readon
       type="submit"
       className="cv-p-button cv-p-button--primary cv-p-composer__send"
       aria-label={label}
+      data-cv-tooltip={label}
       disabled={disabled}
     >
       <Send size={20} aria-hidden="true" focusable="false" />

package/src/participant/ParticipantCopyableToken.tsx

@@ -43,6 +43,7 @@ export function ParticipantLinkCopyButton({ value, labels }: ParticipantLinkCopy
       type="button"
       className="cv-p-text__link-copy"
       aria-label={`${labels.copyValue} ${value}`}
+      data-cv-tooltip={labels.copyValue}
       onClick={() => copy(value, labels.valueCopied)}
     >
       {isCopied ? <Check size={14} aria-hidden={true} /> : <Copy size={14} aria-hidden={true} />}

package/src/participant/ParticipantFailedMenu.tsx

@@ -0,0 +1,40 @@
+import { useId } from 'react'
+
+import { ParticipantFailedMenuList } from './ParticipantFailedMenuList'
+import { DEFAULT_MESSAGE_OPTIONS_LABEL, type ParticipantConversationsLabels } from './participantLabels'
+import { useParticipantFailedMenu } from './useParticipantFailedMenu'
+
+type ParticipantFailedMenuProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onEdit?: () => void
+  readonly onDiscard?: () => void
+}
+
+export function ParticipantFailedMenu({ labels, onEdit, onDiscard }: ParticipantFailedMenuProps) {
+  const menu = useParticipantFailedMenu()
+  const triggerId = useId()
+  if (!onEdit && !onDiscard) return null
+  const label = labels.messageOptions ?? DEFAULT_MESSAGE_OPTIONS_LABEL
+
+  return (
+    <span className="cv-p-failed-menu" ref={menu.containerRef} onBlur={menu.handleBlur}>
+      <button
+        type="button"
+        id={triggerId}
+        ref={menu.triggerRef}
+        className="cv-p-failed-menu__trigger"
+        aria-haspopup="menu"
+        aria-expanded={menu.state.isOpen}
+        aria-label={label}
+        data-cv-tooltip={menu.state.isOpen ? undefined : label}
+        onClick={menu.handleTriggerClick}
+        onKeyDown={menu.handleTriggerKeyDown}
+      >
+        <span aria-hidden="true">⋯</span>
+      </button>
+      {menu.state.isOpen ? (
+        <ParticipantFailedMenuList menu={menu} labelledBy={triggerId} labels={labels} onEdit={onEdit} onDiscard={onDiscard} />
+      ) : null}
+    </span>
+  )
+}

package/src/participant/ParticipantFailedMenuList.tsx

@@ -0,0 +1,41 @@
+import type { ParticipantFailedMenuController } from './useParticipantFailedMenu'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+type ParticipantFailedMenuListProps = {
+  readonly menu: ParticipantFailedMenuController
+  readonly labelledBy: string
+  readonly labels: ParticipantConversationsLabels
+  readonly onEdit?: () => void
+  readonly onDiscard?: () => void
+}
+
+export function ParticipantFailedMenuList({ menu, labelledBy, labels, onEdit, onDiscard }: ParticipantFailedMenuListProps) {
+  function runAndClose(action: () => void): () => void {
+    return () => {
+      menu.close()
+      action()
+    }
+  }
+
+  const className = `cv-p-failed-menu__list${menu.placement === 'below' ? ' cv-p-failed-menu__list--below' : ''}`
+  return (
+    <div role="menu" aria-labelledby={labelledBy} ref={menu.menuRef} className={className} onKeyDown={menu.handleMenuKeyDown}>
+      {onEdit ? (
+        <button type="button" role="menuitem" tabIndex={-1} className="cv-p-failed-menu__item" onClick={runAndClose(onEdit)}>
+          {labels.edit}
+        </button>
+      ) : null}
+      {onDiscard ? (
+        <button
+          type="button"
+          role="menuitem"
+          tabIndex={-1}
+          className="cv-p-failed-menu__item cv-p-failed-menu__item--danger"
+          onClick={runAndClose(onDiscard)}
+        >
+          {labels.discard}
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -112,22 +112,22 @@ describe('ParticipantMessageBubble', () => {
     const withoutRetry = renderPending('failed')
 
     expect(withRetry).toContain('<button')
-    expect(withRetry).toContain('Failed — tap to retry')
+    expect(withRetry).toContain('aria-label="Failed — tap to retry"')
+    expect(withRetry).toContain('cv-p-failed-retry')
     expect(withRetry).toContain('cv-status-ticks--failed')
     expect(findUtilityClassTokens(withRetry)).toEqual([])
     expect(withoutRetry).not.toContain('<button')
     expect(withoutRetry).toContain('cv-status-ticks--failed')
   })
 
-  it('shows discard and edit on a failed pending only when the handlers exist', () => {
+  it('offers edit and discard through the menu trigger only when a handler exists', () => {
     const none = renderPending('failed')
     const both = renderPending('failed', () => undefined, { onDiscard: () => undefined, onEdit: () => undefined })
     const notFailed = renderPending('queued', undefined, { onDiscard: () => undefined, onEdit: () => undefined })
 
-    expect(none).not.toContain('cv-p-bubble__action')
-    expect(both).toContain('>Discard<')
-    expect(both).toContain('>Edit<')
-    expect(notFailed).not.toContain('cv-p-bubble__action')
+    expect(none).not.toContain('cv-p-failed-menu')
+    expect(both).toContain('aria-haspopup="menu"')
+    expect(notFailed).not.toContain('cv-p-failed-menu')
   })
 
   it('a failed server message shows only "Failed", with no button', () => {