main - 94a0834 fix(multiple): remove label for attribute on non-nativ…

…e elements (#28948)
angular · Apr 24, 2024 · edefc32 · edefc32
1 parent 6a78ca3
commit edefc32
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 11 deletions.
diff --git a/datepicker/index.d.ts b/datepicker/index.d.ts
@@ -1264,6 +1264,11 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     ngControl: NgControl | null;
     /** Emits when the input's state has changed. */
     readonly stateChanges: Subject<void>;
+    /**
+     * Disable the automatic labeling to avoid issues like #27241.
+     * @docs-private
+     */
+    readonly disableAutomaticLabeling = true;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, control: ControlContainer, _dateAdapter: DateAdapter<D>, _formField?: _MatFormFieldPartial | undefined);
     /**
      * Implemented as a part of `MatFormFieldControl`.

diff --git a/esm2022/datepicker/date-range-input.mjs b/esm2022/datepicker/date-range-input.mjs
diff --git a/esm2022/form-field/form-field-control.mjs b/esm2022/form-field/form-field-control.mjs
@@ -8,4 +8,4 @@ export class MatFormFieldControl {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: MatFormFieldControl, decorators: [{
             type: Directive
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1jb250cm9sLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL21hdGVyaWFsL2Zvcm0tZmllbGQvZm9ybS1maWVsZC1jb250cm9sLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7O0FBRXhDLDhFQUE4RTtBQUU5RSxNQUFNLE9BQWdCLG1CQUFtQjtxSEFBbkIsbUJBQW1CO3lHQUFuQixtQkFBbUI7O2tHQUFuQixtQkFBbUI7a0JBRHhDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIExMQyBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcbmltcG9ydCB7QWJzdHJhY3RDb250cm9sRGlyZWN0aXZlLCBOZ0NvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7RGlyZWN0aXZlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqIEFuIGludGVyZmFjZSB3aGljaCBhbGxvd3MgYSBjb250cm9sIHRvIHdvcmsgaW5zaWRlIG9mIGEgYE1hdEZvcm1GaWVsZGAuICovXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBNYXRGb3JtRmllbGRDb250cm9sPFQ+IHtcbiAgLyoqIFRoZSB2YWx1ZSBvZiB0aGUgY29udHJvbC4gKi9cbiAgdmFsdWU6IFQgfCBudWxsO1xuXG4gIC8qKlxuICAgKiBTdHJlYW0gdGhhdCBlbWl0cyB3aGVuZXZlciB0aGUgc3RhdGUgb2YgdGhlIGNvbnRyb2wgY2hhbmdlcyBzdWNoIHRoYXQgdGhlIHBhcmVudCBgTWF0Rm9ybUZpZWxkYFxuICAgKiBuZWVkcyB0byBydW4gY2hhbmdlIGRldGVjdGlvbi5cbiAgICovXG4gIHJlYWRvbmx5IHN0YXRlQ2hhbmdlczogT2JzZXJ2YWJsZTx2b2lkPjtcblxuICAvKiogVGhlIGVsZW1lbnQgSUQgZm9yIHRoaXMgY29udHJvbC4gKi9cbiAgcmVhZG9ubHkgaWQ6IHN0cmluZztcblxuICAvKiogVGhlIHBsYWNlaG9sZGVyIGZvciB0aGlzIGNvbnRyb2wuICovXG4gIHJlYWRvbmx5IHBsYWNlaG9sZGVyOiBzdHJpbmc7XG5cbiAgLyoqIEdldHMgdGhlIEFic3RyYWN0Q29udHJvbERpcmVjdGl2ZSBmb3IgdGhpcyBjb250cm9sLiAqL1xuICByZWFkb25seSBuZ0NvbnRyb2w6IE5nQ29udHJvbCB8IEFic3RyYWN0Q29udHJvbERpcmVjdGl2ZSB8IG51bGw7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGNvbnRyb2wgaXMgZm9jdXNlZC4gKi9cbiAgcmVhZG9ubHkgZm9jdXNlZDogYm9vbGVhbjtcblxuICAvKiogV2hldGhlciB0aGUgY29udHJvbCBpcyBlbXB0eS4gKi9cbiAgcmVhZG9ubHkgZW1wdHk6IGJvb2xlYW47XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGBNYXRGb3JtRmllbGRgIGxhYmVsIHNob3VsZCB0cnkgdG8gZmxvYXQuICovXG4gIHJlYWRvbmx5IHNob3VsZExhYmVsRmxvYXQ6IGJvb2xlYW47XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGNvbnRyb2wgaXMgcmVxdWlyZWQuICovXG4gIHJlYWRvbmx5IHJlcXVpcmVkOiBib29sZWFuO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSBjb250cm9sIGlzIGRpc2FibGVkLiAqL1xuICByZWFkb25seSBkaXNhYmxlZDogYm9vbGVhbjtcblxuICAvKiogV2hldGhlciB0aGUgY29udHJvbCBpcyBpbiBhbiBlcnJvciBzdGF0ZS4gKi9cbiAgcmVhZG9ubHkgZXJyb3JTdGF0ZTogYm9vbGVhbjtcblxuICAvKipcbiAgICogQW4gb3B0aW9uYWwgbmFtZSBmb3IgdGhlIGNvbnRyb2wgdHlwZSB0aGF0IGNhbiBiZSB1c2VkIHRvIGRpc3Rpbmd1aXNoIGBtYXQtZm9ybS1maWVsZGAgZWxlbWVudHNcbiAgICogYmFzZWQgb24gdGhlaXIgY29udHJvbCB0eXBlLiBUaGUgZm9ybSBmaWVsZCB3aWxsIGFkZCBhIGNsYXNzLFxuICAgKiBgbWF0LWZvcm0tZmllbGQtdHlwZS17e2NvbnRyb2xUeXBlfX1gIHRvIGl0cyByb290IGVsZW1lbnQuXG4gICAqL1xuICByZWFkb25seSBjb250cm9sVHlwZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgaW5wdXQgaXMgY3VycmVudGx5IGluIGFuIGF1dG9maWxsZWQgc3RhdGUuIElmIHByb3BlcnR5IGlzIG5vdCBwcmVzZW50IG9uIHRoZVxuICAgKiBjb250cm9sIGl0IGlzIGFzc3VtZWQgdG8gYmUgZmFsc2UuXG4gICAqL1xuICByZWFkb25seSBhdXRvZmlsbGVkPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogVmFsdWUgb2YgYGFyaWEtZGVzY3JpYmVkYnlgIHRoYXQgc2hvdWxkIGJlIG1lcmdlZCB3aXRoIHRoZSBkZXNjcmliZWQtYnkgaWRzXG4gICAqIHdoaWNoIGFyZSBzZXQgYnkgdGhlIGZvcm0tZmllbGQuXG4gICAqL1xuICByZWFkb25seSB1c2VyQXJpYURlc2NyaWJlZEJ5Pzogc3RyaW5nO1xuXG4gIC8qKiBTZXRzIHRoZSBsaXN0IG9mIGVsZW1lbnQgSURzIHRoYXQgY3VycmVudGx5IGRlc2NyaWJlIHRoaXMgY29udHJvbC4gKi9cbiAgYWJzdHJhY3Qgc2V0RGVzY3JpYmVkQnlJZHMoaWRzOiBzdHJpbmdbXSk6IHZvaWQ7XG5cbiAgLyoqIEhhbmRsZXMgYSBjbGljayBvbiB0aGUgY29udHJvbCdzIGNvbnRhaW5lci4gKi9cbiAgYWJzdHJhY3Qgb25Db250YWluZXJDbGljayhldmVudDogTW91c2VFdmVudCk6IHZvaWQ7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1jb250cm9sLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL21hdGVyaWFsL2Zvcm0tZmllbGQvZm9ybS1maWVsZC1jb250cm9sLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7O0FBRXhDLDhFQUE4RTtBQUU5RSxNQUFNLE9BQWdCLG1CQUFtQjtxSEFBbkIsbUJBQW1CO3lHQUFuQixtQkFBbUI7O2tHQUFuQixtQkFBbUI7a0JBRHhDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgR29vZ2xlIExMQyBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICpcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vYW5ndWxhci5pby9saWNlbnNlXG4gKi9cblxuaW1wb3J0IHtPYnNlcnZhYmxlfSBmcm9tICdyeGpzJztcbmltcG9ydCB7QWJzdHJhY3RDb250cm9sRGlyZWN0aXZlLCBOZ0NvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7RGlyZWN0aXZlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqIEFuIGludGVyZmFjZSB3aGljaCBhbGxvd3MgYSBjb250cm9sIHRvIHdvcmsgaW5zaWRlIG9mIGEgYE1hdEZvcm1GaWVsZGAuICovXG5ARGlyZWN0aXZlKClcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBNYXRGb3JtRmllbGRDb250cm9sPFQ+IHtcbiAgLyoqIFRoZSB2YWx1ZSBvZiB0aGUgY29udHJvbC4gKi9cbiAgdmFsdWU6IFQgfCBudWxsO1xuXG4gIC8qKlxuICAgKiBTdHJlYW0gdGhhdCBlbWl0cyB3aGVuZXZlciB0aGUgc3RhdGUgb2YgdGhlIGNvbnRyb2wgY2hhbmdlcyBzdWNoIHRoYXQgdGhlIHBhcmVudCBgTWF0Rm9ybUZpZWxkYFxuICAgKiBuZWVkcyB0byBydW4gY2hhbmdlIGRldGVjdGlvbi5cbiAgICovXG4gIHJlYWRvbmx5IHN0YXRlQ2hhbmdlczogT2JzZXJ2YWJsZTx2b2lkPjtcblxuICAvKiogVGhlIGVsZW1lbnQgSUQgZm9yIHRoaXMgY29udHJvbC4gKi9cbiAgcmVhZG9ubHkgaWQ6IHN0cmluZztcblxuICAvKiogVGhlIHBsYWNlaG9sZGVyIGZvciB0aGlzIGNvbnRyb2wuICovXG4gIHJlYWRvbmx5IHBsYWNlaG9sZGVyOiBzdHJpbmc7XG5cbiAgLyoqIEdldHMgdGhlIEFic3RyYWN0Q29udHJvbERpcmVjdGl2ZSBmb3IgdGhpcyBjb250cm9sLiAqL1xuICByZWFkb25seSBuZ0NvbnRyb2w6IE5nQ29udHJvbCB8IEFic3RyYWN0Q29udHJvbERpcmVjdGl2ZSB8IG51bGw7XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGNvbnRyb2wgaXMgZm9jdXNlZC4gKi9cbiAgcmVhZG9ubHkgZm9jdXNlZDogYm9vbGVhbjtcblxuICAvKiogV2hldGhlciB0aGUgY29udHJvbCBpcyBlbXB0eS4gKi9cbiAgcmVhZG9ubHkgZW1wdHk6IGJvb2xlYW47XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGBNYXRGb3JtRmllbGRgIGxhYmVsIHNob3VsZCB0cnkgdG8gZmxvYXQuICovXG4gIHJlYWRvbmx5IHNob3VsZExhYmVsRmxvYXQ6IGJvb2xlYW47XG5cbiAgLyoqIFdoZXRoZXIgdGhlIGNvbnRyb2wgaXMgcmVxdWlyZWQuICovXG4gIHJlYWRvbmx5IHJlcXVpcmVkOiBib29sZWFuO1xuXG4gIC8qKiBXaGV0aGVyIHRoZSBjb250cm9sIGlzIGRpc2FibGVkLiAqL1xuICByZWFkb25seSBkaXNhYmxlZDogYm9vbGVhbjtcblxuICAvKiogV2hldGhlciB0aGUgY29udHJvbCBpcyBpbiBhbiBlcnJvciBzdGF0ZS4gKi9cbiAgcmVhZG9ubHkgZXJyb3JTdGF0ZTogYm9vbGVhbjtcblxuICAvKipcbiAgICogQW4gb3B0aW9uYWwgbmFtZSBmb3IgdGhlIGNvbnRyb2wgdHlwZSB0aGF0IGNhbiBiZSB1c2VkIHRvIGRpc3Rpbmd1aXNoIGBtYXQtZm9ybS1maWVsZGAgZWxlbWVudHNcbiAgICogYmFzZWQgb24gdGhlaXIgY29udHJvbCB0eXBlLiBUaGUgZm9ybSBmaWVsZCB3aWxsIGFkZCBhIGNsYXNzLFxuICAgKiBgbWF0LWZvcm0tZmllbGQtdHlwZS17e2NvbnRyb2xUeXBlfX1gIHRvIGl0cyByb290IGVsZW1lbnQuXG4gICAqL1xuICByZWFkb25seSBjb250cm9sVHlwZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgaW5wdXQgaXMgY3VycmVudGx5IGluIGFuIGF1dG9maWxsZWQgc3RhdGUuIElmIHByb3BlcnR5IGlzIG5vdCBwcmVzZW50IG9uIHRoZVxuICAgKiBjb250cm9sIGl0IGlzIGFzc3VtZWQgdG8gYmUgZmFsc2UuXG4gICAqL1xuICByZWFkb25seSBhdXRvZmlsbGVkPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogVmFsdWUgb2YgYGFyaWEtZGVzY3JpYmVkYnlgIHRoYXQgc2hvdWxkIGJlIG1lcmdlZCB3aXRoIHRoZSBkZXNjcmliZWQtYnkgaWRzXG4gICAqIHdoaWNoIGFyZSBzZXQgYnkgdGhlIGZvcm0tZmllbGQuXG4gICAqL1xuICByZWFkb25seSB1c2VyQXJpYURlc2NyaWJlZEJ5Pzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRvIGF1dG9tYXRpY2FsbHkgYXNzaWduIHRoZSBJRCBvZiB0aGUgZm9ybSBmaWVsZCBhcyB0aGUgYGZvcmAgYXR0cmlidXRlXG4gICAqIG9uIHRoZSBgPGxhYmVsPmAgaW5zaWRlIHRoZSBmb3JtIGZpZWxkLiBTZXQgdGhpcyB0byB0cnVlIHRvIHByZXZlbnQgdGhlIGZvcm1cbiAgICogZmllbGQgZnJvbSBhc3NvY2lhdGluZyB0aGUgbGFiZWwgd2l0aCBub24tbmF0aXZlIGVsZW1lbnRzLlxuICAgKi9cbiAgcmVhZG9ubHkgZGlzYWJsZUF1dG9tYXRpY0xhYmVsaW5nPzogYm9vbGVhbjtcblxuICAvKiogU2V0cyB0aGUgbGlzdCBvZiBlbGVtZW50IElEcyB0aGF0IGN1cnJlbnRseSBkZXNjcmliZSB0aGlzIGNvbnRyb2wuICovXG4gIGFic3RyYWN0IHNldERlc2NyaWJlZEJ5SWRzKGlkczogc3RyaW5nW10pOiB2b2lkO1xuXG4gIC8qKiBIYW5kbGVzIGEgY2xpY2sgb24gdGhlIGNvbnRyb2wncyBjb250YWluZXIuICovXG4gIGFic3RyYWN0IG9uQ29udGFpbmVyQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkO1xufVxuIl19
diff --git a/esm2022/form-field/form-field.mjs b/esm2022/form-field/form-field.mjs
diff --git a/esm2022/select/select.mjs b/esm2022/select/select.mjs
diff --git a/fesm2022/datepicker.mjs b/fesm2022/datepicker.mjs
@@ -4129,6 +4129,11 @@ class MatDateRangeInput {
         this.comparisonEnd = null;
         /** Emits when the input's state has changed. */
         this.stateChanges = new Subject();
