Toolbar | brumate/ui

A toolbar where the arrow keys move focus between its items.

<script>
  import Button from '@brumate/ui/Button.brm';
  import Separator from '@brumate/ui/Separator.brm';
  import ToggleButton from '@brumate/ui/ToggleButton.brm';
  import ToggleButtonGroup from '@brumate/ui/ToggleButtonGroup.brm';
  import Toolbar from '@brumate/ui/Toolbar.brm';
</script>

<Toolbar class="ui-group" aria-label="Text">
  <ToggleButtonGroup class="ui-group" aria-label="Style" selectionMode="multiple">
    <ToggleButton id="bold" class="ui-button">B</ToggleButton>
    <ToggleButton id="italic" class="ui-button">I</ToggleButton>
  </ToggleButtonGroup>
  <Separator orientation="vertical" class="ui-separator" />
  <Button class="ui-button">Copy</Button>
  <Button class="ui-button">Paste</Button>
</Toolbar>

Left and Right move focus in a horizontal toolbar, and Up and Down in a vertical one. Home and End go to the first and the last item.
Right to left, as in an I18nProvider of ar or he, Left and Right turn around.
Tab stops at one item, the one that had focus last, and the next Tab leaves the toolbar. This is the roving tabindex of the WAI-ARIA toolbar.
A text field inside keeps the keys that move its caret.
A ToggleButtonGroup inside leaves the keys to the toolbar.