feat(form-field): expose label 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

@@ -18,7 +18,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 element.
+  readonly _labelId: 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 = '';
@@ -349,6 +349,13 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     this._destroyed.complete();
   }
 
+  /**
+   * Gets the id of the label element. If no label is present, returns `null`.
+   */
+  getLabelId(): string|null {
+    return this._hasFloatingLabel() ? this._labelId : null;
+  }
+
   /**
    * Gets an ElementRef for the element that a overlay attached to the form-field
    * should be positioned relative to.

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 element.
+  readonly _labelId = `mat-form-field-label-${nextUniqueId++}`;
 
   /**
    * Whether the label should always float, never float or float as the user types.
@@ -291,6 +291,13 @@ export class MatFormField extends _MatFormFieldMixinBase
         _defaults.hideRequiredMarker : false;
   }
 
+  /**
+   * Gets the id of the label element. If no label is present, returns `null`.
+   */
+  getLabelId(): string|null {
+    return this._hasFloatingLabel() ? this._labelId : null;
+  }
+
   /**
    * Gets an ElementRef for the element that a overlay attached to the form-field should be
    * positioned relative to.

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.getLabelId();
   }
 
   /** Determines the `aria-activedescendant` to be set on the host. */

tools/public_api_guard/material/form-field.d.ts

@@ -26,12 +26,12 @@ export declare class MatFormField extends _MatFormFieldMixinBase implements Afte
     _elementRef: ElementRef;
     _errorChildren: QueryList<MatError>;
     _hintChildren: QueryList<MatHint>;
-    _hintLabelId: string;
+    readonly _hintLabelId: string;
     _inputContainerRef: ElementRef;
     get _labelChild(): MatLabel;
     _labelChildNonStatic: MatLabel;
     _labelChildStatic: MatLabel;
-    _labelId: string;
+    readonly _labelId: string;
     _placeholderChild: MatPlaceholder;
     _prefixChildren: QueryList<MatPrefix>;
     get _shouldAlwaysFloat(): boolean;
@@ -57,6 +57,7 @@ export declare class MatFormField extends _MatFormFieldMixinBase implements Afte
     _shouldLabelFloat(): boolean;
     protected _validateControlChild(): void;
     getConnectedOverlayOrigin(): ElementRef;
+    getLabelId(): string | null;
     ngAfterContentChecked(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;