fix(multiple): remove label for attribute on non-native elements (#2258)

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 `sbb-select` and `sbb-textarea`. This isn't an accessibility regression, because those elements were already being labeled using `aria-labelledby`.
Fixes #1918

Author: mhaertwig

src/angular/form-field/form-field-control.ts

@@ -41,6 +41,13 @@ export abstract class SbbFormFieldControl<TValue> {
    */
   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/angular/form-field/form-field.html

@@ -3,7 +3,7 @@
     <label
       class="sbb-label sbb-form-field-label"
       [id]="_labelId"
-      [attr.for]="_control.id"
+      [attr.for]="_control.disableAutomaticLabeling ? null : _control.id"
       [class.sbb-form-field-empty]="_control.empty"
     >
       @switch (_hasLabel()) {

src/angular/select/select.ts

@@ -276,6 +276,12 @@ export class SbbSelect
    */
   readonly stateChanges = new Subject<void>();
 
+  /**
+   * Disable the automatic labeling to avoid issues like #1918.
+   * @docs-private
+   */
+  readonly disableAutomaticLabeling = true;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private

src/angular/textarea/textarea/textarea.ts

@@ -70,6 +70,12 @@ export class SbbTextarea
     return `${this.id || this._uniqueId}-input`;
   }
 
+  /**
+   * Disable the automatic labeling to avoid issues like #1918.
+   * @docs-private
+   */
+  readonly disableAutomaticLabeling = true;
+
   /** Emits when the state of the option changes and any parents have to be notified. */
   readonly stateChanges = new Subject<void>();