Alert

A status message with an icon, a title and a role that matches its urgency.

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.

<div class="wsu-alert wsu-alert--warning" role="status">
  <svg class="wsu-icon" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-triangle-alert"/></svg>
  <div class="wsu-alert__body">
    <p class="wsu-alert__title">Advising hold</p>
    <p>Meet with an advisor before registering for more than 12 credits.</p>
  </div>
</div>

<x-wsu::alert variant="warning" title="Advising hold">
    Meet with an advisor before registering for more than 12 credits.
</x-wsu::alert>

{{-- Interrupts. Reserve it for something the user must act on now. --}}
<x-wsu::alert variant="danger" title="Session expiring" assertive>
    You will be signed out in one minute.
</x-wsu::alert>

<Alert variant="warning" title="Advising hold">
  Meet with an advisor before registering for more than 12 credits.
</Alert>

Why it works this way

Every variant carries an icon and a title. Status conveyed only by a green or red background is invisible to anyone who cannot distinguish the hues.
role="status" by default, not role="alert". An alert interrupts whatever the screen reader is currently saying, which is right for "your session expires in one minute" and wrong for the four notices a dashboard renders on load.
The Vue component also prefixes a screen-reader-only word (Success, Warning, Error) so the variant is spoken, not just drawn.

Accessibility

Icon plus text plus color (1.4.1).
role="status" is polite, role="alert" is assertive. Choose deliberately (4.1.3).

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
`variant`	`'info'`	info, success, warning or danger. Sets the icon too.
`icon`	`inferred from variant`	Overrides the icon the variant implies.
`title`	`null`	The message in words, so meaning survives without color.
`assertive`	`false`	role="alert" instead of role="status".

Vue

Prop	Type and default	What it does
`variant`	`String, 'info'`	info, success, warning or danger.
`title`	`String, ''`	Rendered above the body.
`role`	`String, ''`	Overrides the role. danger defaults to alert, everything else to status.

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

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	`div`	`role`	3

Alert ​