Production floor
Stack Light <smart-stack-light>
StackLight displays the tower light of a machine as a column of coloured segments that can be off, on, flashing or flashing fast, with an optional horn.
Accessibility Attributes
A stack light communicates by colour, which is not available to a screen reader, so the tower is exposed as an image whose accessible name describes it in words, for example "Case packer: red flashing fast, horn sounding, fault". The name is built from the lit segments, their states, the horn and the state word, and is updated on every change. The same text is returned by describe(), so an application can show it in its own status line. When the horn is on or muted it is a button: pressing it raises muteRequest, and its pressed state indicates whether the application has muted it. The optional legend repeats the label and state of each segment as text.
Flashing is conveyed by colour and motion for sighted users and by the words flashing and flashing fast in the accessible name. With prefers-reduced-motion the animation stops and a flashing segment is drawn lit with a broken ring, so on and flashing remain distinguishable.
The following ARIA attributes are used inside the StackLight:
- role="img" - set on the tower, with an aria-label that is the light in words: label, lit segments and their states, the horn, the state word.
- aria-label - set on the horn button, "Silence the horn", and aria-pressed, true once the application has muted it.
- title - set on each segment with its label, for the pointer.
- aria-label - set on the legend list, naming it.
With announceChanges on, each change of what the light says is announced through the shared live region, assertively when the horn sounds or a segment flashes fast. It is off by default: an andon board is a wall of lights, and a screen reader user opens the one they want to hear.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the StackLight:
| Key | Action |
|---|---|
| Tab | Moves to the horn button when the horn is on or muted. A tower with no horn has no tab stop: it is an image. |
| Enter or Space | On the horn while it sounds, raises muteRequest. The light does not silence the horn itself; the application answers by setting horn to muted. |
Clicking a segment raises segmentClick with its id and state, for a board that opens a station on its light.
Localization
All strings the StackLight 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 StackLight uses the following message keys:
- lightLabel, lightLabelNoName, segment, stateOn, stateFlash, stateFast, stateOff, allOff, hornOn, hornMuted, hornOff, muteHorn, stateWord, red, amber, green, blue, white, legendLabel
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. The five colour names are localized; a segment's own label and the state word come from the application and are not.
Additional information on WAI-ARIA for the SMART Framework can be found here.