Trends and signals
Strip Chart <smart-strip-chart>
StripChart is a real-time chart for continuously acquired samples: the newest sample is drawn at the right and the oldest leaves at the left.
Accessibility Attributes
The StripChart is drawn on a canvas, which is not accessible to a screen reader. The component names what it is trending, and its pen legend is a composite widget with one tab stop and arrow key navigation, so pens can be shown and hidden from the keyboard.
The following ARIA attributes are used inside the StripChart:
- role="img" - set on the plot area that holds the canvas. A canvas has no readable structure, so the plot needs a text alternative; the legend and the readout outside it stay operable.
- aria-label - names the chart and the pens it is trending - "Strip chart, 4 pens: AI0 in V, AI1 in V..". A role of img without a name announces the presence of a graphic and then refuses to describe it, which is worse than no role at all. For the live numbers, turn on showDigitalDisplay: the readout is real text and updates in place, and it is what a reader should be pointed at for values.
- role="group" - set on the pen legend, with an aria-label, so the pen buttons are announced as one named group.
- aria-pressed - set on each pen button, indicating whether that pen is currently drawn.
- tabindex - managed as a roving tab stop across the pen buttons: one is 0, the rest -1.
- aria-disabled - indicates that the chart is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the StripChart:
| Key | Action |
|---|---|
| Tab | Moves into the legend, landing on the pen that holds the tab stop, and out again. The legend is one stop however many pens there are. |
| Arrow Left/Right | Moves between the pens. Reversed when rightToLeft is set. |
| Home / End | Moves to the first / last pen. |
| Enter or Space | Shows or hides the focused pen, raising penVisibilityChange. |
The plot area itself takes no keyboard focus. There is nothing in it to operate, the chart is a display, and everything that can be changed is in the legend.
Localization
All strings the StripChart 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 StripChart uses the following message keys:
- paused
- chartLabel
- chartLabelWithPens
- legendLabel
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.