Maintenance and sites
Site Map <smart-site-map>
SiteMap puts many sites on one picture - the pump stations of a water network, the turbines of a wind farm, the substations of a grid - so that "where is something wrong" is answered with a place.
Accessibility Attributes
A map is a picture, and a picture is not enough on its own. The SiteMap gives three ways in: a summary line that counts what is wrong - "10 sites · 1 in alarm · 1 with a warning · 1 offline" - markers that are buttons named in full, and the same sites as a table, worst first, one click away. A site's state is written in its name, its marker shape and weight change with it, and colour is only one of the three.
The following ARIA attributes are used inside the SiteMap:
- role="group" - set on the container, with an aria-label naming the map, and on the markers, labelled "Map of Water network: 10 sites · 1 in alarm …. Arrow keys move between sites."
- aria-label - set on each marker as name, state, alarms and reading - "PS North, Alarm, 2 alarms, 0.8 bar". The visible name beside it is aria-hidden, so it is not read twice.
- aria-pressed - set on each marker and on each row button, true on the selected site; and on the Map and List buttons.
- aria-live="polite" - set on the selected site's card, under the map or beside its marker, so selecting a site reads what is there. The card beside a marker has a Close button, and closing it gives focus back to the site.
- aria-label - set on the zoom buttons: "Zoom in", "Zoom out" and "Show every site". The map tiles are aria-hidden; the credit of their provider is text.
- scope="col" and scope="row" - set on the table's headers and site names.
- aria-disabled - indicates that the site map is disabled.
The picture is aria-hidden when it is an SVG placed inside the element, and a background when it is an image: the sites on it are what is read, not its roads.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the SiteMap:
| Key | Action |
|---|---|
| Tab | Moves to the Map and List buttons, then to the markers as one stop, then to Open. |
| Arrow keys | Walk the markers in reading order - top to bottom, left to right - and wrap at the ends. |
| Home / End | Go to the first and last site. |
| Enter or Space | Selects the site, which raises siteSelect and shows its card. |
| + and - | Zoom in and out at the focused site; 0 shows every site again. |
| Escape | Closes the card beside a marker, and focus returns to the site. |
Reading order is chosen over nearest-in-direction: it is the order the table would have if it were sorted by place, and it can be predicted without seeing the map. A site tabbed or walked to outside the view is brought into it. Panning by dragging has no keyboard of its own; the arrow keys, zoom and Show every site reach every site without it.
Localization
All strings the SiteMap 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.
Site names and readings are the plant's data, not the pack's.
The SiteMap uses the following message keys:
- panelLabel, sites, sitesOne, inAlarm, withWarning
- offlineCount, allNormal, viewMap, viewList, state-normal
- state-warning, state-alarm, state-offline, state-maintenance, alarms
- alarmsOne, open, link, close, zoomIn
- zoomOut, fit, wheelHint, columnSite, columnState
- columnAlarms, columnReading, noSites, selectHint, mapLabel
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.