Claim alert

The activity notification from the Employer View Claim screen: one inline message that tells the employer what just happened on a claim and, where there is something to do about it, links straight to it. Three tones, a single optional action link, and an icon that swaps in the success state. Announced passively (role="status") so it never interrupts a screen reader mid-sentence.

The three tones

Tone tracks where the claim sits, not how loud the message is. There is no red tone: a declined claim reads as calm information and the verdict rides the status badge, not the alert.

Info — the default, something has happened

class="claim-alert" · role="status"

A decision has been made on this claim. The claim has been accepted and the worker can receive healthcare benefits.

View documents

Review — a decision is still in progress

class="claim-alert alert-review" · role="status"

We are waiting for forms to proceed with this claim. Please submit your report of injury or illness (Form 7).

Complete Form 7

Success — wage-loss benefits are payable

class="claim-alert alert-success" · role="status" · icon swaps to check-circle

Wage-loss benefits have been accepted for this claim.

Without an action link

The link is optional. When there is nothing for the employer to do, it is left off entirely rather than pointing at the page they are already on.

Your report was received on July 12.

In a narrow container

Below the sm breakpoint the message takes the full width and the link drops to its own line.

We are waiting for forms to proceed with this claim. Please submit your report of injury or illness (Form 7).

Complete Form 7

Notes

Server-driven. Which tone applies, whether the alert shows at all, the message, and the link target all come from the server. The claim screen derives them in JavaScript for demo purposes only; that logic is not meant to be ported.

Link colour needs container scoping. wsbc.css sets a:visited to mountain blue, and that selector outranks a plain class, so an unscoped .ca-link renders blue at 2.58:1 instead of ink at 8.19:1. The rules here are scoped to .claim-alert to win on specificity. Worth checking on any prototype that styles links by class alone.

Known contrast issue in the review tone. The yellow icon (--hue-sunriseyellow-dark) measures 2.24:1 against the lightorange fill, under the 3:1 minimum for graphics. The info and success icons pass (3.85:1 and 4.19:1). The fix is to set the review icon to badge ink, which reads 8.3:1 on the same fill. Left as-is here so this file matches the claim screen; worth resolving in both together.

Relationship to wsbc-alerts.html. That file is the generalised rewrite of this component: six tones instead of three, data-tone/data-action attributes instead of modifier classes, a dismiss control, and the review-icon contrast already fixed. This file is the version the claim screen runs today.