Merge branch 'angular:main' into chips-overflow

adolgachev · web-flow · commit 57fb30524f68 · 2025-09-21T21:22:17.000-07:00
diff --git a/goldens/material/button/testing/index.api.md b/goldens/material/button/testing/index.api.md
@@ -17,6 +17,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {
     appearance?: ButtonAppearance;
     buttonType?: ButtonType;
     disabled?: boolean;
+    iconName?: string | RegExp;
     text?: string | RegExp;
     variant?: ButtonVariant;
 }
diff --git a/src/cdk-experimental/deferred-content/deferred-content.spec.ts b/src/cdk-experimental/deferred-content/deferred-content.spec.ts
@@ -32,17 +32,25 @@ describe('DeferredContent', () => {
       component.preserveContent.set(true);
     });
 
-    it('creates the content when hidden.', async () => {
+    it('does not create the content until first visible.', async () => {
       collapsible.injector.get(Collapsible).contentVisible.set(false);
       await fixture.whenStable();
-      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+      expect(collapsible.nativeElement.innerText).toBe('');
     });
 
     it('creates the content when visible.', async () => {
       collapsible.injector.get(Collapsible).contentVisible.set(true);
       await fixture.whenStable();
       expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
     });
+
+    it('does not remove the content when hidden.', async () => {
+      collapsible.injector.get(Collapsible).contentVisible.set(true);
+      await fixture.whenStable();
+      collapsible.injector.get(Collapsible).contentVisible.set(false);
+      await fixture.whenStable();
+      expect(collapsible.nativeElement.innerText).toBe('Lazy Content');
+    });
   });
 });
 
