Operator screens and process graphics

Device Control <smart-device-control>

DeviceControl is a faceplate for a discrete device such as a motor, a pump or an on/off valve.

Accessibility Attributes

The DeviceControl is exposed as a group whose accessible name contains what an operator reads from the faceplate: "P-2101A, Feed pump A, Running, Manual", with the quality appended when it is not good, so stale feedback is not read as live. The state text is a status region and changes are announced as they happen; a fault is announced assertively with its text. The command buttons stay enabled when a request would be refused: pressing one raises the blocked event and shows the reason in the notice, which is also a status region, so a keyboard user learns why the command was refused. aria-disabled marks such a button as not currently effective without removing it from the tab order. aria-pressed on a command indicates whether it is the one the plant reports as in force, and on a mode whether it is the current mode. A pending request is shown as a dashed button and read as the notice "Start requested, waiting for feedback".

The following ARIA attributes are used inside the DeviceControl:

  • role="group" - set on the faceplate, with an aria-label of tag, description, state, mode and quality.
  • role="status" - set on the state word and on the notice, so a change of feedback and a pending, refused, timed-out or blocked request are read out.
  • role="group" - set on the commands, named "Commands", and on the modes, named "Mode".
  • aria-pressed - set on each command, true for the one the plant reports as commanded, and on each mode, true for the current one.
  • aria-disabled="true" - set on a command that would be refused now. Every command is refused while the faceplate is not interactive; start and open are also refused when the device is not in manual or is under local control, the feedback is bad or stale, an interlock holds it, or a permissive is not met. The button stays in the tab order, and pressing it raises blocked and shows the reason in the notice. The mode buttons and Reset carry aria-disabled="true" while the faceplate is not interactive or is disabled; pressing one then raises no event and shows no reason.
  • aria-hidden="true" - set on the lamp and on the permissive marks; the words beside them carry the meaning.
  • aria-label - set on the permissives list, "Start permissives", each item reading its label and "met" or "not met".

Keyboard Interaction

The following keyboard shortcuts are available to interact with the DeviceControl:

Key Action
Tab Moves through the commands. Start and Stop, or Open and Close, and Reset while faulted, and then the modes, in reading order. Every button is a tab stop.
Enter or Space On a command, raises commandRequest and shows it as pending, or blocked with the reason; on Reset, raises resetRequest; on a mode other than the current one, raises modeRequest. Reset and the modes act only while the faceplate is interactive. The state and the mode do not change until the application answers.

Under prefers-reduced-motion the lamp does not blink; the state word carries the transient states.

Localization

All strings the DeviceControl 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 DeviceControl uses the following message keys:

  • deviceLabel, the states running, stopped, starting, stopping, open, closed, opening, closing, fault, unknown, the commands start, stop, openCommand, closeCommand, reset, the modes auto, manual, local, outOfService, modeLabel, commandsLabel, commanded, pending, timedOut, refused, discrepancy, interlocked, reasonSuffix, needsManual, inLocal, notInteractive, feedbackNotLive, permissiveNotMet, permissivesLabel, met, notMet, qualityUncertain, qualityBad, qualityStale, runHours, starts

German, French, Spanish and Chinese packs are included in the Smart.Industrial package. The tag, the description, the interlock reason, the permissive labels and the fault text come from the application and are not localized by the component.

Additional information on WAI-ARIA for the SMART Framework can be found here.