Focusgroup: Chat Pattern

Catbot

An unassuming chatbot that responds to any message with a randomly-chosen cat fact from Wikipedia.

The message list is a focusgroup="toolbar block nomemory" with role="feed" applied on top, since there are no out-of-the-box semantics that exactly fit a chat message list. This example also demonstrates using focusgroupstart to manually handle memory with the exception of updating to the latest message when a new one arrives.

focusgroup="toolbar block nomemory"

Try it: Use ↓ and ↑ to navigate. Press Tab when on a specific message to reach its actions toolbar, or any links within the message. Try typing a new message into the input and tabbing back to the message list to see the latest catbot response focused.

Up/Down arrows navigate between messages
PageUp and PageDown are not built into focusgroup. Add JavaScript handlers if your chat pattern requires them
The message that functions as the tab entry point state (focusgroupstart) is managed by JavaScript. This enables manual "memory" that updates when a new message is posted.
Because there is no well-established semantic pattern for chat message lists, role="feed" and role="article" are manually added in this example. The toolbar token is used as the base, since it doesn't automatically apply roles to its children.
Press Tab from bot responses to reach the inner message actions toolbar.
Left/Right arrows navigate between actions in the inner message actions toolbar.

View source

<div focusgroup="toolbar block nomemory"
     aria-label="Chat with catbot"
     role="feed" id="message-list">
  <div class="message user" role="article" tabindex="0">
    When were cats domesticated?
  </div>
  <div class="message catbot" role="article" tabindex="0" focusgroupstart>
    <div class="message-actions" focusgroup="toolbar nomemory">
      <button>Copy</button>
      <button>Like</button>
      <button>Dislike</button>
      <button>Share</button>
    </div>
    The domestic cat is the only domesticated species of the family Felidae.
    Advances in archaeology and genetics have shown that the domestication of the cat
    started in the Near East around 7500 BCE.
  </div>
</div>