Merge branch 'angular:main' into slider-fix-pt2

Author: DBowen33

.circleci/bazel.rc

@@ -1,3 +1,46 @@
+<a name="19.0.0-rc.2"></a>
+# 19.0.0-rc.2 "barium-binoculars" (2024-11-13)
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [8141e45a8](https://github.com/angular/components/commit/8141e45a892a9f5bb6643a3ce606845d9a302251) | fix | **listbox:** make tabindex zoneless compatible ([#29970](https://github.com/angular/components/pull/29970)) |
+| [a78f47551](https://github.com/angular/components/commit/a78f475510b49aa6ddd9052ef6fdfc1e0c0c15d4) | fix | **table:** set explicit role on all cells ([#29987](https://github.com/angular/components/pull/29987)) |
+| [fda61f565](https://github.com/angular/components/commit/fda61f565093cb9f8de5b3339de01ac92cc6926f) | fix | **testing:** allow use of `plaintext-only` for `contenteditable` ([#29999](https://github.com/angular/components/pull/29999)) |
+| [f6066c23f](https://github.com/angular/components/commit/f6066c23feee5a23d870104860f1e18bb9f3db83) | fix | **tree:** warn if mixed node types are used within the same tree |
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [de6c20686](https://github.com/angular/components/commit/de6c20686c441ff39b872b69c725c3c46b1f3a93) | fix | **bottom-sheet:** add `height` `minHeight` `maxHeight` to config ([#29794](https://github.com/angular/components/pull/29794)) |
+| [d0d59b784](https://github.com/angular/components/commit/d0d59b784abdde79bebaf9cff6d316c952228fa7) | fix | **core:** change ng-add to use mat.theme ([#29990](https://github.com/angular/components/pull/29990)) |
+| [b7f509c5b](https://github.com/angular/components/commit/b7f509c5bf943c2b3bc11f72183b90545f6571a7) | fix | **core:** incorrect validation in get-theme-color ([#29994](https://github.com/angular/components/pull/29994)) |
+| [d55ec612c](https://github.com/angular/components/commit/d55ec612cc66b42971c9da2677bc6e54017dd271) | fix | **core:** update prebuilt themes to use mat.theme ([#29989](https://github.com/angular/components/pull/29989)) |
+| [482009bac](https://github.com/angular/components/commit/482009bac173bd4453d20dfec283e3cab23d2af0) | fix | **schematics:** add explicit system variable prefix schematic ([#29980](https://github.com/angular/components/pull/29980)) |
+| [75631fb0b](https://github.com/angular/components/commit/75631fb0b305891ea22e422f8bd9d9d991c1d6ef) | fix | **sidenav:** prevent the content from jumping when hydrated ([#29991](https://github.com/angular/components/pull/29991)) |
+| [bb66db738](https://github.com/angular/components/commit/bb66db73867df02f55feed8fca4daf7cb9d8dc83) | fix | **snack-bar:** prevent override of snack bar action button color ([#27511](https://github.com/angular/components/pull/27511)) |
+### youtube-player
+| Commit | Type | Description |
+| -- | -- | -- |
+| [09da06b42](https://github.com/angular/components/commit/09da06b42e2aad668bbdeb9adecdad401b0d8df6) | fix | ready event not emitting |
+| [288598750](https://github.com/angular/components/commit/2885987500f9005fbdf981c700b516096896868b) | fix | startSeconds not applied when using placeholder |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="18.2.13"></a>
+# 18.2.13 "strontium-sauce" (2024-11-13)
+### cdk
+| Commit | Type | Description |
+| -- | -- | -- |
+| [1ea3ba383](https://github.com/angular/components/commit/1ea3ba38337d8b59518c073c95e0ca64e6fd5db3) | fix | **listbox:** make tabindex zoneless compatible ([#29970](https://github.com/angular/components/pull/29970)) |
+| [890036064](https://github.com/angular/components/commit/890036064a825ddc44068d4b6fc71edfd7ddb43c) | fix | **table:** set explicit role on all cells ([#29987](https://github.com/angular/components/pull/29987)) |
+| [3c7de8400](https://github.com/angular/components/commit/3c7de8400b60558b1c39d13278d7a325ade2be1a) | fix | **testing:** allow use of `plaintext-only` for `contenteditable` ([#29999](https://github.com/angular/components/pull/29999)) |
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [c643f04ef](https://github.com/angular/components/commit/c643f04ef042eb16606c8b490854db79e413a34d) | fix | **core:** incorrect validation in get-theme-color ([#29994](https://github.com/angular/components/pull/29994)) |
+| [aed9094f9](https://github.com/angular/components/commit/aed9094f9c33bbb2134ae9551f8c5d4db4b24356) | fix | **snack-bar:** prevent override of snack bar action button color ([#27511](https://github.com/angular/components/pull/27511)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="18.2.12"></a>
 # 18.2.12 "galaxite-galaxy" (2024-11-06)
 ### material

.circleci/config.yml

@@ -39,7 +39,6 @@ cdk-virtual-scroll-viewport {
   overflow: auto;
   will-change: scroll-position;
   contain: strict;
-  -webkit-overflow-scrolling: touch;
 }
 
 // Wrapper element for the rendered content. This element will be transformed to push the rendered

CHANGELOG.md

@@ -161,7 +161,11 @@ export class SeleniumWebDriverElement implements TestElement {
   async setContenteditableValue(value: string): Promise<void> {
     const contenteditableAttr = await this.getAttribute('contenteditable');
 
-    if (contenteditableAttr !== '' && contenteditableAttr !== 'true') {
+    if (
+      contenteditableAttr !== '' &&
+      contenteditableAttr !== 'true' &&
+      contenteditableAttr !== 'plaintext-only'
+    ) {
       throw new Error('setContenteditableValue can only be called on a `contenteditable` element.');
     }
 

src/cdk/scrolling/virtual-scroll-viewport.scss

@@ -196,7 +196,11 @@ export class UnitTestElement implements TestElement {
   async setContenteditableValue(value: string): Promise<void> {
     const contenteditableAttr = await this.getAttribute('contenteditable');
 
-    if (contenteditableAttr !== '' && contenteditableAttr !== 'true') {
+    if (
+      contenteditableAttr !== '' &&
+      contenteditableAttr !== 'true' &&
+      contenteditableAttr !== 'plaintext-only'
+    ) {
       throw new Error('setContenteditableValue can only be called on a `contenteditable` element.');
     }
 

src/cdk/testing/selenium-webdriver/selenium-web-driver-element.ts

@@ -18,7 +18,6 @@ $icon-margin: 16px !default;
   min-width: $overlay-min-width;
   max-width: $overlay-max-width;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
 
 @mixin item-base() {

src/cdk/testing/testbed/unit-test-element.ts

@@ -36,7 +36,7 @@ import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Subject, Subscription, merge} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {map, pairwise, takeUntil, filter, startWith} from 'rxjs/operators';
 import {MAT_ERROR, MatError} from './directives/error';
 import {
   FLOATING_LABEL_PARENT,
@@ -328,6 +328,7 @@ export class MatFormField
   private _previousControl: MatFormFieldControl<unknown> | null = null;
   private _stateChanges: Subscription | undefined;
   private _valueChanges: Subscription | undefined;
+  private _describedByChanges: Subscription | undefined;
 
   private _injector = inject(Injector);
 
@@ -377,6 +378,7 @@ export class MatFormField
   ngOnDestroy() {
     this._stateChanges?.unsubscribe();
     this._valueChanges?.unsubscribe();
+    this._describedByChanges?.unsubscribe();
     this._destroyed.next();
     this._destroyed.complete();
   }
@@ -426,10 +428,22 @@ export class MatFormField
     this._stateChanges?.unsubscribe();
     this._stateChanges = control.stateChanges.subscribe(() => {
       this._updateFocusState();
-      this._syncDescribedByIds();
       this._changeDetectorRef.markForCheck();
     });
 
+    // Updating the `aria-describedby` touches the DOM. Only do it if it actually needs to change.
+    this._describedByChanges?.unsubscribe();
+    this._describedByChanges = control.stateChanges
+      .pipe(
+        startWith([undefined, undefined] as const),
+        map(() => [control.errorState, control.userAriaDescribedBy] as const),
+        pairwise(),
+        filter(([[prevErrorState, prevDescribedBy], [currentErrorState, currentDescribedBy]]) => {
+          return prevErrorState !== currentErrorState || prevDescribedBy !== currentDescribedBy;
+        }),
+      )
+      .subscribe(() => this._syncDescribedByIds());
+
     this._valueChanges?.unsubscribe();
 
     // Run change detection if the value changes.

src/material/core/style/_menu-common.scss

@@ -643,6 +643,18 @@ describe('MatMdcInput without forms', () => {
     expect(input.getAttribute('aria-describedby')).toBe('start end');
   }));
 
+  it('should preserve aria-describedby set directly in the DOM', fakeAsync(() => {
+    const fixture = createComponent(MatInputHintLabel2TestController);
+    const input = fixture.nativeElement.querySelector('input');
+    input.setAttribute('aria-describedby', 'custom');
+    fixture.componentInstance.label = 'label';
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+    const hint = fixture.nativeElement.querySelector('.mat-mdc-form-field-hint');
+
+    expect(input.getAttribute('aria-describedby')).toBe(`${hint.getAttribute('id')} custom`);
+  }));
+
   it('should set a class on the hint element based on its alignment', fakeAsync(() => {
     const fixture = createComponent(MatInputMultipleHintTestController);
 

src/material/form-field/form-field.ts

@@ -111,6 +111,9 @@ export class MatInput
   private _webkitBlinkWheelListenerAttached = false;
   private _config = inject(MAT_INPUT_CONFIG, {optional: true});
 
+  /** `aria-describedby` IDs assigned by the form field. */
+  private _formFieldDescribedBy: string[] | undefined;
+
   /** Whether the component is being rendered on the server. */
   readonly _isServer: boolean;
 
@@ -551,10 +554,29 @@ export class MatInput
    * @docs-private
    */
   setDescribedByIds(ids: string[]) {
-    if (ids.length) {
-      this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+    const element = this._elementRef.nativeElement;
+    const existingDescribedBy = element.getAttribute('aria-describedby');
+    let toAssign: string[];
+
+    // In some cases there might be some `aria-describedby` IDs that were assigned directly,
+    // like by the `AriaDescriber` (see #30011). Attempt to preserve them by taking the previous
+    // attribute value and filtering out the IDs that came from the previous `setDescribedByIds`
+    // call. Note the `|| ids` here allows us to avoid duplicating IDs on the first render.
+    if (existingDescribedBy) {
+      const exclude = this._formFieldDescribedBy || ids;
+      toAssign = ids.concat(
+        existingDescribedBy.split(' ').filter(id => id && !exclude.includes(id)),
+      );
+    } else {
+      toAssign = ids;
+    }
+
+    this._formFieldDescribedBy = ids;
+
+    if (toAssign.length) {
+      element.setAttribute('aria-describedby', toAssign.join(' '));
     } else {
-      this._elementRef.nativeElement.removeAttribute('aria-describedby');
+      element.removeAttribute('aria-describedby');
     }
   }