Toolbar

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-toolbar class="tui-toolbar" role="toolbar" aria-label="Text formatting">
  <button class="tui-key tui-key--icon tui-toggle-key" type="button" data-toggle-key aria-pressed="false" aria-label="Bold"><b>B</b></button>
  <button class="tui-key tui-key--icon tui-toggle-key" type="button" data-toggle-key aria-pressed="false" aria-label="Italic"><i>I</i></button>
  <i class="tui-toolbar__rule" aria-hidden="true"></i>
  <button class="tui-key tui-key--icon" type="button" aria-label="Link"><svg class="tui-icon" …></svg></button>
  <button class="tui-key" type="button">Clear</button>
</tui-toolbar>

<!-- A column: the arrows go up and down -->
<tui-toolbar class="tui-toolbar" role="toolbar" aria-label="Tools" aria-orientation="vertical">…</tui-toolbar>

import { rovingNext } from '/kit/kit.mjs';   // the same one the toggle group moves by

const bar = document.querySelector('tui-toolbar');
bar.items;                                      // the keys the arrows move between, in order
rovingNext(0, 'ArrowRight', bar.items.length);  // 1

Needs kit.css and kit.mjs. How to install the kit.

• The element is role="toolbar" with a name, and each key is a button, so a screen reader says “Text formatting, toolbar” and then the key.
• With the script the rack is one tab stop and the arrow keys do the rest: they wrap, Home and End go to the ends, disabled keys are passed over, and the focus returns to the key it left.
• A toggle key inside it keeps its own aria-pressed; the toolbar does not touch it.
• Parting lines are hidden from a screen reader; they are only for the eye.
• A narrow screen wraps the rack onto a second row rather than scrolling it, and on a phone each cap is 44px square or taller.
• Nothing moves but the 70ms press of a key, which reduced motion turns off.

It is the button group’s slot with the same three pixels of floor round the keys, so a key’s corner is the slot’s corner less that gap, and the clusters are parted by the toggle group’s engraved cut. What is new is the single tab stop: the toggle group’s rovingNext works out where each arrow goes, and the element keeps exactly one key at tabindex 0, the last one that had the focus. The keys themselves stay the kit’s keys, so every finish and both volumes draw them.