+        /**
+         * Disable the automatic labeling to avoid issues like #27241.
+         * @docs-private
+         */
+        this.disableAutomaticLabeling = true;
         if (!_dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw createMissingDateImplError('DateAdapter');
         }

diff --git a/fesm2022/datepicker.mjs.map b/fesm2022/datepicker.mjs.map
diff --git a/fesm2022/form-field.mjs b/fesm2022/form-field.mjs
diff --git a/fesm2022/form-field.mjs.map b/fesm2022/form-field.mjs.map
diff --git a/fesm2022/select.mjs b/fesm2022/select.mjs
@@ -296,6 +296,11 @@ class MatSelect {
          * @docs-private
          */
         this.stateChanges = new Subject();
+        /**
+         * Disable the automatic labeling to avoid issues like #27241.
+         * @docs-private
+         */
+        this.disableAutomaticLabeling = true;
         /** `View -> model callback called when value changes` */
         this._onChange = () => { };
         /** `View -> model callback called when select has been touched` */

diff --git a/fesm2022/select.mjs.map b/fesm2022/select.mjs.map
diff --git a/form-field/index.d.ts b/form-field/index.d.ts
@@ -344,6 +344,12 @@ export declare abstract class MatFormFieldControl<T> {
      * which are set by the form-field.
      */
     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;
     /** Handles a click on the control's container. */

diff --git a/select/index.d.ts b/select/index.d.ts
@@ -149,6 +149,11 @@ export declare class MatSelect implements AfterContentInit, OnChanges, OnDestroy
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
+    /**
+     * Disable the automatic labeling to avoid issues like #27241.
+     * @docs-private
+     */
+    readonly disableAutomaticLabeling = true;
     /**
      * Implemented as part of MatFormFieldControl.
      * @docs-private