Skip to content

MiniToolbar

C-32 · Components · Editor (Office)

All elements · MiniToolbar on the Components page

Last checked 2026-10-22 · Awaiting approval · Accessibility tests

Copies the bun run a11y:approve command for MiniToolbar.

MiniToolbar

C-32 OfficeWCAG 2.2 AA · Passed

The floating formatting bar over a selection or above a context menu: role="toolbar", two rows at most, and never the only path to a command (every one is also in the ribbon).

Axis / element Values
.qf-mini-toolbar__row one or two rows
data-state="faded" fades with pointer distance (not under reduced motion)
data-static in flow, for documentation
Text selection

Guidance

When to use

  • Use it to float the most common formatting commands next to a text selection in an office editor.
  • Use it above a context menu so formatting and the menu's commands appear together.
  • Use it for markup commands over selected text in the PDF viewer.
  • Keep it to one or two __row elements of compact controls.

When to consider something else

  • When the commands are the editor's full command set, use the Ribbon; the mini toolbar only repeats a few of them. See Ribbon.
  • When the actions belong to a row or record rather than a text selection, use a Toolbar or a Menu. See Toolbar.
  • When the options apply to the right-clicked object as a list of commands, use a Menu. See Menu.

Usability

Do
  • Repeat only commands that are also in the ribbon; it is never the only path to a command.
  • Position it near the selection without covering the selected text.
  • Let it fade with pointer distance (data-state="faded"), and skip the fade under reduced motion.
  • Use Fluent Regular glyphs from sprites/office-icons.svg, as for all controls inside .qf-office (README, Icons).
Don’t
  • Don't add more than two rows or long text labels.
  • Don't move focus into it when it appears on selection; the user keeps typing in the document.
  • Don't use data-static outside documentation; it puts the bar in flow.

Accessibility

Keyboard

MiniToolbar keyboard
Keys Action
Tab Moves into the toolbar at its single tab stop, when the host places it in the focus order.
Arrow Left / Arrow Right Moves between controls in the toolbar; text inputs keep their caret keys.
Ctrl+Arrow Left / Ctrl+Arrow Right Jumps to the first control of the previous or next row.
Home / End Moves to the first or last control.
Escape The binding must dismiss the bar and return focus to the document selection.

Roles and names

  • The container has role="toolbar" and an aria-label such as "Formatting" or "Markup".
  • It holds standard controls: command Buttons with aria-pressed, Split buttons, and editable Selects with role="combobox".
  • Icon-only buttons need an aria-label.

Focus

  • One tab stop for the whole bar (roving tabindex via data-rove); the last focused control keeps the stop.
  • Appearing on selection must not steal focus from the document.
  • Each control shows a visible :focus-visible ring.

Other requirements

  • The faded state lowers opacity; when the pointer or focus reaches the bar it must return to full opacity so text meets 1.4.3 and icons meet 1.4.11.
  • The fade is an opacity transition; turn it off under prefers-reduced-motion (2.3.3).
  • The bar must not hide the focused text it acts on (2.4.11 Focus Not Obscured).
  • Small command buttons are 1.5rem (24px), which meets 2.5.8.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

MiniToolbar test checklist
Area Automated A person checks
General Passed Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom Passed At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard Passed Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (5 rows)
Screen reader Passed With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (3 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- mini-toolbar --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

MiniToolbar package
Source css/classic/components/commands.css
Specimens also use Box · Button · Card · Chip · Icon · Select · SplitButton · Table · Text · Toolbar
Sprites sprites/icons.svg · sprites/office-icons.svg
React Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes