Conversation Thread Testimonials Block for React

Edit THREAD at the top of the file, oldest first (and REASONS, the three short lines beside it that say what changed the sceptic's mind): each message has a quote, the sender's name, role and initials, and a relative time such as "Yesterday". FOLDED says how many of the first messages sit behind the row; the rest are always open. The count in the row and the badge by the subject are both worked out from the list.

It is a disclosure button that says whether the earlier messages are shown, and it opens and closes with Enter or Space. The earlier messages are in the page while it is closed but hidden from everyone, so they are neither read by a screen reader nor reachable by Tab until you open the row. The chevron turns over to show the state.

The section's heading is an h2, the subject is an h3, and the open and folded messages are two ordered lists in the order they were sent. The frame, the divider and its + marks are decoration and hidden. Each message is a figure: the sender, role and time are its caption and the words are a blockquote. The initials avatars and the little avatar stack on the row are hidden, because the names are written out.

The two columns fade up once on load, and the folded messages open with a short height transition. Both are CSS and switch off with reduced motion, so the messages simply appear and disappear. The Shine Button's light fades in where it stands instead of sweeping.

A chat is a stream of short, informal messages on two sides. This is a thread with a subject, where each message is a full row with a sender and a time, and the older ones fold away like in an email client. Use the chat for the sound of a community, and the thread for a story with a turning point.

Yes, if everyone in it agrees to be quoted. Shorten each message to what carries the story, keep the sender's role and a relative time, and put the message that changes the tone last, since that is the one visitors see without opening anything.