diff --git a/src/cdk-experimental/deferred-content/deferred-content.ts b/src/cdk-experimental/deferred-content/deferred-content.ts
@@ -7,8 +7,8 @@
  */
 
 import {
+  afterRenderEffect,
   Directive,
-  effect,
   inject,
   input,
   TemplateRef,
@@ -21,7 +21,7 @@ import {
  */
 @Directive()
 export class DeferredContentAware {
-  contentVisible = signal(false);
+  readonly contentVisible = signal(false);
   readonly preserveContent = input(false);
 }
 
@@ -48,16 +48,13 @@ export class DeferredContent {
   private _isRendered = false;
 
   constructor() {
-    effect(() => {
-      if (
-        this._deferredContentAware.preserveContent() ||
-        this._deferredContentAware.contentVisible()
-      ) {
+    afterRenderEffect(() => {
+      if (this._deferredContentAware.contentVisible()) {
         if (this._isRendered) return;
         this._viewContainerRef.clear();
         this._viewContainerRef.createEmbeddedView(this._templateRef);
         this._isRendered = true;
-      } else {
+      } else if (!this._deferredContentAware.preserveContent()) {
         this._viewContainerRef.clear();
         this._isRendered = false;
       }
diff --git a/src/cdk-experimental/tree/tree.spec.ts b/src/cdk-experimental/tree/tree.spec.ts
@@ -119,7 +119,6 @@ describe('CdkTree', () => {
           if (config.label !== undefined) node.label = config.label;
           if (config.children !== undefined) node.children = config.children;
           if (config.disabled !== undefined) node.disabled = config.disabled;
-          if (config.preserveContent !== undefined) node.preserveContent = config.preserveContent;
           updateTree({nodes: newNodes});
           return;
         }
@@ -151,6 +150,16 @@ describe('CdkTree', () => {
     return item?.getAttribute('data-value') ?? undefined;
   }
 
+  function expandAll() {
+    const fruitsEl = getTreeItemElementByValue('fruits')!;
+    click(fruitsEl);
+    const berriesEl = getTreeItemElementByValue('berries')!;
+    click(berriesEl);
+    const vegetablesEl = getTreeItemElementByValue('vegetables')!;
+    click(vegetablesEl);
+    updateTree({value: []});
+  }
+
   afterEach(async () => {
     fixture.detectChanges();
     await runAccessibilityChecks(fixture.nativeElement);
@@ -160,17 +169,15 @@ describe('CdkTree', () => {
     describe('default configuration', () => {
       beforeEach(() => {
         setupTestTree();
-        // Preserve collapsed children nodes for checking attributes.
-        updateTreeItemByValue('fruits', {preserveContent: true});
-        updateTreeItemByValue('berries', {preserveContent: true});
-        updateTreeItemByValue('vegetables', {preserveContent: true});
       });
 
       it('should correctly set the role attribute to "tree" for CdkTree', () => {
         expect(treeElement.getAttribute('role')).toBe('tree');
       });
 
       it('should correctly set the role attribute to "treeitem" for CdkTreeItem', () => {
+        expandAll();
+
         expect(getTreeItemElementByValue('fruits')!.getAttribute('role')).toBe('treeitem');
         expect(getTreeItemElementByValue('vegetables')!.getAttribute('role')).toBe('treeitem');
         expect(getTreeItemElementByValue('grains')!.getAttribute('role')).toBe('treeitem');
@@ -183,6 +190,8 @@ describe('CdkTree', () => {
       });
 
       it('should correctly set the role attribute to "group" for CdkTreeItemGroup', () => {
+        expandAll();
+
         expect(getTreeItemGroupElementByValue('fruits')!.getAttribute('role')).toBe('group');
         expect(getTreeItemGroupElementByValue('vegetables')!.getAttribute('role')).toBe('group');
         expect(getTreeItemGroupElementByValue('berries')!.getAttribute('role')).toBe('group');
@@ -215,17 +224,19 @@ describe('CdkTree', () => {
       });
 
       it('should set aria-level, aria-setsize, and aria-posinset correctly', () => {
+        expandAll();
+
         const fruits = getTreeItemElementByValue('fruits')!;
         expect(fruits.getAttribute('aria-level')).toBe('1');
         expect(fruits.getAttribute('aria-setsize')).toBe('4');
         expect(fruits.getAttribute('aria-posinset')).toBe('1');
-        expect(fruits.getAttribute('aria-expanded')).toBe('false');
+        expect(fruits.getAttribute('aria-expanded')).toBe('true');
 
         const vegetables = getTreeItemElementByValue('vegetables')!;
         expect(vegetables.getAttribute('aria-level')).toBe('1');
         expect(vegetables.getAttribute('aria-setsize')).toBe('4');
         expect(vegetables.getAttribute('aria-posinset')).toBe('2');
-        expect(vegetables.getAttribute('aria-expanded')).toBe('false');
+        expect(vegetables.getAttribute('aria-expanded')).toBe('true');
 
         const grains = getTreeItemElementByValue('grains')!;
         expect(grains.getAttribute('aria-level')).toBe('1');
@@ -246,7 +257,7 @@ describe('CdkTree', () => {
         expect(berries.getAttribute('aria-level')).toBe('2');
         expect(berries.getAttribute('aria-setsize')).toBe('3');
         expect(berries.getAttribute('aria-posinset')).toBe('3');
-        expect(berries.getAttribute('aria-expanded')).toBe('false');
+        expect(berries.getAttribute('aria-expanded')).toBe('true');
 
         const strawberry = getTreeItemElementByValue('strawberry')!;
         expect(strawberry.getAttribute('aria-level')).toBe('3');
@@ -264,10 +275,6 @@ describe('CdkTree', () => {
     describe('custom configuration', () => {
       beforeEach(() => {
         setupTestTree();
-        // Preserve collapsed children nodes for checking attributes.
-        updateTreeItemByValue('fruits', {preserveContent: true});
-        updateTreeItemByValue('berries', {preserveContent: true});
-        updateTreeItemByValue('vegetables', {preserveContent: true});
       });
 
       it('should set aria-orientation to "horizontal"', () => {
@@ -296,6 +303,7 @@ describe('CdkTree', () => {
       });
 
       it('should set aria-selected to "true" for selected items', () => {
+        expandAll();
         updateTree({value: ['apple']});
 
         const appleItem = getTreeItemElementByValue('apple')!;
@@ -306,11 +314,13 @@ describe('CdkTree', () => {
 
       it('should set aria-expanded to "true" for expanded items', () => {
         right();
+
         const fruitsItem = getTreeItemElementByValue('fruits')!;
         expect(fruitsItem.getAttribute('aria-expanded')).toBe('true');
       });
 
       it('should set aria-current to specific current type when nav="true"', () => {
+        expandAll();
         updateTree({nav: true, value: ['apple']});
 
         const appleItem = getTreeItemElementByValue('apple')!;
@@ -323,6 +333,8 @@ describe('CdkTree', () => {
       });
 
       it('should not set aria-selected when nav="true"', () => {
+        expandAll();
+
         updateTree({value: ['apple'], nav: true});
         const appleItem = getTreeItemElementByValue('apple')!;
         expect(appleItem.hasAttribute('aria-selected')).toBe(false);
@@ -402,10 +414,7 @@ describe('CdkTree', () => {
       });
 
       it('should set tabindex="-1" for all items', () => {
-        // Preserve collapsed children nodes for checking attributes.
-        updateTreeItemByValue('fruits', {preserveContent: true});
-        updateTreeItemByValue('berries', {preserveContent: true});
-        updateTreeItemByValue('vegetables', {preserveContent: true});
+        expandAll();
 
         expect(getTreeItemElementByValue('fruits')!.getAttribute('tabindex')).toBe('-1');
         expect(getTreeItemElementByValue('apple')!.getAttribute('tabindex')).toBe('-1');
@@ -425,10 +434,7 @@ describe('CdkTree', () => {
   describe('value and selection', () => {
     it('should select items based on the initial value input', () => {
       setupTestTree();
-      // Preserve collapsed children nodes for checking attributes.
-      updateTreeItemByValue('fruits', {preserveContent: true});
-      updateTreeItemByValue('berries', {preserveContent: true});
-      updateTreeItemByValue('vegetables', {preserveContent: true});
+      expandAll();
       updateTree({value: ['apple', 'strawberry', 'carrot']});
 
       expect(getTreeItemElementByValue('apple')!.getAttribute('aria-selected')).toBe('true');
@@ -1320,7 +1326,6 @@ interface TestTreeNode<V = string> {
   label: string;
   disabled?: boolean;
   children?: TestTreeNode<V>[];
-  preserveContent?: boolean;
 }
 
 @Component({
@@ -1359,7 +1364,6 @@ interface TestTreeNode<V = string> {
           <ul
             cdkTreeItemGroup
             [ownedBy]="treeItem"
-            [preserveContent]="!!node.preserveContent"
             [attr.data-group-for]="node.value"
             #group="cdkTreeItemGroup">
             <ng-template cdkTreeItemGroupContent>
diff --git a/src/material/button/testing/BUILD.bazel b/src/material/button/testing/BUILD.bazel
@@ -11,6 +11,7 @@ ts_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/cdk/testing",
+        "//src/material/icon/testing",
     ],
 )
 
diff --git a/src/material/button/testing/button-harness-filters.ts b/src/material/button/testing/button-harness-filters.ts
@@ -33,4 +33,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {
 
   /** Only find instances with the specified type. */
   buttonType?: ButtonType;
+
+  /** Only find instances that contain an icon whose name matches the given value. */
+  iconName?: string | RegExp;
 }
diff --git a/src/material/button/testing/button-harness.spec.ts b/src/material/button/testing/button-harness.spec.ts
@@ -115,6 +115,13 @@ describe('MatButtonHarness', () => {
     expect(await favIcon.getName()).toBe('favorite');
   });
 
+  it('should be able to filter buttons containing a named icon', async () => {
+    const favBtn = await loader.getHarness(MatButtonHarness.with({iconName: 'favorite'}));
+
+    expect(await (await favBtn.host()).getAttribute('id')).toBe('favorite-icon');
+    expect(await (await favBtn.getHarness(MatIconHarness)).getName()).toBe('favorite');
+  });
+
   it('should be able to ge the type variant of the button', async () => {
     const buttons = await loader.getAllHarnesses(MatButtonHarness);
     const variants = await parallel(() => buttons.map(button => button.getVariant()));
diff --git a/src/material/button/testing/button-harness.ts b/src/material/button/testing/button-harness.ts
@@ -12,6 +12,7 @@ import {
   ContentContainerComponentHarness,
   HarnessPredicate,
 } from '@angular/cdk/testing';
+import {MatIconHarness} from '@angular/material/icon/testing';
 import {
   ButtonAppearance,
   ButtonHarnessFilters,
@@ -58,7 +59,10 @@ export class MatButtonHarness extends ContentContainerComponentHarness {
       })
       .addOption('buttonType', options.buttonType, (harness, buttonType) =>
         HarnessPredicate.stringMatches(harness.getType(), buttonType),
-      );
+      )
+      .addOption('iconName', options.iconName, (harness, iconName) => {
+        return harness.hasHarness(MatIconHarness.with({name: iconName}));
+      });
   }
 
   /**
diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
@@ -95,34 +95,28 @@
   }
 </div>
 
-<div
-    class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
-    [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
+<div aria-atomic="true" aria-live="polite"
+  class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+  [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
 >
   @let subscriptMessageType = _getSubscriptMessageType();
 
-  <!-- 
-    Use a single permanent wrapper for both hints and errors so aria-live works correctly,
-    as having it appear post render will not consistently work. We also do not want to add
-    additional divs as it causes styling regressions.
-    -->
-  <div aria-atomic="true" aria-live="polite" 
-      [class.mat-mdc-form-field-error-wrapper]="subscriptMessageType === 'error'"
-      [class.mat-mdc-form-field-hint-wrapper]="subscriptMessageType === 'hint'"
-    >
-    @switch (subscriptMessageType) {
-      @case ('error') {
+  @switch (subscriptMessageType) {
+    @case ('error') {
+      <div class="mat-mdc-form-field-error-wrapper">
         <ng-content select="mat-error, [matError]"></ng-content>
-      }
+      </div>
+    }
 
-      @case ('hint') {
+    @case ('hint') {
+      <div class="mat-mdc-form-field-hint-wrapper">
         @if (hintLabel) {
           <mat-hint [id]="_hintLabelId">{{hintLabel}}</mat-hint>
         }
         <ng-content select="mat-hint:not([align='end'])"></ng-content>
         <div class="mat-mdc-form-field-hint-spacer"></div>
         <ng-content select="mat-hint[align='end']"></ng-content>
-      }
+      </div>
     }
-  </div>
+  }
 </div>

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {`
`17`	`17`	`appearance?: ButtonAppearance;`
`18`	`18`	`buttonType?: ButtonType;`
`19`	`19`	`disabled?: boolean;`
	`20`	`+ iconName?: string \| RegExp;`
`20`	`21`	`text?: string \| RegExp;`
`21`	`22`	`variant?: ButtonVariant;`
`22`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ ts_project(`
`11`	`11`	`deps = [`
`12`	`12`	`"//:node_modules/@angular/core",`
`13`	`13`	`"//src/cdk/testing",`
	`14`	`+ "//src/material/icon/testing",`
`14`	`15`	`],`
`15`	`16`	`)`
`16`	`17`
Original file line number	Diff line number	Diff line change
`@@ -33,4 +33,7 @@ export interface ButtonHarnessFilters extends BaseHarnessFilters {`
`33`	`33`
`34`	`34`	`/** Only find instances with the specified type. */`
`35`	`35`	`buttonType?: ButtonType;`
	`36`	`+`
	`37`	`+ /** Only find instances that contain an icon whose name matches the given value. */`
	`38`	`+ iconName?: string \| RegExp;`
`36`	`39`	`}`