Alarms and status
Alarm Banner <smart-alarm-banner>
AlarmBanner shows the alarms an operator should deal with next.
Accessibility Attributes
The AlarmBanner keeps the alarm the operator should handle next in view and announces new alarms as they arrive. It is a live region with an acknowledge control per alarm, and a composite widget: the whole banner is one tab stop with arrow key navigation between alarms.
The following ARIA attributes are used inside the AlarmBanner:
- role="log" - set on the banner's container. A log is the correct role for a running list of events where new entries are appended and older ones scroll away, which is exactly what an alarm banner is.
- aria-live - governs how a new alarm interrupts. It is polite normally and assertive only while the first visible alarm is an unacknowledged critical. A banner that interrupts on every change is unusable with a reader running; one that never interrupts hides the thing it exists for.
- aria-label - names the region, so a reader landing in it knows it is the active alarm list rather than an unlabelled log.
- aria-label (on each acknowledge button) - names the alarm the button acknowledges - "Acknowledge PT-2101" rather than "Ack". A bare "Ack" is meaningless once a reader has moved past the row it belongs to.
- tabindex - managed as a roving tab stop across the acknowledge buttons: one is 0, the rest -1.
- aria-disabled - indicates that the banner is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the AlarmBanner:
| Key | Action |
|---|---|
| Tab | Moves into the banner, landing on the acknowledge button that currently holds the tab stop, and out again. The banner is one stop however many alarms are visible. |
| Arrow Left/Right | Moves between the acknowledge buttons of the visible alarms. Reversed when rightToLeft is set. |
| Home / End | Moves to the first / last acknowledge button. |
| Enter or Space | Acknowledges the alarm the focused button belongs to, raising acknowledge. The banner does not change the record itself, the application writes the acknowledgement back once its control system has confirmed it. |
Localization
All strings the AlarmBanner exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The AlarmBanner uses the following message keys:
- critical
- warning
- advisory
- acknowledge
- empty
- bannerLabel
- acknowledgeAlarm
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Strings that are also exposed as properties default to empty and fall back to the pack, so the default text stays translatable while an explicit property value takes precedence.
Additional information on WAI-ARIA for the SMART Framework can be found here.