Production floor

Downtime Log <smart-downtime-log>

DowntimeLog lists every stop of a line and asks the person who was there why it stopped.

Accessibility Attributes

The DowntimeLog is a table: one row per stop, with the machine as the row header and when it stopped, for how long and why as cells, all as text. Each row is also labelled as one sentence - "Filler, stopped at 08:10 for 7 min, no reason given" - and a stop waiting for a reason says so in words, not only with its edge. The reason picker is a fieldset of radio buttons whose legend asks the question.

The following ARIA attributes are used inside the DowntimeLog:

  • role="group" - set on the container, with an aria-label naming the log - "Line 3 downtime". The two views are a group of buttons with aria-pressed.
  • scope="col" and scope="row" - set on the column headers and on each machine name.
  • aria-sort - set on the column the stops are ordered by, ascending or descending. Each header holds a button, "Order by for", that orders by it, and a second press turns the order round.
  • aria-label - set on each row as a sentence, and on each Give a reason button as the stop it is for - "Give a reason for the stop of Filler at 08:10".
  • fieldset and legend - the reason picker, its legend the question - "Why did Filler stop at 08:10?". The reasons are native radio buttons in groups named by their group heading, so arrow keys move between them.
  • role="alert" - the reason the station refused a reason, announced assertively; the stop stays waiting for one.
  • aria-disabled - indicates that the downtime log is disabled.

Focus moves into the picker when it opens, and back to the button that opened it when it closes. When the station re-sends the stops, which it does every few seconds, the operator keeps the focus, the text of the comment and the caret.

Keyboard Interaction

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

Key Action
Tab Moves through the view buttons, Show short stops, and the Give a reason and Change buttons.
Enter or Space On Give a reason or Change, opens the picker.
Arrow keys In the picker, move between the reasons.
Enter In the comment field, saves the reason.
Escape Closes the picker without saving, and returns focus to its button.

A stop still going counts up once a second in its cell, without rebuilding the table and without being announced: a counter that speaks every second is noise.

Localization

All strings the DowntimeLog 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.

Times are formatted by the browser in the language locale names. The reasons are the plant's and come with it, in its own language: they are not in the pack.

The DowntimeLog uses the following message keys:

  • panelLabel, summary, summaryOne, waiting, waitingOne
  • viewUnclassified, viewAll, showShort, columnMachine, columnStarted
  • columnLength, columnReason, stillStopped, giveReason, change
  • giveReasonLabel, pickerLabel, comment, commentPlaceholder, save
  • saving, cancel, by, short, noStops
  • allExplained, seconds, minutes, hours, stopLabel
  • noReason, export, exportLabel, more, sortLabel
  • columnTo, columnSeconds, columnComment, columnBy

German, French, Spanish and Chinese packs are included in the Smart.Industrial package.

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