Status Tile <smart-status-tile>

Accessibility Attributes

A status tile shows four things: what the value is, its reading, whether the reading is normal, and its trend direction. The StatusTile includes the state in its accessible name as a word, so an operator who cannot distinguish amber from red still reads "Warning".

The whole reading is exposed as one accessible name rather than as separate nodes. A tile split into label, value, unit, state and trend would require five stops to read one value, and the value is only meaningful as a whole.

The following ARIA attributes are used inside the StatusTile:

• role="group" - set on the tile's container when it is not interactive. The tile reports and is not operated, so it is not announced as anything pressable.
• role="button" - replaces the group role when interactive is set, alongside a tabindex, because the tile then genuinely does something.
• aria-label - the entire reading, in the order it is read on screen: the label, the value with its unit, the state as a word, then the trend as a direction and an amount. "OEE, 78.4 %, Warning, down 2.1%".
• aria-hidden="true" - set on the sparkline, when there is one. The tile's own name already carries the reading and the state; a chart repeating them is noise rather than information, and the shape it draws has no text equivalent worth announcing.
• aria-disabled - indicates that the tile is disabled.

The trend direction is not conveyed by the arrow glyph alone. The direction is also written as a word in the text content of the tile, for example "up 1.4%" or "unchanged", because an arrow glyph read aloud is either silent or announced as an unrelated character.

Keyboard Interaction

A plain StatusTile takes no keyboard focus. It reports a reading and raises nothing, so there is nothing to operate, and putting it in the tab order would add a stop that wastes an operator's time, on a wall of thirty tiles, thirty of them.

Setting interactive makes the tile a real button and puts it in the tab order:

The focus indicator is a two-tone ring, a solid outline with a contrasting halo, so that it clears 3:1 against both the near-white panel and the darker canvas an operator screen puts tiles on. A single-colour ring that passes on one of those surfaces fails on the other.

Announcements

The tile can announce a change of state, but does not by default. Thirty tiles announcing themselves on a wall display is not an accessible screen but an unusable one, so announceChanges is off unless a tile carries something that genuinely warrants interrupting.

When announcements are enabled, they go through the framework's shared live region rather than a region per tile, and only when the state changes, not on every value update. A tile that reaches the critical state announces assertively; every other change is announced politely.

Localization

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

• ok, advisory, warning, critical, unknown, neutral - the state words that go into the accessible name
• up, down, flat - the trend directions
• empty - what a tile with no reading says
• targetLabel

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

tile.messages = Object.assign({}, tile.messages, { de: germanPack });

The state words and the trend words are produced when the tile draws, so a change of locale or messages redraws it, the accessible name follows the language, which is the half of the screen most easily left behind.

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