How to build an accessible MessageActions in React

A named group of real buttons. Good and Bad are toggle buttons (aria-pressed), so the chosen rating is exposed as state rather than by a changing label, and choosing one announces "Thanks for your feedback" once through the shared announce() region. Icon buttons carry accessible names and meet the coarse-pointer target size

When to use a MessageActions

• Under each assistant message: copy the reply, rate it, or ask for another attempt

When not to use it

• Stopping a response that is still generating — use AiStatus with onStop
• Actions on a non-AI item — use ButtonGroup or a Menu

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space

Common mistakes

Avoid: Swapping the rating button’s label to "Good response recorded"

Prefer: Keep a stable name and expose the choice with aria-pressed; the component announces the confirmation once

A name that changes on press reads as a different control; aria-pressed is how toggle buttons report state

Example

<MessageActions copyValue="Refunds are available for 30 days." onFeedbackChange={() => {}} onRegenerate={() => {}} />

See the full MessageActions reference →