Progress

A determinate progress bar, or an indeterminate one for a wait whose length nobody knows yet.

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.

<progress class="wsu-progress wsu-progress--brand" value="12" max="15"
           aria-label="Credits enrolled toward the 15 required">12/15</progress>

<!-- Indeterminate: value is omitted, not zero -->
<progress class="wsu-progress wsu-progress--brand" max="100" aria-label="Submitting your request"></progress>

<x-wsu::progress label="Credits enrolled toward the 15 required" :value="12" :max="15" />

<Progress label="Credits enrolled toward the 15 required" :value="12" :max="15" />

Why it works this way

<progress> already tells assistive technology its role and current value. What it cannot supply on its own is what the number means, so label is required on every path, and Blade and the standalone function throw rather than render "40 percent" of nothing in particular (4.1.2).
Leaving value unset renders the browser's own indeterminate state rather than a fake animation standing in for one.
This example lives on the internal template, where it shows a signed-in student's own credits toward a requirement. The public catalog page is browsed anonymously, with nobody signed in to have progress to show.

Accessibility

label is required, because a number with nothing to say it is 40 percent of is worse than silence (4.1.2).
Native <progress> carries its role and value to assistive technology without any ARIA added by hand.

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
`label`	`required`	Throws if omitted (WCAG 4.1.2).
`value`	`null`	Omit for an indeterminate bar.
`max`	`100`	The value progress counts toward.
`variant`	`'brand'`	brand, accent, success or danger.

Vue

Prop	Type and default	What it does
`label`	`String, required`	Throws if omitted (WCAG 4.1.2).
`value`	`Number or String, undefined`	Omit for an indeterminate bar.
`max`	`Number or String, 100`	The value progress counts toward.
`variant`	`String, 'brand'`	brand, accent, success or danger.

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-progress.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`progress`	`aria-label`	1

Progress ​