Timeline

A sequence of dated events, read as one history.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<ol class="wsu-timeline">
  <li class="wsu-timeline__item">
    <span class="wsu-timeline__marker" aria-hidden="true"></span>
    <time class="wsu-timeline__time" datetime="2026-10-13">Oct 13</time>
    <p class="wsu-timeline__title">Priority registration opened</p>
  </li>
  <li class="wsu-timeline__item">
    <span class="wsu-timeline__marker" aria-hidden="true"></span>
    <time class="wsu-timeline__time" datetime="2027-11-08">Nov 8</time>
    <p class="wsu-timeline__title">Registration closes</p>
  </li>
</ol>

<x-wsu::timeline :items="[
    ['time' => 'Oct 13', 'datetime' => '2026-10-13', 'title' => 'Priority registration opened'],
    ['time' => 'Nov 8', 'datetime' => '2027-11-08', 'title' => 'Registration closes'],
]" />

<Timeline
  :items="[
    { time: 'Oct 13', datetime: '2026-10-13', title: 'Priority registration opened' },
    { time: 'Nov 8', datetime: '2027-11-08', title: 'Registration closes' },
  ]"
/>

Why it works this way

An <ol>, because the order is the information (1.3.2): reordering these entries changes what happened when. Each item is a real list item with a real time element, not a styled div, so the dates it carries are machine readable as well as visible.
The marker dot is a generated, aria-hidden span. The date and title beside it already say everything the dot would otherwise stand in for.
Not the same job as a step in a process still under way. A timeline is a record of what already happened, so the two never share a marker class.

Accessibility

An ordered list, so position and count are announced (1.3.2).
time carries the machine-readable datetime; the marker is decorative and aria-hidden (1.1.1).

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`items`	`[]`	[{ time, datetime, title }]. datetime is the machine-readable ISO value.

Vue

Prop	Type and default	What it does
`items`	`Array, []`	[{ time, datetime, title }]. datetime is the machine-readable ISO value.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-timeline.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`ol`	none recorded	1
public apps/examples/static-html/public-app.html	`ol`	none recorded	1

Timeline ​