Message from @prepared911/ui-core 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.
- 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 IconButton.
- 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.
- 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.
- 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").
Screen reader announcements
- 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.
- 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.
