Machine state, sequences and sessions
State Machine <smart-state-machine>
StateMachine displays the state model of a machine as a diagram with the current state highlighted, the time in the state, the unit mode and the commands that are available from the current state.
Accessibility Attributes
The StateMachine consists of a diagram and a command bar. The diagram is SVG, named with the current state, and everything it draws is also available as text: the state badge, the time in the state, the mode and the history of transitions. The command bar is a composite widget with one tab stop and arrow key navigation. Every command of the model is listed and only the commands that are valid from the current state are enabled, so a screen reader user hears which commands exist as well as which are possible. A change of state is announced through the live region, assertively for an abort.
The following ARIA attributes are used inside the StateMachine:
- role="group" - set on the container, with an aria-label naming the machine, its model, its state, the time in it and its mode - "Filler F-01, PackML, Execute for 2 min 5 s, Production mode". It is rewritten when a property changes. The time in it is the time at that moment and does not count up between changes; the visible time beside the state counts up every second.
- role="img" - set on the diagram, with an aria-label naming the current state - "State diagram, current state Execute". The diagram is a picture of the model; the commands and the history are its text.
- role="group" - set on the command bar and on the mode bar, each with an aria-label, so the buttons are announced as named groups.
- aria-pressed - set on each mode button, true for the mode in force.
- tabindex - managed as a roving tab stop across the command bar: one command is 0, the rest -1.
- aria-live - a reported change of state is announced through the shared live region, assertive for Aborting and Aborted and polite otherwise.
- aria-disabled - indicates that the component is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the StateMachine:
| Key | Action |
|---|---|
| Tab | Moves through the mode buttons, then into the command bar landing on the command that holds the tab stop, and out again. The command bar is one stop however many commands there are. |
| Arrow Left/Right | Moves between the commands. |
| Home / End | Moves to the first / last command. |
| Enter or Space | On an enabled command, raises commandRequest; the controller moves and the application reports the state it reached. On a mode button, raises modeRequest. |
The diagram takes no keyboard focus. There is nothing on it to operate, a state is reported by the controller, and the only actions are the commands, which are on the command bar.
Localization
All strings the StateMachine 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 StateMachine uses the following message keys:
- summary, inMode, diagramLabel
- commandsLabel, modesLabel, historyLabel, historyEntry, timeInState, noState, fromAny
- model-packml, model-isa88, model-custom
- one state-<id> key per standard state and one command-<name> key per standard command, so both models read in the user's language
- seconds, minutes, hours, days
The packs also carry machineLabel and automatic. The component does not use them yet.
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.