From 73d1e2e3cf530fafadc7a490ea8542487d6a325b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 24 Apr 2024 17:33:03 +0200
Subject: [PATCH] fix(multiple): remove label for attribute on non-native
 elements (#28948)

Adds an option to remove the `for` attribute from the `<label>` inside the form field from elements that can't be labeled. Also applies the new option to `mat-select` and `mat-date-range-picker`. This isn't an accessibility regression, because those elements were already being labeled using `aria-labelledby`.

Fixes #27241.

(cherry picked from commit 94a083408dbedb9ee18b0ce793ea8ef364d0e8bd)
---
 src/material/datepicker/date-range-input.ts   | 6 ++++++
 src/material/form-field/form-field-control.ts | 7 +++++++
 src/material/form-field/form-field.html       | 2 +-
 src/material/select/select.ts                 | 6 ++++++
 tools/public_api_guard/material/datepicker.md | 1 +
 tools/public_api_guard/material/form-field.md | 1 +
 tools/public_api_guard/material/select.md     | 1 +
 7 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 9110ffa5ab78..e5094061a4de 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -256,6 +256,12 @@ export class MatDateRangeInput<D>
   /** Emits when the input's state has changed. */
   readonly stateChanges = new Subject<void>();
 
+  /**
+   * Disable the automatic labeling to avoid issues like #27241.
+   * @docs-private
+   */
+  readonly disableAutomaticLabeling = true;
+
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
     private _elementRef: ElementRef<HTMLElement>,
diff --git a/src/material/form-field/form-field-control.ts b/src/material/form-field/form-field-control.ts
index 1bb06781822b..0657df71c90a 100644
--- a/src/material/form-field/form-field-control.ts
+++ b/src/material/form-field/form-field-control.ts
@@ -68,6 +68,13 @@ export abstract class MatFormFieldControl<T> {
    */
   readonly userAriaDescribedBy?: string;
 
+  /**
+   * Whether to automatically assign the ID of the form field as the `for` attribute
+   * on the `<label>` inside the form field. Set this to true to prevent the form
+   * field from associating the label with non-native elements.
+   */
+  readonly disableAutomaticLabeling?: boolean;
+
   /** Sets the list of element IDs that currently describe this control. */
   abstract setDescribedByIds(ids: string[]): void;
 
diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index ea623cd7dac9..340990c29d48 100644
--- a/src/material/form-field/form-field.html
+++ b/src/material/form-field/form-field.html
@@ -16,7 +16,7 @@
            [floating]="_shouldLabelFloat()"
            [monitorResize]="_hasOutline()"
            [id]="_labelId"
-           [attr.for]="_control.id">
+           [attr.for]="_control.disableAutomaticLabeling ? null : _control.id">
       <ng-content select="mat-label"></ng-content>
       <!--
         We set the required marker as a separate element, in order to make it easier to target if
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index 18ac44d06824..05ac5fa6896d 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -332,6 +332,12 @@ export class MatSelect
    */
   readonly stateChanges = new Subject<void>();
 
+  /**
+   * Disable the automatic labeling to avoid issues like #27241.
+   * @docs-private
+   */
+  readonly disableAutomaticLabeling = true;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private
diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md
index fc90d2bd119d..a054065a2c93 100644
--- a/tools/public_api_guard/material/datepicker.md
+++ b/tools/public_api_guard/material/datepicker.md
@@ -573,6 +573,7 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     controlType: string;
     get dateFilter(): DateFilterFn<D>;
     set dateFilter(value: DateFilterFn<D>);
+    readonly disableAutomaticLabeling = true;
     get disabled(): boolean;
     set disabled(value: boolean);
     get empty(): boolean;
diff --git a/tools/public_api_guard/material/form-field.md b/tools/public_api_guard/material/form-field.md
index 4a7947e0fa4b..455810e16410 100644
--- a/tools/public_api_guard/material/form-field.md
+++ b/tools/public_api_guard/material/form-field.md
@@ -165,6 +165,7 @@ export type MatFormFieldAppearance = 'fill' | 'outline';
 export abstract class MatFormFieldControl<T> {
     readonly autofilled?: boolean;
     readonly controlType?: string;
+    readonly disableAutomaticLabeling?: boolean;
     readonly disabled: boolean;
     readonly empty: boolean;
     readonly errorState: boolean;
diff --git a/tools/public_api_guard/material/select.md b/tools/public_api_guard/material/select.md
index 425893c0447d..2a3d30671ec9 100644
--- a/tools/public_api_guard/material/select.md
+++ b/tools/public_api_guard/material/select.md
@@ -102,6 +102,7 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
     // (undocumented)
     protected _defaultOptions?: MatSelectConfig | undefined;
     protected readonly _destroy: Subject<void>;
+    readonly disableAutomaticLabeling = true;
     disabled: boolean;
     disableOptionCentering: boolean;
     disableRipple: boolean;