Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

DoDon’tArticle setting(s)
Use stable unique keys for nodes.Use labels or array indices as identifiers.keyExpression
Map human-readable text to nodes.Surface internal IDs or verbose blobs as labels.displayExpression
Set selectionMode: "single" for navigation trees.Allow multi-select when only one target makes sense.selectionMode
Show checkboxes for multi-select tasks.Force multi-select without visible affordances.showCheckBoxesMode, selectionMode
Enable selectNodesRecursive for branch actions.Make users select every child manually.selectNodesRecursive
Require checkbox-only selection when precision matters.Allow row-click selection that causes accidental picks.selectByClick: false, showCheckBoxesMode
Filter at the source to limit payload.Fetch unbounded datasets without parameters.getEntityCollectionHttpRequestParametersMap, dataSourceId
Hide the Tree View when not applicable.Leave an empty/irrelevant tree visible.displayConditions
Restrict sensitive trees by policy.Show structure and rely on downstream errors.visibilityPolicySetId
Provide stable test hooks.Target nodes by transient text in tests.dataTestId, id

Accessibility

  • Programmatic names for nodes: Ensure meaningful labels by mapping displayExpression to human-readable text.
  • Explicit selection affordance for multi-select: Show checkboxes to convey state non-visually using showCheckBoxesMode with selectionMode: "multiple".
  • Accidental-selection prevention: When precision is needed, disable row-click with selectByClick: false.
  • Localized helper text for guided flows: If tours are used, provide localized titles/descriptions via enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
  • Deterministic test/a11y hooks: Expose stable handles for audit tooling with dataTestId and id.
  • Avoid color-only meaning: Convey selection and hierarchy via labels and checkbox presence using displayExpression and showCheckBoxesMode.
  • Predictable interactions: Establish selection behavior on init (e.g., set selectionMode and selectByClick in ON_INIT) and keep it stable during a session.
  • Stable relationships: Use persistent identifiers so assistive tech can track nodes; configure keyExpression and hierarchical relations via childrenExpression.