Message Group
People send three messages in a row. Rendering the avatar and the name above each of them turns a conversation into a column of identical headers — the thread stops reading as a conversation and starts reading as a table. This wraps the run: the sender appears once, the bubbles sit closer together, and their inner corners round tighter so the three read as one turn.
Each message keeps its own timestamp. A run shares a sender, not a moment.
Basic Usage
Put the sender on the group and on each message inside. They
take the same author shape, so the same array goes to both: the group paints the
name once, above the run, and every message keeps its own copy for assistive
technology, hidden rather than painted.
Sides
side mirrors Message's alignment, so a run from the person
reading the thread sits on the other side.
What the group changes about the messages inside
Nothing in the markup of a message changes — a message renders the same whether it sits in a group or not. What the group does is style its own run:
- The avatar of each message inside is not painted. Its accessible name is the sender's name, which the group already carries, so a second copy is noise.
- The name is hidden visually and stays in the accessibility tree. A screen reader that lands on the third bubble of a run still has to be able to say who wrote it.
- The inner corners round tighter, using logical properties, so a right-to-left thread mirrors without a second rule.
- The gap between bubbles is
--space-wk-xs, tighter than the--space-wk-smbetween the avatar and the run.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
author |
array|string | [] |
The sender, in the same shape Message takes: ['name' => …, 'avatar' => …]. A bare string is read as the name. It is printed once, above the run, with the initials of the name when there is no avatar |
side |
string | 'left' |
left or right, mirroring Message |
scope |
string|null | null |
Scoped personalization name |
Accessibility
- The group is a
role="group"named after its sender — "Messages from Ada" — so a reader entering the run hears whose it is before the first message. Without a name the group gets no label at all, rather than an empty one. - The name painted above the run is
aria-hidden. The group's label and every message inside already give the sender to assistive technology, so reading the painted copy as well would only repeat it. - Each message inside keeps its own
role="article"and its own accessible name, so the run is navigable message by message. - The sender's name inside each message is hidden with the visually-hidden pattern
rather than
display: none, which would take it out of the accessibility tree along with the pixels.
Keyboard Interaction
This component is presentational and does not respond to keyboard input. The messages inside keep whatever their own actions provide.
Pitfalls
- Group one sender, not one topic. The moment the sender changes, close the group and open the next one — otherwise the single name above the run is wrong for everything below it.
- Keep the timestamps. They are what makes a run readable as a sequence; the group deliberately does not collapse them.
- Do not nest a group in a group. The inner one would print a second sender inside a run that already has one.
Design Tokens
| Element | Token |
|---|---|
| Sender name size | --text-wk-sm |
| Sender name weight | --font-wk-heading-weight |
| Sender name color | --color-wk-text |
| Gap between avatar and messages | --space-wk-sm |
| Gap between messages in a run | --space-wk-xs |
| Rounded inner corners | --radius-wk-sm |
| Font family | --font-wk-sans |
Further Reading
- Message — the bubble this groups
- Message Typing — the indicator that follows a run
- WAI-ARIA:
grouprole