How to build an accessible ToolCall in React

The header is a native <summary>, so the disclosure is keyboard-operable (Enter/Space) and works before hydration; its accessible name is the tool name plus the status text, never colour alone. Approval actions live outside the disclosure so they are always reachable. The card is not a live region — announce progress with AiStatus. Only the tool glyph pulses while running, under prefers-reduced-motion: no-preference

When to use a ToolCall

• Showing an AI tool or function call in a conversation, with what it was given and what it returned
• Asking the reader to approve or deny a call before it runs (human-in-the-loop)

When not to use it

• A list of agent steps without payloads — use ChainOfThought
• Announcing that the assistant is working — use AiStatus
• Showing arbitrary code — use CodeSnippet

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space

Common mistakes

Avoid: Putting Approve / Deny inside the collapsible input panel

Prefer: Pass them to `actions`, which always renders below the card

A pending approval must be visible and reachable without first opening a disclosure

Example

<ToolCall name="search_web" status="running" input={'{ "query": "cascivo pricing" }'} />

See the full ToolCall reference →