Message

Accessibility

Message from @prepared911/ui/message renders a chat-style bubble with author metadata, timestamp, and optional toolbar. The component wires DOM order (metadata before content) and exposes the toolbar on hover/focus; your job is to ensure keyboard access to actions, keep metadata readable, and announce new messages appropriately.

What the component handles

Metadata-first DOM order. Name, role, and timestamp render before bubble content, so assistive tech reads context before the body.
Highlight markup. MessageHighlight renders <mark> with a visible background change.
Toolbar reveal. Actions reveal on hover and focus; keyboard users get the same reveal via focus-within.

What you must provide

Keyboard-accessible actions. If the toolbar only appears on hover, ensure keyboard focus within the message also reveals it. Don't rely on hover alone.
Accessible names for icon-only actions. Toolbar buttons ("Copy", "Reply", "Edit") must have labels—use aria-label on each Button.
Live-region announcements for incoming messages. In real-time transcripts, wrap the list in role="log" with aria-live="polite"; screen readers will announce new entries as they arrive.

Keyboard behavior

Tab / Shift+Tab move between messages and their interactive children.
Enter / Space activate focused buttons and links.
When a message is interactive (selectable, editable), Tab should land on it and Enter/Space should activate the primary action.

Semantics and roles

Each message is a list item when rendered inside a transcript (<ul>/<li>).
Real-time transcripts use role="log" on the container with aria-live="polite".
Timestamps use <time dateTime="…"> so assistive tech can parse the absolute time behind relative phrases ("2 min ago").

For streaming conversation, polite live regions avoid interrupting the user while still announcing new messages.
For agent replies that replace placeholder text ("typing…"), update the same node so the change is announced as an edit rather than a new entry.

Known caveats

Highlight contrast. <mark> inherits browser defaults; verify the theme's mark color meets 4.5:1 contrast in both light and dark modes.
Long monologues. Messages with thousands of words should be split into separate bubbles; one enormous bubble buries the metadata and exhausts screen readers.

Message / API and Development

Message List / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Known caveats

Message

Accessibility

What the component handles

Metadata-first DOM order. Name, role, and timestamp render before bubble content, so assistive tech reads context before the body.
Highlight markup. MessageHighlight renders <mark> with a visible background change.
Toolbar reveal. Actions reveal on hover and focus; keyboard users get the same reveal via focus-within.

What you must provide

Keyboard-accessible actions. If the toolbar only appears on hover, ensure keyboard focus within the message also reveals it. Don't rely on hover alone.
Accessible names for icon-only actions. Toolbar buttons ("Copy", "Reply", "Edit") must have labels—use aria-label on each Button.
Live-region announcements for incoming messages. In real-time transcripts, wrap the list in role="log" with aria-live="polite"; screen readers will announce new entries as they arrive.

Keyboard behavior

Tab / Shift+Tab move between messages and their interactive children.
Enter / Space activate focused buttons and links.
When a message is interactive (selectable, editable), Tab should land on it and Enter/Space should activate the primary action.

Semantics and roles

Each message is a list item when rendered inside a transcript (<ul>/<li>).
Real-time transcripts use role="log" on the container with aria-live="polite".
Timestamps use <time dateTime="…"> so assistive tech can parse the absolute time behind relative phrases ("2 min ago").

For streaming conversation, polite live regions avoid interrupting the user while still announcing new messages.
For agent replies that replace placeholder text ("typing…"), update the same node so the change is announced as an edit rather than a new entry.

Known caveats

Highlight contrast. <mark> inherits browser defaults; verify the theme's mark color meets 4.5:1 contrast in both light and dark modes.
Long monologues. Messages with thousands of words should be split into separate bubbles; one enormous bubble buries the metadata and exhausts screen readers.

Message / API and Development

Message List / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Screen reader announcements

Known caveats