Skip to content

TaskPane

C-39 · Components · Editor (Office)

All elements · TaskPane on the Components page

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

Copies the bun run a11y:approve command for TaskPane.

TaskPane

C-39 OfficeWCAG 2.2 AA · Passed

A complementary landmark (<aside aria-labelledby>) docked at the end (or the start: navigation, thumbnails, the PDF left pane). Opening moves focus to the title; closing returns it. Two end panes share a dock with a tab strip; under 48rem a pane becomes a drawer.

Axis / element Values
data-side start · end (default)
data-presentation docked (default) · card (floating card) · drawer
__header · __back · __title · __actions · __toolbar · __body · __footer · __section-label parts
.qf-pane-dock · __tabs · __tab two panes in one dock
Comments pane

Guidance

When to use

  • Use it in the office editors for work that runs alongside the document, such as Comments, Styles, Format shape or Accessibility.
  • Dock it at the end (the default) for tools, or at the start (data-side="start") for navigation, thumbnails and the PDF left pane.
  • Use .qf-pane-dock with tabs when two end panes are open at once.
  • Use data-presentation="card" for the floating card, and let it become a drawer under 48rem.

When to consider something else

  • When the task blocks the document until it is done, use a Confirmation or a dialog Overlay. See Overlay.
  • For short contextual options near a control, use a Popover. See Popover.
  • For the record detail pane outside the editors, use the Object composite in the Shell. See ObjectDisplay.
  • When users need to resize the side panel freely, combine it with Resizable. See Resizable.

Usability

Do
  • Give every pane a short visible __title; it is also the landmark's name.
  • Put a Close button in __actions, and a __back button when the pane has levels.
  • Keep the document usable while the pane is open; the pane does not block it.
  • Use Fluent Regular glyphs for pane actions inside .qf-office (README, Icons).
Don’t
  • Don't stack more than two end panes; two share one dock with a tab strip.
  • Don't use a pane for a single yes or no decision.
  • Don't trap focus in a docked pane; only the drawer form behaves as a modal layer.

Accessibility

Keyboard

TaskPane keyboard
Keys Action
Tab / Shift+Tab Moves through the pane's controls in DOM order, then back to the editor.
Enter or Space on Close Closes the pane and returns focus to the control that opened it.
Arrow Left / Arrow Right on dock tabs The binding must move between the panes in a shared dock and show the selected one; the static layer switches panes on click only.
Escape in the drawer form The binding must close the drawer and return focus to its opener.

Roles and names

  • The pane is an <aside> (complementary landmark) with aria-labelledby pointing at __title.
  • __title is a heading with tabindex="-1" so it can take focus on open.
  • In a dock, __tabs is role="tablist" with an aria-label, and each __tab is role="tab" with aria-selected and aria-controls.
  • Icon-only actions such as Filter and Close need an aria-label; a Filter menu button carries aria-haspopup and aria-expanded.

Focus

  • Opening the pane moves focus to __title; closing it returns focus to the opener.
  • The title shows a visible focus ring when it receives focus.
  • The drawer form under 48rem uses the Overlay focus trap and returns focus on close.

Other requirements

  • The pane width is 20rem, clamped between 16rem and 32rem; under 48rem it becomes a drawer so content reflows at 320 CSS px (1.4.10).
  • A docked pane must not cover the focused item in the document (2.4.11).
  • In forced colors its borders use system colors.

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.

TaskPane 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. (4 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 -- task-pane --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.

TaskPane package
Source css/classic/components/pane.css
Specimens also use Avatar · Box · Button · Card · Chip · CommentThread · Icon · 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