fix(material/tree): aria-expanded attribute should not appear in the …

…leaf node (angular#29096) * fix(material/tree): fixed unit tests fixed unit tests Fixes angular#21922 * fix(material/tree): updated public api file updated public api file Fixes angular#21922
DBowen33 · Jul 12, 2024 · 5d5e8cd · 5d5e8cd
1 parent fab2a29
commit 5d5e8cd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 33 deletions.
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
@@ -835,9 +835,8 @@ describe('CdkTree', () => {
       });
 
       it('with the right aria-expanded attrs', () => {
-        expect(getNodes(treeElement).map(x => x.getAttribute('aria-expanded')))
-          .withContext('aria-expanded attributes')
-          .toEqual([null, null, null]);
+        let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpandedStates).toEqual([null, null, null]);
 
         component.toggleRecursively = false;
         fixture.changeDetectorRef.markForCheck();
@@ -849,11 +848,8 @@ describe('CdkTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        // Note: only four elements are present here; children are not present
-        // in DOM unless the parent node is expanded.
-        expect(getNodes(treeElement).map(x => x.getAttribute('aria-expanded')))
-          .withContext('aria-expanded attributes')
-          .toEqual([null, 'true', 'false', null]);
+        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toEqual([null, 'true', 'false', null]);
       });
 
       it('should expand/collapse the node multiple times', () => {

diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
@@ -1135,14 +1135,7 @@ export class CdkTree<T, K = T>
   exportAs: 'cdkTreeNode',
   host: {
     'class': 'cdk-tree-node',
-    '[attr.aria-expanded]': '_getAriaExpanded()',
-    '[attr.aria-level]': 'level + 1',
-    '[attr.aria-posinset]': '_getPositionInSet()',
-    '[attr.aria-setsize]': '_getSetSize()',
-    '[tabindex]': '_tabindex',
-    'role': 'treeitem',
-    '(click)': '_setActiveItem()',
-    '(focus)': '_focusItem()',
+    '[attr.aria-expanded]': 'isLeafNode ? null : isExpanded',
   },
   standalone: true,
 })
@@ -1248,19 +1241,23 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
   }
   protected _data: T;
 
+  get isExpanded(): boolean {
+    return this._tree.treeControl.isExpanded(this._data);
+  }
+
   /* If leaf node, return true to not assign aria-expanded attribute */
   get isLeafNode(): boolean {
     // If flat tree node data returns false for expandable property, it's a leaf node
     if (
-      this._tree.treeControl?.isExpandable !== undefined &&
+      this._tree.treeControl.isExpandable !== undefined &&
       !this._tree.treeControl.isExpandable(this._data)
     ) {
       return true;
 
       // If nested tree node data returns 0 descendants, it's a leaf node
     } else if (
-      this._tree.treeControl?.isExpandable === undefined &&
-      this._tree.treeControl?.getDescendants(this._data).length === 0
+      this._tree.treeControl.isExpandable === undefined &&
+      this._tree.treeControl.getDescendants(this._data).length === 0
     ) {
       return true;
     }

diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts
@@ -74,12 +74,16 @@ describe('MatTree', () => {
         fixture.detectChanges();
         let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
         expect(ariaExpandedStates).toEqual([null, null, 'false']);
+        let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpandedStates).toEqual([null, null, 'false']);
 
         component.tree.expandAll();
         fixture.detectChanges();
 
         ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
         expect(ariaExpandedStates).toEqual([null, null, 'true', null]);
+        ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpandedStates).toEqual([null, null, 'true', null]);
       });
 
       it('with the right data', () => {
@@ -454,11 +458,8 @@ describe('MatTree', () => {
       });
 
       it('with the right aria-expanded attrs', () => {
-        expect(
-          getNodes(treeElement)
-            .map(x => `${x.getAttribute('aria-expanded')}`)
-            .join(', '),
-        ).toEqual('null, null, null');
+        let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpandedStates).toEqual([null, null, null]);
 
         component.toggleRecursively = false;
         const data = underlyingDataSource.data;
@@ -469,15 +470,8 @@ describe('MatTree', () => {
         (getNodes(treeElement)[1] as HTMLElement).click();
         fixture.detectChanges();
 
-        // Note: only four elements are present here; children are not present
-        // in DOM unless the parent node is expanded.
-        expect(
-          getNodes(treeElement)
-            .map(x => `${x.getAttribute('aria-expanded')}`)
-            .join(', '),
-        )
-          .withContext('aria-expanded attributes')
-          .toEqual('null, true, false, null');
+        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
+        expect(ariaExpanded).toEqual([null, 'true', 'false', null]);
       });
 
       it('should expand/collapse the node', () => {

diff --git a/tools/public_api_guard/cdk/tree.md b/tools/public_api_guard/cdk/tree.md
@@ -187,6 +187,8 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     // (undocumented)
     get isLeafNode(): boolean;
     // (undocumented)
+    get isLeafNode(): boolean;
+    // (undocumented)
     get level(): number;
     static mostRecentTreeNode: CdkTreeNode<any> | null;
     // (undocumented)