feat(form-field): expose label content element id for custom controls

Currently, the form-field always creates a label element as sibling
to projected form-field controls. For native controls, the label is
associated with the controls using the `for` attribute.

This doesn't work for custom controls which might not be based
on native controls. e.g. the `mat-select`. In those cases, the
appropriate aria attributes need to be applied with `aria-labelledby`
that refers to the label content element.

Since this is a common pattern for custom controls that don't use
native controls, we need to expose the element id for the label content.

Currently we already do this for the select, but just prefixed it with
an underscore. This denotes it as private API while there is obviously a
use-case for exposing this publicly. Best example is how the select
_needs_ it.

Author: devversion

src/material-experimental/mdc-form-field/form-field.html

@@ -5,7 +5,7 @@
          *ngIf="_hasFloatingLabel()"
          (cdkObserveContent)="_refreshOutlineNotchWidth()"
          [cdkObserveContentDisabled]="!_hasOutline()"
-         [id]="_labelId"
+         [id]="labelContentId"
          [attr.for]="_control.id"
          [attr.aria-owns]="_control.id">
     <ng-content select="mat-label"></ng-content>

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

@@ -192,11 +192,11 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   }
   private _hintLabel = '';
 
-  // Unique id for the hint label.
-  _hintLabelId: string = `mat-hint-${nextUniqueId++}`;
+  /** Unique id for the label content. */
+  readonly labelContentId: string = `mat-form-field-label-${nextUniqueId++}`;
 
-  // Unique id for the internal form field label.
-  _labelId = `mat-form-field-label-${nextUniqueId++}`;
+  // Unique id for the hint label.
+  readonly _hintLabelId: string = `mat-hint-${nextUniqueId++}`;
 
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState: string = '';

src/material/form-field/form-field.html

@@ -29,7 +29,7 @@
         <label class="mat-form-field-label"
                (cdkObserveContent)="updateOutlineGap()"
                [cdkObserveContentDisabled]="appearance != 'outline'"
-               [id]="_labelId"
+               [id]="labelContentId"
                [attr.for]="_control.id"
                [attr.aria-owns]="_control.id"
                [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"

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

@@ -210,10 +210,10 @@ export class MatFormField extends _MatFormFieldMixinBase
   private _hintLabel = '';
 
   // Unique id for the hint label.
-  _hintLabelId: string = `mat-hint-${nextUniqueId++}`;
+  readonly _hintLabelId: string = `mat-hint-${nextUniqueId++}`;
 
-  // Unique id for the internal form field label.
-  _labelId = `mat-form-field-label-${nextUniqueId++}`;
+  /** Unique id for the label content. */
+  readonly labelContentId = `mat-form-field-label-${nextUniqueId++}`;
 
   /**
    * Whether the label should always float, never float or float as the user types.

src/material/select/select.ts

@@ -1166,7 +1166,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       return null;
     }
 
-    return this._parentFormField._labelId || null;
+    return this._parentFormField.labelContentId || null;
   }
 
   /** Determines the `aria-activedescendant` to be set on the host. */