Ropav

Toolbar ​

A toolbar collects related controls and gives them a shared keyboard. Its point is not the row — a flex container does that — but what Tab does with it: a toolbar of nine buttons is one thing to move past, not nine.

ts
import { Toolbar } from "ropav";
orientation
template
<Toolbar aria-label="Document actions">
  <Button variant="secondary">Undo</Button>
  <Button variant="secondary">Redo</Button>
  <Separator />
  <Button>Publish</Button>
</Toolbar>

Groups and rules ​

Whatever sits inside takes its axis from the toolbar, so nothing has to be told twice. A Separator inside a horizontal toolbar draws a vertical rule — a row of controls is broken up across the row — and a ButtonGroup or ToggleButtonGroup lays itself out along the toolbar's own direction.

toolbar-groups.vue
vue
<script setup lang="ts">
import {
  Button,
  ButtonGroup,
  ButtonGroupSeparator,
  Separator,
  ToggleButton,
  ToggleButtonGroup,
  ToggleButtonGroupSeparator,
  Toolbar,
} from "ropav";
</script>

<template>
  <Toolbar aria-label="Text formatting">
    <ToggleButtonGroup aria-label="Text style" selection-mode="multiple">
      <ToggleButton id="bold">Bold</ToggleButton>
      <ToggleButton id="italic">
        <ToggleButtonGroupSeparator />
        Italic
      </ToggleButton>
    </ToggleButtonGroup>

    <Separator />

    <ButtonGroup>
      <Button variant="secondary">Undo</Button>
      <Button variant="secondary">
        <ButtonGroupSeparator />
        Redo
      </Button>
    </ButtonGroup>
  </Toolbar>
</template>

is-attached lifts the controls onto a raised, rounded surface instead of leaving them bare — for a toolbar that floats over content rather than sitting in the page.

Accessibility ​

  • Every control stays tabbable, and the arrow keys move between them. They clamp at the ends rather than wrapping: the end of a toolbar is a boundary, not a loop.
  • Tab moves focus to the far end of the toolbar and then lets the browser carry on, so a keyboard user leaves the whole toolbar in one press.
  • The control focus last sat on is restored when focus comes back from outside, so returning to a toolbar does not put you back at its first button.
  • A text field keeps the arrow keys for its own caret, so a search box belongs in the row rather than beside it.
  • A toolbar inside a toolbar reports role="group" and hands its keys upward. Only the outermost one owns the keyboard, which is what stops an arrow key being consumed twice.
  • Give the toolbar an aria-label, and an icon-only control inside it one of its own.

API ​

PropTypeDefaultDescription
isAttachedboolean—Lifts the controls onto a rounded, raised surface instead of leaving them bare.
orientation"horizontal" | "vertical""horizontal"Axis the controls are laid out along, which decides the arrow keys.

Slots: default.