Environment ribbon

A strip saying which non-production environment this is.

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-env-ribbon" role="status">
  <svg class="wsu-icon" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-triangle-alert"/></svg>
  Staging, data here is not real
</div>

{{-- Reads APP_ENV and the wayne-ui.environment config. Renders nothing
     in production. --}}
<x-wsu::env-ribbon />

<EnvRibbon :environment="page.props.wayneUi.environment.name" />

Why it works this way

1.x signaled this by turning the whole navigation bar maroon, which is information carried by color alone. The color is kept here as the familiar cue, but the strip also says what it means, so the warning survives without color vision and in a printout.
It renders nothing in production, so it can sit in the layout unconditionally.

Accessibility

role="status", so it is announced without interrupting (4.1.3).
Text plus an icon, never color alone (1.4.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
`label`	`config('wayne-ui.environment.labels')`	Overrides the generated wording.
`when`	`not production`	Force the ribbon on or off.

Vue

Prop	Type and default	What it does
`environment`	`String, 'production'`	Typically import.meta.env.MODE or the shared APP_ENV value.
`production`	`Array, ['production','prod']`	Anything not listed shows the ribbon.
`label`	`String, ''`	Overrides the generated wording.

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-env-ribbon.

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

Environment ribbon ​