fix(material/autocomplete): pass in form field id in ng-template

Author: annieyw

src/material-experimental/mdc-autocomplete/autocomplete.html

@@ -1,11 +1,11 @@
-<ng-template>
+<ng-template let-formFieldId="id">
   <div
     class="mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open"
     role="listbox"
     [id]="id"
     [ngClass]="_classList"
     [attr.aria-label]="ariaLabel || null"
-    [attr.aria-labelledby]="_getPanelAriaLabelledby()"
+    [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"
     #panel>
     <ng-content></ng-content>
   </div>

src/material/autocomplete/autocomplete-trigger.ts

@@ -591,7 +591,9 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
     let overlayRef = this._overlayRef;
 
     if (!overlayRef) {
-      this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef);
+      this._portal = new TemplatePortal(this.autocomplete.template,
+        this._viewContainerRef,
+        {id: this._formField?._labelId});
       overlayRef = this._overlay.create(this._getOverlayConfig());
       this._overlayRef = overlayRef;
 
@@ -632,7 +634,6 @@ export abstract class _MatAutocompleteTriggerBase implements ControlValueAccesso
 
     this.autocomplete._setVisibility();
     this.autocomplete._isOpen = this._overlayAttached = true;
-    this.autocomplete._formFieldLabelId = this._formField?._labelId;
 
     // We need to do an extra `panelOpen` check in here, because the
     // autocomplete won't be shown if there are no options.

src/material/autocomplete/autocomplete.html

@@ -1,8 +1,9 @@
-<ng-template>
+<ng-template let-formFieldId="id">
   <div class="mat-autocomplete-panel"
-       role="listbox" [id]="id"
+       role="listbox"
+       [id]="id"
        [attr.aria-label]="ariaLabel || null"
-       [attr.aria-labelledby]="_getPanelAriaLabelledby()"
+       [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"
        [ngClass]="_classList"
        #panel>
     <ng-content></ng-content>

src/material/autocomplete/autocomplete.ts

@@ -115,9 +115,6 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
   get isOpen(): boolean { return this._isOpen && this.showPanel; }
   _isOpen: boolean = false;
 
-  /** Label id of form field the autocomplete is associated with. */
-  _formFieldLabelId: string;
-
   // The @ViewChild query for TemplateRef here needs to be static because some code paths
   // lead to the overlay being created before change detection has finished for this component.
   // Notably, another component may trigger `focus` on the autocomplete-trigger.
@@ -261,12 +258,11 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
   }
 
   /** Gets the aria-labelledby for the autocomplete panel. */
-  _getPanelAriaLabelledby(): string | null {
+  _getPanelAriaLabelledby(labelId: string): string | null {
     if (this.ariaLabel) {
       return null;
     }
 
-    const labelId = this._formFieldLabelId ?? '';
     return this.ariaLabelledby ? labelId + ' ' + this.ariaLabelledby : labelId;
   }
 

tools/public_api_guard/material/autocomplete.d.ts

@@ -2,7 +2,6 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     _classList: {
         [key: string]: boolean;
     };
-    _formFieldLabelId: string;
     protected abstract _hiddenClass: string;
     _isOpen: boolean;
     _keyManager: ActiveDescendantKeyManager<_MatOptionBase>;
@@ -28,7 +27,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     template: TemplateRef<any>;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, defaults: MatAutocompleteDefaultOptions, platform?: Platform);
     _emitSelectEvent(option: _MatOptionBase): void;
-    _getPanelAriaLabelledby(): string | null;
+    _getPanelAriaLabelledby(labelId: string): string | null;
     _getScrollTop(): number;
     _setScrollTop(scrollTop: number): void;
     _setVisibility(): void;