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

…ort to 16.x) (#1572)

Backport 71b0056 from #1563. <br> ## PR
Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
`clr-tree` throws ExpressionChangedAfterItHasBeenCheckedError when
setting `aria-multiselectable`.

Issue Number: #1562, CDE-2301

## What is the new behavior?
Aria multiselectable attribute is added when needed.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

Co-authored-by: Valentin Mladenov <[email protected]>

projects/angular/clarity.api.md

@@ -4295,7 +4295,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 @@ import { ClrTreeNode } from './tree-node';
   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(el.nativeElement, 'focusin').subscribe((event: FocusEvent) => {
+        if (event.target === 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.
           this.focusManagerService.focusFirstVisibleNode();
           // when the first child gets focus,
           // tree should no longer have tabindex of 0.
-          renderer.removeAttribute(nativeElement, 'tabindex');
+          renderer.removeAttribute(el.nativeElement, 'tabindex');
         }
       })
     );
@@ -72,13 +72,15 @@ export class ClrTree<T> implements AfterContentInit, OnDestroy {
   }
 
   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 @@ export class ClrTree<T> implements AfterContentInit, OnDestroy {
     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