Alarms and status

Alarm Grid <smart-alarm-grid>

AlarmGrid is an ISA-18.2 alarm summary.

Accessibility Attributes

The AlarmGrid is an ISA-18.2 alarm summary built on the Table component. It renders a table element with the grid role, and the alarm rows take one tab stop with arrow key navigation between them. The state of every alarm is available as text and not only as a colour.

The following ARIA attributes are used inside the AlarmGrid:

  • role="grid" - set by the Table on its table element, so rows, columns and headers carry grid semantics. The component itself has role="presentation".
  • aria-label - names the table, so a reader landing in it knows it is the alarm summary. A screen carrying several tables is otherwise indistinguishable.
  • aria-rowindex - set on each row, so a reader can report position within the summary even while it is virtualized.
  • aria-selected - indicates whether a row is selected. Rows carry it while selection is on.
  • State as text - the derived ISA-18.2 state is a column, not only a colour - "Unacknowledged", "Returned to normal, unacknowledged", "Shelved". The stylesheet colours the row from the same value, so colour is reinforcement rather than the only channel, which is what ISA-101 asks for and what a colour-blind or screen-reader user needs.
  • aria-disabled - set on the component while it is disabled. The rows also leave the tab order.
  • Live announcement - when the number of outstanding alarms rises, the grid speaks the announceNew message through the shared live region, with the number of outstanding alarms and the highest outstanding priority. The announcement is assertive when that priority is 1 and polite otherwise.

Keyboard Interaction

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

Key Action
Tab Moves into the alarm rows and out again. The rows take one tab stop.
Arrow Up/Down Moves between alarm rows. Past the last row the focus goes to the first, and the reverse.
Home / End Moves to the first / last row.
Page Up / Page Down Moves the focus ten rows up / down, stopping at the first / last row.
Enter or Space Selects the focused row, or clears it if it is selected, while selection is on. It goes through the Table's own selection, so it raises the Table's change event.

Operator actions, acknowledge, shelve, suppress, take out of service, are methods rather than built-in controls, so the application owns their buttons and their keyboard behaviour. Always identify an alarm by its id and never by row index: the summary is sorted and filtered, so an index stops meaning anything the moment either changes.

Localization

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

  • unacknowledged
  • acknowledged
  • rtnUnacknowledged
  • shelved
  • suppressed
  • outOfService
  • normal
  • columnState, columnPriority, columnTag, columnMessage, columnTimestamp, columnArea
  • gridLabel
  • announceNew

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.