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.

Author: crisbeto

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>,

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;
 

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

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

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;

tools/public_api_guard/material/form-field.md

@@ -166,6 +166,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;

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;