fix(tree-view): add aria multiselectable attribute when needed

projects/angular/clarity.api.md

@@ -4309,7 +4309,7 @@ export class ClrTooltipTrigger {
 // @public (undocumented)
 export class ClrTree<T> implements AfterContentInit, OnDestroy {
     // Warning: (ae-forgotten-export) The symbol "TreeFocusManagerService" needs to be exported by the entry point index.d.ts
-    constructor(featuresService: TreeFeaturesService<T>, focusManagerService: TreeFocusManagerService<T>, { nativeElement }: ElementRef<HTMLElement>, renderer: Renderer2, ngZone: NgZone);
+    constructor(featuresService: TreeFeaturesService<T>, focusManagerService: TreeFocusManagerService<T>, renderer: Renderer2, el: ElementRef<HTMLElement>, ngZone: NgZone);
     // (undocumented)
     featuresService: TreeFeaturesService<T>;
     // (undocumented)

projects/angular/src/data/tree-view/tree.spec.ts

@@ -76,7 +76,7 @@ export default function (): void {
     });
 
     it('adds the aria-multiselectable if tree is selectable and has children', function (this: Context) {
-      expect(this.clarityElement.getAttribute('aria-multiselectable')).toBe('false');
+      expect(this.clarityElement.getAttribute('aria-multiselectable')).toBeNull();
       this.getClarityProvider(TreeFeaturesService).selectable = true;
       this.hostComponent.hasChild = true;
       this.detectChanges();

projects/angular/src/data/tree-view/tree.ts

@@ -35,30 +35,30 @@
   host: {
     tabindex: '0',
     '[attr.role]': '"tree"',
-    '[attr.aria-multiselectable]': 'isMultiSelectable',
   },
 })
 export class ClrTree<T> implements AfterContentInit, OnDestroy {
   @ContentChildren(ClrTreeNode) private rootNodes: QueryList<ClrTreeNode<T>>;
 
   private subscriptions: Subscription[] = [];
+  private _isMultiSelectable = false;
 
   constructor(
     public featuresService: TreeFeaturesService<T>,
     private focusManagerService: TreeFocusManagerService<T>,
-    { nativeElement }: ElementRef<HTMLElement>,
-    renderer: Renderer2,
+    private renderer: Renderer2,
+    private el: ElementRef<HTMLElement>,
     ngZone: NgZone
   ) {
     const subscription = ngZone.runOutsideAngular(() =>
-      fromEvent(nativeElement, 'focusin').subscribe((event: FocusEvent) => {
-        if (event.target === nativeElement) {
+      fromEvent(this.el.nativeElement, 'focusin').subscribe((event: FocusEvent) => {
+        if (event.target === this.el.nativeElement) {
           // After discussing with the team, I've made it so that when the tree receives focus, the first visible node will be focused.
           // This will prevent from the page scrolling abruptly to the first selected node if it exist in a deeply nested tree.
           focusManagerService.focusFirstVisibleNode();
           // when the first child gets focus,
           // tree should no longer have tabindex of 0.
-          renderer.removeAttribute(nativeElement, 'tabindex');
+          renderer.removeAttribute(this.el.nativeElement, 'tabindex');
         }
       })
     );
@@ -72,13 +72,15 @@
   }
 
   get isMultiSelectable() {
-    return this.featuresService.selectable && this.rootNodes.length > 0;
+    return this._isMultiSelectable;
   }
 
   ngAfterContentInit() {
     this.setRootNodes();
     this.subscriptions.push(
       this.rootNodes.changes.subscribe(() => {
+        this.setMultiSelectable();
+
         this.setRootNodes();
       })
     );
@@ -88,6 +90,16 @@
     this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
+  private setMultiSelectable() {
+    if (this.featuresService.selectable && this.rootNodes.length > 0) {
+      this._isMultiSelectable = true;
+      this.renderer.setAttribute(this.el.nativeElement, 'aria-multiselectable', 'true');
+    } else {
+      this._isMultiSelectable = false;
+      this.renderer.removeAttribute(this.el.nativeElement, 'aria-multiselectable');
+    }
+  }
+
   private setRootNodes(): void {
     // if node has no parent, it's a root node
     // for recursive tree, this.rootNodes registers also nested children