Production floor
State Timeline <smart-state-timeline>
StateTimeline displays the state history of one or more machines as coloured segments on a time axis, one row per machine.
Accessibility Attributes
The StateTimeline conveys its information through the colour and the length of its segments, which are not available to a screen reader, so the timeline is exposed as a grid: one row per machine, and each segment a cell with a full accessible name such as "Fault from 11:00 to 12:00, 1 h 0 min, Jam at infeed", containing the state, the start and end times, the duration and the reason, or "since .. ongoing" for the open segment. The row header is the machine name and, with showSummary, the time in each state as percentages, so the availability figure is read rather than estimated from bar lengths. Colour is never the only indicator of a state: the segment name contains it, and a reason that fits is also printed.
The following ARIA attributes are used inside the StateTimeline:
- role="grid" - set on the timeline, with an aria-label naming it, its rows and its window - "State timeline - Line 2: 4 rows over 8 h".
- role="row" - set on the axis row and on each machine's row.
- role="columnheader" - set on the axis, whose aria-label is the window's start and end.
- role="rowheader" - set on the machine's name cell, with the summary under it.
- role="gridcell" - set on each segment, with an aria-label of state, times, duration and reason, a title of the same, and a roving tabindex: one cell is the tab stop, the selected one or the first.
- Gathered short segments - segments narrower than 2 pixels on screen are drawn together as one cell in the colour of the state that took most of it. That cell's aria-label names the number of segments, the time range and each state with its total time, longest first, for example "3 short states from 10:00 to 10:01: Running 45 s, Fault 15 s". summary() and the row summaries still count every segment.
- role="presentation" - set on the track that positions the segments.
- role="none" - set on the empty-state line.
- aria-label - set on the legend list, naming it.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the StateTimeline:
| Key | Action |
|---|---|
| Tab | Moves into the timeline, landing on the selected segment or the first, and out again. The timeline is one stop. Focus selects the segment and raises selectionChange. |
| Arrow Right / Arrow Left | Moves to the next / previous segment of the same machine. |
| Arrow Down / Arrow Up | Moves to the machine below / above, to its segment under the middle of the current one, what that machine was doing at the same minute, or the nearest. |
| Home / End | Moves to the first / last segment of the row. |
| Enter or Space | Raises segmentClick for the segment, the same event a click raises. |
Setting selected from outside marks the segment without moving the keyboard focus.
Localization
All strings the StateTimeline 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 StateTimeline uses the following message keys:
- timelineLabel, segmentLabel, segmentOpenLabel, mixedLabel, mixedItem, reasonSuffix, summaryItem, summarySeparator, noData, hours, minutes, seconds, spanHours, spanMinutes, legendLabel, rowHeader
- the floor vocabulary's names: running, idle, ready, starved, blocked, stopped, fault, changeover, maintenance, off
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. A state's own label in the states property, machine names and reasons come from the application and are not localized; times are formatted in the 24-hour clock.
Additional information on WAI-ARIA for the SMART Framework can be found here.