Model outputs
Root Cause Tree <smart-root-cause-tree>
RootCauseTree displays the ranked, nested explanation produced by a root-cause analysis model: the deviation at the root, the contributing conditions below it and their share of the contribution as a bar and a percentage, with the evidence for each node.
Accessibility Attributes
The RootCauseTree is exposed as a WAI-ARIA tree: one tab stop, the up and down arrow keys move between nodes, and the left and right arrow keys collapse and expand them. Each node is named by its label, its share and its tag, for example "Cooling water flow low, 62 %, FIC-204", so the bar, which shows the same number, is not the only way to read it. The evidence under a label is plain text in the node and is read after the name. Nodes hidden by minContribution are reported: a line under their parent states how many there are and the share they fall under, so the tree is not read as complete when it is not.
The following ARIA attributes are used inside the RootCauseTree:
- role="group" - set on the container.
- role="tree" - set on the list, with an aria-label naming the analysis - "Root cause tree. Deviation 17".
- role="treeitem" - set on each node, with aria-level, aria-posinset, aria-setsize, aria-selected, an aria-label of "label, share, tag", and a roving tabindex.
- aria-expanded - set on a node with children, true or false. A node at the maxDepth limit carries none, because it cannot be opened.
- role="group" - set on each node's list of children.
- aria-hidden="true" - set on the expander glyph and on the bar; the node's label and share carry their meaning.
- role="none" - set on the folded-count line and the empty-state line, which are text within the tree and not nodes of it.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the RootCauseTree:
| Key | Action |
|---|---|
| Tab | Moves into the tree, landing on the selected node or the root, and out again. The tree is one stop. |
| Arrow Down / Arrow Up | Moves to the next / previous visible node. |
| Arrow Right | On a closed node, opens it, raising expand; on an open node, moves to its first child. |
| Arrow Left | On an open node, closes it, raising collapse; on a closed node or a leaf, moves to its parent. |
| Home / End | Moves to the first / last visible node. |
| Enter or Space | Selects the node, raising nodeSelect with the path from the root, the same event a click raises. |
| * | Opens every node. |
Clicking the expander glyph opens or closes a node without selecting it; clicking the rest of the row selects it.
Localization
All strings the RootCauseTree 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 RootCauseTree uses the following message keys:
- treeLabel, noRoot, contribution, nodeLabel, tagSuffix, folded, expand, collapse
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Node labels, tags and evidence come from the root property and are not localized by the component.
Additional information on WAI-ARIA for the SMART Framework can be found here.