Maintenance and sites

Asset Card <smart-asset-card>

AssetCard is one machine as maintenance sees it: how long it has run, when it is next due for service, how it is doing and what is open against it.

Accessibility Attributes

The AssetCard is a group named after the asset. Its run hours and starts are a description list; the service line says in words how many hours are left or by how much the service is overdue, and the bar under it is a meter labelled by that line. A condition reading out of band says "high" or "alarm" beside its value, with its limit, so a reading is never abnormal by colour alone.

The following ARIA attributes are used inside the AssetCard:

  • role="group" - set on the container, with an aria-label naming the asset - "Feed pump P-101".
  • role="meter" - the service bar, with aria-valuenow, aria-valuemax, aria-valuetext - "1,840 of 2,000 h since the last service" - and aria-labelledby pointing at the service line.
  • aria-label - set on each work order button - "Open work order WO-1182: Drive-end bearing noise".
  • role="group" with aria-labelledby - the confirmation for Record service, named by its question.
  • aria-disabled - indicates that the asset card is disabled.

The request form is a native form with labelled fields. Focus moves into it when it opens and back to Request work when it is sent or cancelled; when the run hours tick while an operator types, the text and the caret are kept.

Keyboard Interaction

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

Key Action
Tab Moves through the work orders, Request work and Record service, and the fields of an open form.
Enter or Space Opens a work order, the request form, or the confirmation.
Ctrl+Enter In the request text, sends the request.
Escape Closes the form or the confirmation and returns focus to its button.

Localization

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

Numbers and dates are formatted by the browser in the language locale names. Condition labels, units and work order titles are the plant's data, not the pack's.

The AssetCard uses the following message keys:

  • state-running, state-stopped, state-fault, state-maintenance, state-offline
  • runHours, starts, hours, serviceIn, serviceSoon
  • serviceDue, serviceOverdue, serviceUsed, lastService, lastServiceBy
  • noInterval, condition, status-warning, status-alarm, limit
  • workOrders, openCount, noneOpen, priority-high, priority-normal
  • priority-low, woStatus-in-progress, due, requestWork, recordService
  • requestLabel, requestPlaceholder, priority, priorityHigh, priorityNormal
  • priorityLow, send, cancel, confirmService, yesRecord
  • working, openWorkOrder

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.