Skip to content

VersionHistory

C-44 · Components · Versioning

All elements · VersionHistory on the Components page

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

Copies the bun run a11y:approve command for VersionHistory.

VersionHistory

C-44WCAG 2.2 AA · Passed

Every version of a document, newest first, grouped by Published version with its Draft checkpoints beneath. Published rows are solid with a green edge, Superseded rows sunken and muted, Draft rows indented with a dashed edge; each also says its status in a badge. Published only hides the drafts. In the editor's side pane and on the qaction document screen.

Axis / element Values
.qf-version-history[data-filter] all (default) · published
__toolbar · [data-version-filter] · __count the Published only switch and the polite count
__groups › __group (data-drafts-only) › __toggle · __drafts one group per major number; the disclosure (aria-expanded, aria-controls) shows its drafts
.qf-version[data-status] · aria-current · data-version published · superseded · draft / the version that is open / its label
.qf-version-history__head · .qf-hold-badge the title row; under legal hold it carries the On hold badge, a warning .qf-chip with the gavel and its words, also used in a pane's .qf-object__meta
__head · __label · __status[data-status] · __tag · __meta · __comment · __actions row parts; actions carry data-version-action = open · compare · restore
Grouped history with the Published only filter

Version history

8 versions

  1. Version 3.0

    PublishedLatest published

    Jane Doe · 8 Oct 2026, 09:14 · 214 KB

    Approved for release to the insurer.

    1. Draft 3.2

      DraftCurrent

      Mark Rivera · today, 16:20 · checkpoint when the editor closed

    2. Draft 3.1

      Draft

      Jane Doe · today, 11:02

  2. Version 2.0

    Superseded

    Jane Doe · 2 Oct 2026, 14:40 · superseded by 3.0

    Adds the moisture readings to section 2.

  3. Version 1.0

    Superseded

    Jane Doe · 14 Aug 2026, 15:02 · superseded by 2.0

    Created from the Harbourline site report.

Under legal hold: the On hold badge in the pane header and the history title
Report.docx
ReportOn holdClaims · Modified 9 Oct 2026

Version history

On hold

  1. Version 2.0

    PublishedLatest published

    Mark Rivera · 9 Oct 2026, 10:12

Guidance

When to use

  • Use it in the editor's Version history pane and on the qaction document screen to list every version of one document.
  • Group by published version: each __group starts with a Published or Superseded version and holds the Draft checkpoints with the same major number beneath it (__drafts).
  • Expand the newest group's drafts and collapse older ones; the __toggle names how many drafts it holds.
  • Offer Published only ([data-version-filter]) and keep __count in step with what is shown.
  • Mark the version that is open with aria-current="true" and a __tag (Current, Viewing, Latest published).
  • When the document is under legal hold, put the On hold badge (.qf-hold-badge, a warning Chip with the gavel and the words On hold) in __head beside the title, and the same badge in the pane header beside the file name; take it away when the last hold is released.

When to consider something else

  • For who viewed, downloaded or changed the document, use a List of audit events, not version rows. See List.
  • For many documents' versions at once, use a Table. See Table.

Usability

Do
  • Say the status in __status on every row: Published, Superseded or Draft.
  • Show the comment of every published version; drafts show who and when.
  • Restore makes a new Draft checkpoint with that version's content; say so in the button (Restore as checkpoint).
  • Hide Restore as checkpoint on the current version.
Don’t
  • Don't rely on the green edge, the sunken fill or the dashed edge alone; the badge names the status.
  • Don't make the whole row a button: a row holds several actions.
  • Don't show the On hold badge as an icon only or make it a button; it states a fact, and the Publish version dialog explains what a hold means.
  • Don't remove superseded versions from the list; they stay for the record and are distinct, not hidden.

Accessibility

Keyboard

VersionHistory keyboard
Keys Action
Tab / Shift+Tab Moves through the Published only switch, each group's disclosure and each row's actions in reading order.
Space on Published only Toggles the filter; __count announces the new count politely.
Enter or Space on a disclosure Shows or hides that group's drafts (aria-expanded).

Roles and names

  • The list is an <ol> of groups and each group's drafts a nested <ol> with an aria-label ("Drafts since 3.0").
  • Each row is an <article> labelled by its heading (__label, one level below the pane title).
  • Row actions keep their visible words and add the version in aria-label ("Open version 3.0"), so the name contains the label (2.5.3).
  • __count is role="status".
  • The On hold badge is text with an aria-hidden glyph, never the glyph alone (1.1.1); it is static, not a live region.

Focus

  • Turning on Published only while focus is in a draft moves focus to the switch instead of losing it.
  • After Restore as checkpoint, focus moves to the new draft row at the top of its group.

Other requirements

  • Superseded ink is the secondary ink on the sunken fill and meets 4.5:1 (1.4.3).
  • Actions wrap under the row at narrow pane widths (1.4.10).

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.

VersionHistory 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. (3 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. (5 items)

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

VersionHistory package
Source css/classic/components/versions.css
Specimens also use Box · Button · Card · Chip · Icon · ObjectDisplay · Table · Text · Toggle · Toolbar
Sprites sprites/icons.svg
React Not yet available: the React binding has not started.

Latest updates

VersionHistory latest updates
Date Version Breaking Description
2026-10-10 0.1 No Legal hold before publishing: the Publish version dialog's Under legal hold banner is named in the dialog's aria-describedby so it is read on open (You can publish. No version of this document can be deleted or pruned while it is held.); new .qf-hold-badge (a warning Chip with the gavel and On hold) for a pane header's .qf-object__meta and the new .qf-version-history__head title row, both skins (QF-10830)
2026-10-08 0.1 No VersionHistory (.qf-version-history, .qf-version): versions grouped by published version with draft checkpoints beneath, Published only filter, Draft / Published / Superseded badges, Open, Compare and Restore as checkpoint (QF-10840)

All release notes