Skip to content

StatusBar

C-40 · Components · Editor (Office)

All elements · StatusBar on the Components page

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

Copies the bun run a11y:approve command for StatusBar.

StatusBar

C-40 OfficeWCAG 2.2 AA · Passed

A footer region holding one role="toolbar": items are buttons when they open something (page → Go to, words → Word count), text otherwise; values are not live. The end holds the view radio set and the zoom control. It is not the app's page footer, which holds the version and legal links: that is Footer (C-51).

Axis / element Values
__bar · __start · __end layout
__item · .qf-button[data-variant="command"][data-size="sm"] text and actionable items
__views · __zoom · __sep view buttons · zoom (C-38) · separator
data-priority items that move out first at narrow widths
Document

Guidance

When to use

  • Use it at the bottom of an office editor for document facts such as page, word count and language.
  • Use it to hold the view radio set and the zoom control at the end.
  • Make an item a button only when it opens something, such as Page to Go to or Words to Word count.
  • Mark items with data-priority so they move out first at narrow widths.

When to consider something else

  • When a change needs the user's attention, use a Banner or a Toast; status bar values are not announced. See Banner.
  • For progress of a long task, use Progress. See Progress.
  • For page navigation in a list or table, use Pagination. See Pagination.
  • For the app's version, accessibility statement and legal links at the bottom of a page, use Footer; a status bar holds live document facts and controls. See Footer.

Usability

Do
  • Keep items short and factual, such as "Page 1 of 4" and "1,284 words".
  • Give actionable items an accessible name that says what they open, such as "Page 1 of 4. Go to a page".
  • Group the view buttons in __views and the zoom parts in __zoom, separated by __sep.
  • Use Fluent Regular glyphs for view and zoom buttons inside .qf-office (README, Icons).
Don’t
  • Don't put critical messages or errors only in the status bar.
  • Don't make plain text items into buttons that do nothing.
  • Don't make the values a live region; they change too often to announce.

Accessibility

Keyboard

StatusBar keyboard
Keys Action
Tab Moves to the status bar toolbar's single stop.
Arrow Left / Arrow Right Moves between actionable items, view buttons and zoom controls.
Ctrl+Arrow Left / Ctrl+Arrow Right Jumps between the start and end sections.
Home / End Moves to the first or last control.
Enter or Space Opens the item's dialog, or switches the view.

Roles and names

  • The container is a <footer> with an aria-label; __bar inside it is role="toolbar" with its own aria-label.
  • Actionable items are command Buttons (data-variant="command", data-size="sm"); text-only items are __item spans.
  • __views is role="group" labeled "Views"; its buttons use aria-pressed, one on at a time.
  • __zoom holds Zoom out and Zoom in buttons, the Slider, and a percent button that opens the Zoom dialog.

Focus

  • One tab stop for the whole bar (roving tabindex); the last focused control keeps the stop.
  • Dialogs opened from an item return focus to that item when they close.

Other requirements

  • Values are not live; a user checks them on demand (4.1.3 does not require announcing them).
  • Small command buttons are 1.5rem (24px), which meets 2.5.8.
  • At narrow widths priority items move out so the bar does not scroll sideways (1.4.10).
  • Status text must meet 4.5:1 against the bar (1.4.3).

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.

StatusBar 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. (4 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- statusbar --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.

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

Latest updates

StatusBar latest updates
Date Version Breaking Description
2026-10-20 0.1 No StatusBar: its description and guidance now tell it apart from Footer (C-51): the status bar holds live document facts and controls, the footer the version and legal links

All release notes