tree-element 0.3.1 → 0.4.0

package/lib/selectNodeHandler.js

@@ -75,9 +75,9 @@ class SelectNodeHandler {
     } else {
       this._selectedNodes.delete(node.id);
       if (includeChildren) {
-        node.iterate(() => {
-          if (node.id != null) {
-            this._selectedNodes.delete(node.id);
+        node.iterate(child => {
+          if (child.id != null) {
+            this._selectedNodes.delete(child.id);
           }
           return true;
         });
@@ -96,6 +96,9 @@ class SelectNodeHandler {
    * mustToggle: support deselecting the selected node
    */
   _selectSingleNode(node, optionsParam) {
+    if (!this._canSelect(node)) {
+      return;
+    }
     let defaultOptions = {
       mustSetFocus: true,
       mustToggle: true
@@ -104,31 +107,23 @@ class SelectNodeHandler {
       ...defaultOptions,
       ...optionsParam
     };
-    let canSelect = () => {
-      if (!this._getSelectable()) {
-        return false;
-      }
-      let onCanSelectNode = this._getOnCanSelectNode();
-      return onCanSelectNode ? onCanSelectNode(node) : true;
-    };
-    if (!canSelect()) {
-      return;
-    }
-    let deselectCurrentNode = deselectedNode => {
-      this._removeFromSelection(deselectedNode);
-      this._getNodeElementForNode(deselectedNode)._deselect();
-    };
+    let otherSelectedNodes = this._getSelectedNodes().filter(selectedNode => selectedNode !== node);
     if (this._isNodeSelected(node)) {
-      if (selectOptions.mustToggle) {
-        deselectCurrentNode(node);
+      if (otherSelectedNodes.length) {
+        // Part of a multiple selection: keep only this node selected
+        for (let otherNode of otherSelectedNodes) {
+          this._deselectNode(otherNode);
+        }
+      } else if (selectOptions.mustToggle) {
+        this._deselectNode(node);
         this._triggerEvent("tree.deselect", {
           node
         });
       }
     } else {
-      let deselectedNode = this._getSelectedNode();
-      if (deselectedNode) {
-        deselectCurrentNode(deselectedNode);
+      let deselectedNode = otherSelectedNodes[0] ?? null;
+      for (let otherNode of otherSelectedNodes) {
+        this._deselectNode(otherNode);
       }
       this._addToSelection(node);
       this._openParents(node);
@@ -141,6 +136,43 @@ class SelectNodeHandler {
     this._updateTabStop();
     this._saveState();
   }
+
+  /* Add a node to the selection, or remove it when it is selected, without
+   * changing the other selected nodes.
+   * Checks if the node is selectable and saves the state.
+   */
+  _toggleNodeInSelection(node, mustSetFocus = true) {
+    if (!this._canSelect(node)) {
+      return;
+    }
+    if (this._isNodeSelected(node)) {
+      this._deselectNode(node);
+      this._triggerEvent("tree.deselect", {
+        node
+      });
+    } else {
+      this._addToSelection(node);
+      this._openParents(node);
+      this._getNodeElementForNode(node)._select(mustSetFocus);
+      this._triggerEvent("tree.select", {
+        deselectedNode: null,
+        node
+      });
+    }
+    this._updateTabStop();
+    this._saveState();
+  }
+  _canSelect(node) {
+    if (!this._getSelectable()) {
+      return false;
+    }
+    let onCanSelectNode = this._getOnCanSelectNode();
+    return onCanSelectNode ? onCanSelectNode(node) : true;
+  }
+  _deselectNode(node) {
+    this._removeFromSelection(node);
+    this._getNodeElementForNode(node)._deselect();
+  }
 }
 
 export { SelectNodeHandler as default };

package/lib/selectNodeHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectNodeHandler.js","sources":["../src/selectNodeHandler.ts"],"sourcesContent":["import type {\n  GetNodeById,\n  GetNodeElementForNode,\n  OpenParents,\n  TriggerEvent,\n} from \"./methodTypes\";\nimport type { Node, NodeId } from \"./node\";\nimport type { OnCanSelectNode } from \"./options\";\n\nexport interface SelectNodeOptions {\n  mustSetFocus?: boolean;\n  mustToggle?: boolean;\n}\n\ninterface SelectNodeHandlerParameters {\n  getNodeById: GetNodeById;\n  getNodeElementForNode: GetNodeElementForNode;\n  getOnCanSelectNode: () => OnCanSelectNode | undefined;\n  getSelectable: () => boolean;\n  openParents: OpenParents;\n  saveState: () => void;\n  triggerEvent: TriggerEvent;\n  updateTabStop: () => void;\n}\n\nexport default class SelectNodeHandler {\n  private getNodeById: GetNodeById;\n  private getNodeElementForNode: GetNodeElementForNode;\n  private getOnCanSelectNode: () => OnCanSelectNode | undefined;\n  private getSelectable: () => boolean;\n  private openParents: OpenParents;\n  private saveState: () => void;\n  private selectedNodes: Set<NodeId>;\n  private selectedSingleNode: Node | null;\n  private triggerEvent: TriggerEvent;\n  private updateTabStop: () => void;\n\n  constructor({\n    getNodeById,\n    getNodeElementForNode,\n    getOnCanSelectNode,\n    getSelectable,\n    openParents,\n    saveState,\n    triggerEvent,\n    updateTabStop,\n  }: SelectNodeHandlerParameters) {\n    this.getNodeById = getNodeById;\n    this.getNodeElementForNode = getNodeElementForNode;\n    this.getOnCanSelectNode = getOnCanSelectNode;\n    this.getSelectable = getSelectable;\n    this.openParents = openParents;\n    this.saveState = saveState;\n    this.selectedNodes = new Set<NodeId>();\n    this.selectedSingleNode = null;\n    this.triggerEvent = triggerEvent;\n    this.updateTabStop = updateTabStop;\n  }\n\n  public addToSelection(node: Node): void {\n    if (node.id == null) {\n      this.selectedSingleNode = node;\n    } else {\n      this.selectedNodes.add(node.id);\n    }\n  }\n\n  public clear(): void {\n    this.selectedNodes.clear();\n    this.selectedSingleNode = null;\n  }\n\n  public getSelectedNode(): Node | null {\n    const selectedNodes = this.getSelectedNodes();\n\n    return selectedNodes.length ? (selectedNodes[0] ?? null) : null;\n  }\n\n  public getSelectedNodes(): Node[] {\n    if (this.selectedSingleNode) {\n      return [this.selectedSingleNode];\n    }\n\n    const selectedNodes: Node[] = [];\n\n    this.selectedNodes.forEach((id) => {\n      const node = this.getNodeById(id);\n      if (node) {\n        selectedNodes.push(node);\n      }\n    });\n\n    return selectedNodes;\n  }\n\n  public getSelectedNodesUnder(parent: Node): Node[] {\n    if (this.selectedSingleNode) {\n      return parent.isParentOf(this.selectedSingleNode)\n        ? [this.selectedSingleNode]\n        : [];\n    }\n\n    const selectedNodes: Node[] = [];\n\n    this.selectedNodes.forEach((id) => {\n      const node = this.getNodeById(id);\n      if (node && parent.isParentOf(node)) {\n        selectedNodes.push(node);\n      }\n    });\n\n    return selectedNodes;\n  }\n\n  public isNodeSelected(node: Node): boolean {\n    if (node.id != null) {\n      return this.selectedNodes.has(node.id);\n    }\n    return this.selectedSingleNode ? this.selectedSingleNode === node : false;\n  }\n\n  public removeFromSelection(node: Node, includeChildren = false): void {\n    if (node.id == null) {\n      if (this.selectedSingleNode === node) {\n        this.selectedSingleNode = null;\n      }\n    } else {\n      this.selectedNodes.delete(node.id);\n\n      if (includeChildren) {\n        node.iterate(() => {\n          if (node.id != null) {\n            this.selectedNodes.delete(node.id);\n          }\n          return true;\n        });\n      }\n    }\n  }\n\n  /* Select a single node.\n   * Renders the changed elements.\n   * Deselects if the node is currently selected (if the mustToggle is on).\n   * Deselects the previously selected node.\n   * Check if the node is selectable.\n   * Saves the state.\n   * Options:\n   * mustSetFocus: set the focus to the selected node\n   * mustToggle: support deselecting the selected node\n   */\n  public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {\n    const defaultOptions = { mustSetFocus: true, mustToggle: true };\n    const selectOptions = { ...defaultOptions, ...optionsParam };\n\n    const canSelect = (): boolean => {\n      if (!this.getSelectable()) {\n        return false;\n      }\n\n      const onCanSelectNode = this.getOnCanSelectNode();\n      return onCanSelectNode ? onCanSelectNode(node) : true;\n    };\n\n    if (!canSelect()) {\n      return;\n    }\n\n    const deselectCurrentNode = (deselectedNode: Node) => {\n      this.removeFromSelection(deselectedNode);\n      this.getNodeElementForNode(deselectedNode).deselect();\n    };\n\n    if (this.isNodeSelected(node)) {\n      if (selectOptions.mustToggle) {\n        deselectCurrentNode(node);\n        this.triggerEvent(\"tree.deselect\", { node });\n      }\n    } else {\n      const deselectedNode = this.getSelectedNode();\n\n      if (deselectedNode) {\n        deselectCurrentNode(deselectedNode);\n      }\n\n      this.addToSelection(node);\n      this.openParents(node);\n      this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);\n\n      this.triggerEvent(\"tree.select\", {\n        deselectedNode,\n        node,\n      });\n    }\n\n    this.updateTabStop();\n    this.saveState();\n  }\n}\n"],"names":["getNodeById","getNodeElementForNode","getOnCanSelectNode","getSelectable","openParents","saveState","selectedNodes","selectedSingleNode","triggerEvent","updateTabStop","addToSelection","clear","getSelectedNode","getSelectedNodes","getSelectedNodesUnder","isNodeSelected","removeFromSelection","selectSingleNode","deselect","select"],"mappings":"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"}
+{"version":3,"file":"selectNodeHandler.js","sources":["../src/selectNodeHandler.ts"],"sourcesContent":["import type {\n  GetNodeById,\n  GetNodeElementForNode,\n  OpenParents,\n  TriggerEvent,\n} from \"./methodTypes\";\nimport type { Node, NodeId } from \"./node\";\nimport type { OnCanSelectNode } from \"./options\";\n\nexport interface SelectNodeOptions {\n  mustSetFocus?: boolean;\n  mustToggle?: boolean;\n}\n\ninterface SelectNodeHandlerParameters {\n  getNodeById: GetNodeById;\n  getNodeElementForNode: GetNodeElementForNode;\n  getOnCanSelectNode: () => OnCanSelectNode | undefined;\n  getSelectable: () => boolean;\n  openParents: OpenParents;\n  saveState: () => void;\n  triggerEvent: TriggerEvent;\n  updateTabStop: () => void;\n}\n\nexport default class SelectNodeHandler {\n  private getNodeById: GetNodeById;\n  private getNodeElementForNode: GetNodeElementForNode;\n  private getOnCanSelectNode: () => OnCanSelectNode | undefined;\n  private getSelectable: () => boolean;\n  private openParents: OpenParents;\n  private saveState: () => void;\n  private selectedNodes: Set<NodeId>;\n  private selectedSingleNode: Node | null;\n  private triggerEvent: TriggerEvent;\n  private updateTabStop: () => void;\n\n  constructor({\n    getNodeById,\n    getNodeElementForNode,\n    getOnCanSelectNode,\n    getSelectable,\n    openParents,\n    saveState,\n    triggerEvent,\n    updateTabStop,\n  }: SelectNodeHandlerParameters) {\n    this.getNodeById = getNodeById;\n    this.getNodeElementForNode = getNodeElementForNode;\n    this.getOnCanSelectNode = getOnCanSelectNode;\n    this.getSelectable = getSelectable;\n    this.openParents = openParents;\n    this.saveState = saveState;\n    this.selectedNodes = new Set<NodeId>();\n    this.selectedSingleNode = null;\n    this.triggerEvent = triggerEvent;\n    this.updateTabStop = updateTabStop;\n  }\n\n  public addToSelection(node: Node): void {\n    if (node.id == null) {\n      this.selectedSingleNode = node;\n    } else {\n      this.selectedNodes.add(node.id);\n    }\n  }\n\n  public clear(): void {\n    this.selectedNodes.clear();\n    this.selectedSingleNode = null;\n  }\n\n  public getSelectedNode(): Node | null {\n    const selectedNodes = this.getSelectedNodes();\n\n    return selectedNodes.length ? (selectedNodes[0] ?? null) : null;\n  }\n\n  public getSelectedNodes(): Node[] {\n    if (this.selectedSingleNode) {\n      return [this.selectedSingleNode];\n    }\n\n    const selectedNodes: Node[] = [];\n\n    this.selectedNodes.forEach((id) => {\n      const node = this.getNodeById(id);\n      if (node) {\n        selectedNodes.push(node);\n      }\n    });\n\n    return selectedNodes;\n  }\n\n  public getSelectedNodesUnder(parent: Node): Node[] {\n    if (this.selectedSingleNode) {\n      return parent.isParentOf(this.selectedSingleNode)\n        ? [this.selectedSingleNode]\n        : [];\n    }\n\n    const selectedNodes: Node[] = [];\n\n    this.selectedNodes.forEach((id) => {\n      const node = this.getNodeById(id);\n      if (node && parent.isParentOf(node)) {\n        selectedNodes.push(node);\n      }\n    });\n\n    return selectedNodes;\n  }\n\n  public isNodeSelected(node: Node): boolean {\n    if (node.id != null) {\n      return this.selectedNodes.has(node.id);\n    }\n    return this.selectedSingleNode ? this.selectedSingleNode === node : false;\n  }\n\n  public removeFromSelection(node: Node, includeChildren = false): void {\n    if (node.id == null) {\n      if (this.selectedSingleNode === node) {\n        this.selectedSingleNode = null;\n      }\n    } else {\n      this.selectedNodes.delete(node.id);\n\n      if (includeChildren) {\n        node.iterate((child: Node) => {\n          if (child.id != null) {\n            this.selectedNodes.delete(child.id);\n          }\n          return true;\n        });\n      }\n    }\n  }\n\n  /* Select a single node.\n   * Renders the changed elements.\n   * Deselects if the node is currently selected (if the mustToggle is on).\n   * Deselects the previously selected node.\n   * Check if the node is selectable.\n   * Saves the state.\n   * Options:\n   * mustSetFocus: set the focus to the selected node\n   * mustToggle: support deselecting the selected node\n   */\n  public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {\n    if (!this.canSelect(node)) {\n      return;\n    }\n\n    const defaultOptions = { mustSetFocus: true, mustToggle: true };\n    const selectOptions = { ...defaultOptions, ...optionsParam };\n\n    const otherSelectedNodes = this.getSelectedNodes().filter(\n      (selectedNode) => selectedNode !== node,\n    );\n\n    if (this.isNodeSelected(node)) {\n      if (otherSelectedNodes.length) {\n        // Part of a multiple selection: keep only this node selected\n        for (const otherNode of otherSelectedNodes) {\n          this.deselectNode(otherNode);\n        }\n      } else if (selectOptions.mustToggle) {\n        this.deselectNode(node);\n        this.triggerEvent(\"tree.deselect\", { node });\n      }\n    } else {\n      const deselectedNode = otherSelectedNodes[0] ?? null;\n\n      for (const otherNode of otherSelectedNodes) {\n        this.deselectNode(otherNode);\n      }\n\n      this.addToSelection(node);\n      this.openParents(node);\n      this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);\n\n      this.triggerEvent(\"tree.select\", {\n        deselectedNode,\n        node,\n      });\n    }\n\n    this.updateTabStop();\n    this.saveState();\n  }\n\n  /* Add a node to the selection, or remove it when it is selected, without\n   * changing the other selected nodes.\n   * Checks if the node is selectable and saves the state.\n   */\n  public toggleNodeInSelection(node: Node, mustSetFocus = true): void {\n    if (!this.canSelect(node)) {\n      return;\n    }\n\n    if (this.isNodeSelected(node)) {\n      this.deselectNode(node);\n      this.triggerEvent(\"tree.deselect\", { node });\n    } else {\n      this.addToSelection(node);\n      this.openParents(node);\n      this.getNodeElementForNode(node).select(mustSetFocus);\n\n      this.triggerEvent(\"tree.select\", { deselectedNode: null, node });\n    }\n\n    this.updateTabStop();\n    this.saveState();\n  }\n\n  private canSelect(node: Node): boolean {\n    if (!this.getSelectable()) {\n      return false;\n    }\n\n    const onCanSelectNode = this.getOnCanSelectNode();\n    return onCanSelectNode ? onCanSelectNode(node) : true;\n  }\n\n  private deselectNode(node: Node): void {\n    this.removeFromSelection(node);\n    this.getNodeElementForNode(node).deselect();\n  }\n}\n"],"names":["getNodeById","getNodeElementForNode","getOnCanSelectNode","getSelectable","openParents","saveState","selectedNodes","selectedSingleNode","triggerEvent","updateTabStop","addToSelection","clear","getSelectedNode","getSelectedNodes","getSelectedNodesUnder","isNodeSelected","removeFromSelection","selectSingleNode","canSelect","deselectNode","select","toggleNodeInSelection","deselect"],"mappings":"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"}

package/lib/setDefaultOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setDefaultOptions.d.ts","sourceRoot":"","sources":["../src/setDefaultOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAapD,eAAO,MAAM,YAAY,QAAkC,CAAC;AAC5D,eAAO,MAAM,YAAY,QAAgC,CAAC;AAC1D,eAAO,MAAM,aAAa,QAAgC,CAAC;AAsC3D,QAAA,MAAM,iBAAiB,GACrB,aAAa,WAAW,EACxB,cAAc,OAAO,CAAC,kBAAkB,CAAC,KACxC,kBAaF,CAAC;AAuBF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"setDefaultOptions.d.ts","sourceRoot":"","sources":["../src/setDefaultOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAapD,eAAO,MAAM,YAAY,QAAoC,CAAC;AAC9D,eAAO,MAAM,YAAY,QAAoC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAAoC,CAAC;AAuC/D,QAAA,MAAM,iBAAiB,GACrB,aAAa,WAAW,EACxB,cAAc,OAAO,CAAC,kBAAkB,CAAC,KACxC,kBAaF,CAAC;AAuBF,eAAe,iBAAiB,CAAC"}

package/lib/setDefaultOptions.js

@@ -6,10 +6,10 @@ import { Node } from './node.js';
  * They are sized in em to follow the font size, and use currentColor to follow
  * --tree-element-toggler-color.
  */
-let triangle = points => `<svg width="0.7em" height="0.7em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
-let triangleDown = triangle("0.5,1.5 9.5,1.5 5,9");
-let triangleLeft = triangle("9,0.5 9,9.5 1.5,5");
-let triangleRight = triangle("1,0.5 1,9.5 8.5,5");
+let triangle = points => `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+let triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+let triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+let triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
 let defaults = {
   animationSpeed: "fast",
   autoEscape: true,
@@ -25,6 +25,7 @@ let defaults = {
   // dataUrl: undefined,
   dragAndDrop: false,
   keyboardSupport: true,
+  multiSelect: false,
   nodeClass: Node,
   // onCanMove: undefined, // Can this node be moved?
   // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)

package/lib/setDefaultOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { AnimationSpeed } from \"./animation\";\nimport type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\n/* The default icons are svg instead of text: the triangle characters come\n * from different fonts on each platform, so they differ in shape and size.\n * They are sized in em to follow the font size, and use currentColor to follow\n * --tree-element-toggler-color.\n */\nconst triangle = (points: string): string =>\n  `<svg width=\"0.7em\" height=\"0.7em\" viewBox=\"0 0 10 10\" focusable=\"false\"><polygon points=\"${points}\" fill=\"currentColor\"/></svg>`;\n\nexport const triangleDown = triangle(\"0.5,1.5 9.5,1.5 5,9\");\nexport const triangleLeft = triangle(\"9,0.5 9,9.5 1.5,5\");\nexport const triangleRight = triangle(\"1,0.5 1,9.5 8.5,5\");\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined, // the default is a triangle pointing down\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = {\n    ...defaults,\n    ...inputOptions,\n    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),\n  };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= triangleDown;\n\n  return options;\n};\n\n// No animation when the user asked the system for reduced motion\nconst getDefaultAnimationSpeed = (): AnimationSpeed =>\n  prefersReducedMotion() ? 0 : defaults.animationSpeed;\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window.matchMedia === \"function\" &&\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  return options.rtl ? triangleLeft : triangleRight;\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  }\n  return dataRtl === \"false\" ? false : Boolean(dataRtl);\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAMA;AACA;AACA;AACA;AACA;AACA,IAAM,QAAQ,GAAI,MAAc,IAC9B,CAAA,yFAAA,EAA4F,MAAM,CAAA,6BAAA,CAA+B;IAEtH,YAAY,GAAG,QAAQ,CAAC,qBAAqB;IAC7C,YAAY,GAAG,QAAQ,CAAC,mBAAmB;IAC3C,aAAa,GAAG,QAAQ,CAAC,mBAAmB;AAEzD,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AACd,IAAA,GAAG,QAAQ;AACX,IAAA,GAAG,YAAY;AACf,IAAA,cAAc,EAAE,YAAY,CAAC,cAAc,IAAI,wBAAwB;GACxE;AAED,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,YAAY;AAEnC,EAAA,OAAO,OAAO;AAChB;;AAEA;AACA,IAAM,wBAAwB,GAAG,MAC/B,oBAAoB,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,cAAc;AAEtD,IAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IACvC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;AAE/D,IAAM,oBAAoB,GAAI,OAA2B,IAAa;AACpE,EAAA,OAAO,OAAO,CAAC,GAAG,GAAG,YAAY,GAAG,aAAa;AACnD,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;EACA,OAAO,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AACvD,CAAC;;"}
+{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { AnimationSpeed } from \"./animation\";\nimport type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\n/* The default icons are svg instead of text: the triangle characters come\n * from different fonts on each platform, so they differ in shape and size.\n * They are sized in em to follow the font size, and use currentColor to follow\n * --tree-element-toggler-color.\n */\nconst triangle = (points: string): string =>\n  `<svg width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 10 10\" focusable=\"false\"><polygon points=\"${points}\" fill=\"currentColor\"/></svg>`;\n\nexport const triangleDown = triangle(\"0.5,0.5 9.5,0.5 5,9.5\");\nexport const triangleLeft = triangle(\"9.5,0.5 9.5,9.5 0.5,5\");\nexport const triangleRight = triangle(\"0.5,0.5 0.5,9.5 9.5,5\");\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  multiSelect: false,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined, // the default is a triangle pointing down\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = {\n    ...defaults,\n    ...inputOptions,\n    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),\n  };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= triangleDown;\n\n  return options;\n};\n\n// No animation when the user asked the system for reduced motion\nconst getDefaultAnimationSpeed = (): AnimationSpeed =>\n  prefersReducedMotion() ? 0 : defaults.animationSpeed;\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window.matchMedia === \"function\" &&\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  return options.rtl ? triangleLeft : triangleRight;\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  }\n  return dataRtl === \"false\" ? false : Boolean(dataRtl);\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAMA;AACA;AACA;AACA;AACA;AACA,IAAM,QAAQ,GAAI,MAAc,IAC9B,CAAA,yFAAA,EAA4F,MAAM,CAAA,6BAAA,CAA+B;IAEtH,YAAY,GAAG,QAAQ,CAAC,uBAAuB;IAC/C,YAAY,GAAG,QAAQ,CAAC,uBAAuB;IAC/C,aAAa,GAAG,QAAQ,CAAC,uBAAuB;AAE7D,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AACd,IAAA,GAAG,QAAQ;AACX,IAAA,GAAG,YAAY;AACf,IAAA,cAAc,EAAE,YAAY,CAAC,cAAc,IAAI,wBAAwB;GACxE;AAED,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,YAAY;AAEnC,EAAA,OAAO,OAAO;AAChB;;AAEA;AACA,IAAM,wBAAwB,GAAG,MAC/B,oBAAoB,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,cAAc;AAEtD,IAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IACvC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;AAE/D,IAAM,oBAAoB,GAAI,OAA2B,IAAa;AACpE,EAAA,OAAO,OAAO,CAAC,GAAG,GAAG,YAAY,GAAG,aAAa;AACnD,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;EACA,OAAO,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AACvD,CAAC;;"}

package/lib/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "0.3.1";
+declare const version = "0.4.0";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -1,5 +1,5 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-let version = "0.3.1";
+let version = "0.4.0";
 
 export { version as default };
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.3.1\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.4.0\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tree-element",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Tree widget in plain javascript",
   "keywords": [
     "tree"
@@ -61,29 +61,29 @@
     "docs-check": "kiira check"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.13.0",
+    "@axe-core/playwright": "^4.14.0",
     "@babel/cli": "^8.0.6",
     "@babel/core": "^8.0.7",
     "@babel/preset-env": "^8.0.7",
     "@babel/preset-typescript": "^8.0.7",
-    "@cspell/eslint-plugin": "^10.3.6",
-    "@eslint/css": "^2.0.0",
+    "@cspell/eslint-plugin": "^10.4.0",
+    "@eslint/css": "^2.0.1",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.64.0",
+    "@playwright/test": "^1.64.1",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/debug": "^4.1.13",
     "@types/node": "^26.6.5",
-    "@vitest/coverage-istanbul": "^5.0.3",
+    "@vitest/coverage-istanbul": "^5.0.5",
     "@vitest/eslint-plugin": "^1.6.27",
     "axe-core": "^4.14.0",
     "babel-plugin-istanbul": "^8.0.0",
     "babel-plugin-prefix-private-members": "^0.3.1",
-    "eslint": "^10.12.0",
+    "eslint": "^10.13.0",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-compat": "^7.0.2",
     "eslint-plugin-import-x": "^4.17.1",
@@ -94,30 +94,30 @@
     "eslint-plugin-playwright": "^2.12.1",
     "eslint-plugin-testing-library": "^7.16.2",
     "eslint-plugin-tsdoc": "^0.5.4",
-    "eslint-plugin-unicorn": "^77.0.0",
+    "eslint-plugin-unicorn": "^78.0.0",
     "jest-extended": "^7.0.0",
-    "jsdom": "^30.1.2",
+    "jsdom": "^30.1.3",
     "jsdom-testing-mocks": "^1.16.0",
     "jsonfile": "^6.2.1",
-    "kiira": "^0.6.0",
-    "kiira-core": "^0.6.0",
+    "kiira": "^0.7.0",
+    "kiira-core": "^0.7.0",
     "lodash": "^4.18.1",
     "msw": "^3.0.3",
-    "postcss": "^8.5.29",
+    "postcss": "^8.5.30",
     "postcss-cli": "^12.0.0",
-    "postcss-import": "^17.0.0",
+    "postcss-import": "^17.0.1",
     "postcss-load-config": "^6.0.1",
-    "postcss-nested": "^8.0.1",
+    "postcss-nested": "^9.0.0",
     "prettier": "^3.9.10",
-    "rollup": "^4.64.5",
+    "rollup": "^4.64.7",
     "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.20",
-    "typedoc-plugin-markdown": "^4.13.1",
+    "typedoc-plugin-markdown": "^4.14.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.71.1",
+    "typescript-eslint": "^8.71.2",
     "vitepress": "^1.6.4",
-    "vitest": "^5.0.3"
+    "vitest": "^5.0.5"
   }
 }

package/src/classNames.ts

@@ -39,13 +39,13 @@ export const DEFAULT_CLASS_PREFIX = "tree-element";
  */
 const createClassNames = ({
   classPrefix,
-  commonClassName,
-  treeClassName,
+  commonClassName = `${classPrefix}-common`,
+  treeClassName = classPrefix,
 }: ClassNamesOptions): ClassNames => ({
   border: `${classPrefix}-border`,
   circle: `${classPrefix}-circle`,
   closed: `${classPrefix}-closed`,
-  common: commonClassName ?? `${classPrefix}-common`,
+  common: commonClassName,
   dnd: `${classPrefix}-dnd`,
   dragging: `${classPrefix}-dragging`,
   element: `${classPrefix}-element`,
@@ -64,7 +64,7 @@ const createClassNames = ({
   toggler: `${classPrefix}-toggler`,
   togglerLeft: `${classPrefix}-toggler-left`,
   togglerRight: `${classPrefix}-toggler-right`,
-  tree: treeClassName ?? classPrefix,
+  tree: treeClassName,
 });
 
 export default createClassNames;

package/src/dataLoader.ts

@@ -44,8 +44,9 @@ export default class DataLoader {
     element.classList.add(this.classNames.loading);
 
     // Tell screen readers that the children of the folder are loading
-    const titleSpan = node ? this.getTitleSpan(element) : null;
-    titleSpan?.setAttribute("aria-busy", "true");
+    if (node) {
+      element.setAttribute("aria-busy", "true");
+    }
 
     this.triggerEvent("tree.loading_data", {
       element,
@@ -54,7 +55,9 @@ export default class DataLoader {
 
     const stopLoading = (): void => {
       element.classList.remove(this.classNames.loading);
-      titleSpan?.removeAttribute("aria-busy");
+      if (node) {
+        element.removeAttribute("aria-busy");
+      }
       this.triggerEvent("tree.loaded_data", {
         element,
         node,
@@ -92,10 +95,4 @@ export default class DataLoader {
         this.triggerEvent("tree.load_failed", { error });
       });
   }
-
-  private getTitleSpan(element: HTMLElement): HTMLElement | null {
-    return element.querySelector<HTMLElement>(
-      `:scope > .${this.classNames.element} > .${this.classNames.title}`,
-    );
-  }
 }

package/src/elementsRenderer.ts

@@ -16,6 +16,7 @@ interface ElementsRendererParams {
   getTree: GetTree;
   htmlElement: HTMLElement;
   isNodeSelected: IsNodeSelected;
+  multiSelect: boolean;
   onCreateLi?: OnCreateLi;
   openedIcon?: IconElement;
   rtl?: boolean;
@@ -49,6 +50,7 @@ export default class ElementsRenderer {
   private groupUlTemplate: HTMLUListElement;
   private htmlElement: HTMLElement;
   private isNodeSelected: IsNodeSelected;
+  private multiSelect: boolean;
   private nodeTemplate: HTMLLIElement;
   private onCreateLi?: OnCreateLi;
   private openedFolderTemplate: HTMLLIElement;
@@ -69,6 +71,7 @@ export default class ElementsRenderer {
     getTree,
     htmlElement,
     isNodeSelected,
+    multiSelect,
     onCreateLi,
     openedIcon = "+",
     rtl,
@@ -85,6 +88,7 @@ export default class ElementsRenderer {
     this.getTree = getTree;
     this.htmlElement = htmlElement;
     this.isNodeSelected = isNodeSelected;
+    this.multiSelect = multiSelect;
     this.onCreateLi = onCreateLi;
     this.rtl = rtl;
     this.setNodeElement = setNodeElement;
@@ -112,14 +116,14 @@ export default class ElementsRenderer {
    * null when the folder is not rendered or has no children.
    */
   public renderChildren(node: Node): HTMLUListElement | null {
-    return !node.element || !node.hasChildren()
-      ? null
-      : this.createDomElements(
+    return node.element && node.hasChildren()
+      ? this.createDomElements(
           node.element,
           node.children,
           false,
           node.getLevel() + 1,
-        );
+        )
+      : null;
   }
 
   public renderFromNode(node: Node): void {
@@ -208,11 +212,11 @@ export default class ElementsRenderer {
       this.buttonLeft ? 1 : 0
     ] as HTMLSpanElement;
 
-    this.fillTitleSpan(titleSpan, node.name, isSelected, level);
+    this.fillNode(li, titleSpan, node.name, isSelected, level);
 
     if (node.is_loading) {
       li.classList.add(this.classNames.loading);
-      titleSpan.setAttribute("aria-busy", "true");
+      li.setAttribute("aria-busy", "true");
     }
 
     return li;
@@ -251,10 +255,10 @@ export default class ElementsRenderer {
       div.append(toggler);
     }
 
+    li.setAttribute("aria-expanded", getBoolString(isOpen));
+
     // title span
-    const titleSpan = this.createTitleSpanTemplate(true);
-    titleSpan.setAttribute("aria-expanded", getBoolString(isOpen));
-    div.append(titleSpan);
+    div.append(this.createTitleSpanTemplate(true));
 
     if (!this.buttonLeft) {
       div.append(toggler);
@@ -288,11 +292,22 @@ export default class ElementsRenderer {
 
   /*
   Create the outer part of a <li> template: li > div
+  The li is the treeitem, so the ul of its children is inside the treeitem.
   */
   private createLiTemplate(liClasses: string): HTMLLIElement {
     const li = document.createElement("li");
     li.className = liClasses;
-    li.setAttribute("role", "none");
+    li.setAttribute("role", "treeitem");
+
+    // Only a multiselect tree marks the nodes that are not selected
+    if (this.multiSelect) {
+      li.setAttribute("aria-selected", "false");
+    }
+
+    // Every node is focusable, but only the tab stop is in the tab order
+    if (this.tabIndex !== undefined) {
+      li.setAttribute("tabindex", "-1");
+    }
 
     const div = document.createElement("div");
     div.className = `${this.classNames.element} ${this.classNames.common}`;
@@ -318,7 +333,7 @@ export default class ElementsRenderer {
     const div = li.firstChild as HTMLDivElement;
     const titleSpan = div.firstChild as HTMLSpanElement;
 
-    this.fillTitleSpan(titleSpan, node.name, isSelected, level);
+    this.fillNode(li, titleSpan, node.name, isSelected, level);
 
     return li;
   }
@@ -347,13 +362,6 @@ export default class ElementsRenderer {
     classes += ` ${this.buttonLeft ? this.classNames.titleButtonLeft : this.classNames.titleButtonRight}`;
 
     titleSpan.className = classes;
-    titleSpan.setAttribute("role", "treeitem");
-    titleSpan.setAttribute("aria-selected", "false");
-
-    // Every node is focusable, but only the tab stop is in the tab order
-    if (this.tabIndex !== undefined) {
-      titleSpan.setAttribute("tabindex", "-1");
-    }
 
     return titleSpan;
   }
@@ -391,29 +399,35 @@ export default class ElementsRenderer {
       if (this.ariaLabelledBy !== undefined) {
         ul.setAttribute("aria-labelledby", this.ariaLabelledBy);
       }
+
+      if (this.multiSelect) {
+        ul.setAttribute("aria-multiselectable", "true");
+      }
     }
 
     return ul;
   }
 
   /*
-  Set the parts of a cloned title span that differ per node
+  Set the parts of a cloned li and title span that differ per node
   */
-  private fillTitleSpan(
+  private fillNode(
+    li: HTMLLIElement,
     titleSpan: HTMLSpanElement,
     nodeName: string,
     isSelected: boolean,
     level: number,
   ): void {
-    titleSpan.setAttribute("aria-level", String(level));
+    li.setAttribute("aria-level", String(level));
 
     if (isSelected) {
-      titleSpan.setAttribute("aria-selected", "true");
+      li.setAttribute("aria-selected", "true");
 
       const tabIndex = this.tabIndex;
 
-      if (tabIndex !== undefined) {
-        titleSpan.setAttribute("tabindex", String(tabIndex));
+      // With multiSelect the tab stop is the active node, see updateTabStop
+      if (tabIndex !== undefined && !this.multiSelect) {
+        li.setAttribute("tabindex", String(tabIndex));
       }
     }
 
@@ -423,6 +437,10 @@ export default class ElementsRenderer {
       // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
       titleSpan.innerHTML = nodeName;
     }
+
+    // The treeitem is named by its title, without the html when autoEscape
+    // is false. Otherwise the name would contain everything in the row.
+    li.setAttribute("aria-label", titleSpan.textContent);
   }
 
   private getButtonClasses(isOpen: boolean): string {