Production floor

Shift Log <smart-shift-log>

ShiftLog is the book on the control-room desk, kept where the screens are: what one shift needs the next to know that no tag says - that a filler jammed twice and was cleared by hand, that maintenance is coming at ten.

Accessibility Attributes

The ShiftLog is a form and a list. The box is a labelled text area with its category and tag as labelled fields; the entries are an ordered list, newest first, each with its time, author and category as text before the entry itself. Handover and safety entries carry an accent edge, and the category is also written on every entry, so nothing is said by colour alone. An entry that a later one corrects stays in the list and says so in words.

The following ARIA attributes are used inside the ShiftLog:

  • role="group" - set on the container, with an aria-label naming the log - "Line 3 shift log". The category filters are a group of their own, named "Show entries".
  • aria-label - set on the text area, and on the list of entries.
  • aria-pressed - set on each category filter, true on the one in use.
  • aria-label - set on the search box ("Search the log"), the period ("Period") and Export CSV ("Export the entries shown as a CSV file"). While a search or period is on, the count says how many of how many are shown - "2 of 6" - and the words found are marked in the entries with mark, which a screen reader can announce as highlighted.
  • aria-label - set on each Correct button, as the entry it corrects - "Correct the entry of 07:25 by A. Brandt" - so a column of Correct buttons are different buttons to a reader.
  • role="alert" - set on the message that says why the station refused an entry, and aria-describedby ties it to the text area, whose text is put back rather than lost.
  • aria-live="polite" - set on the characters-left counter. When an entry arrives back from the station, "Added to the shift log" is announced once.
  • aria-disabled - indicates that the shift log is disabled.

The Earlier shifts divider has role="presentation": it is a visual break in a list of entries, and the time on each entry already says when it was written.

Keyboard Interaction

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

Key Action
Tab Moves through the text area, the category and tag fields, Add, the filters and the Correct buttons.
Ctrl+Enter In the text area, adds the entry. Enter alone starts a new line, as it does in any text area.
Enter or Space On a filter, lists that category. On Correct, starts a correction in the box.
Escape Cancels a correction, keeping what was typed.
Typing in the search box Narrows the entries as it is typed; the box keeps its text and focus when the station sends the log again.

The entries take no focus. They are text to be read, and the only thing offered on them is Correct. A long log draws a page at a time; Show more, at its end, is a button like any other.

Localization

All strings the ShiftLog 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. Each category is named through a category-<name> message, so a plant's own category needs a message in each language it is shown in.

The ShiftLog uses the following message keys:

  • panelLabel, count, countOne, shiftRange, composerLabel
  • placeholder, categoryLabel, tagLabel, tagPlaceholder, add
  • adding, writingAs, correcting, cancel, correct
  • correctLabel, corrects, corrected, all, earlier
  • empty, noMatch, left, filterLabel, entriesLabel
  • added, category-note, category-handover, category-maintenance, category-quality
  • category-safety, category-production, searchLabel, searchPlaceholder, rangeLabel
  • range-all, range-shift, range-day, range-week, export
  • exportLabel, more, found, columnTime, columnAuthor
  • columnCategory, columnTag, columnText, columnCorrects

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.