fix(material/autocomplete): add missing aria-label for autocomplete panel

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

@@ -1,9 +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(formFieldId)"
     #panel>
     <ng-content></ng-content>
   </div>

src/material-experimental/mdc-autocomplete/autocomplete.spec.ts

@@ -1471,6 +1471,52 @@ describe('MDC-based MatAutocomplete', () => {
           .toEqual('listbox', 'Expected role of the panel to be listbox.');
     });
 
+    it('should point the aria-labelledby of the panel to the field label', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel =
+        fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
+      const labelId = fixture.nativeElement.querySelector('label').id;
+      expect(panel.getAttribute('aria-labelledby')).toBe(labelId);
+      expect(panel.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('should add a custom aria-labelledby to the panel', () => {
+      fixture.componentInstance.ariaLabelledby = 'myLabelId';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel =
+        fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
+      const labelId = fixture.nativeElement.querySelector('label').id;
+      expect(panel.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`);
+      expect(panel.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('should clear aria-labelledby from the panel if an aria-label is set', () => {
+      fixture.componentInstance.ariaLabel = 'My label';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel =
+        fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
+      expect(panel.getAttribute('aria-label')).toBe('My label');
+      expect(panel.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('should support setting a custom aria-label', () => {
+      fixture.componentInstance.ariaLabel = 'Custom Label';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel =
+        fixture.debugElement.query(By.css('.mat-mdc-autocomplete-panel'))!.nativeElement;
+
+      expect(panel.getAttribute('aria-label')).toEqual('Custom Label');
+      expect(panel.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
     it('should set aria-autocomplete to list', () => {
       expect(input.getAttribute('aria-autocomplete'))
           .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
@@ -2682,6 +2728,7 @@ describe('MDC-based MatAutocomplete', () => {
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
   <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width">
+    <mat-label>State</mat-label>
     <input
       matInput
       placeholder="State"
@@ -2692,7 +2739,8 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
   </mat-form-field>
 
   <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
-    [disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
+    [disableRipple]="disableRipple" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+    (opened)="openedSpy()" (closed)="closedSpy()">
     <mat-option
       *ngFor="let state of filteredStates"
       [value]="state"
@@ -2712,6 +2760,8 @@ class SimpleAutocomplete implements OnDestroy {
   width: number;
   disableRipple = false;
   autocompleteDisabled = false;
+  ariaLabel: string;
+  ariaLabelledby: string;
   panelClass = 'class-one class-two';
   openedSpy = jasmine.createSpy('autocomplete opened spy');
   closedSpy = jasmine.createSpy('autocomplete closed spy');

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;
 

src/material/autocomplete/autocomplete.html

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

src/material/autocomplete/autocomplete.spec.ts

@@ -1467,6 +1467,48 @@ describe('MatAutocomplete', () => {
           .toEqual('listbox', 'Expected role of the panel to be listbox.');
     });
 
+    it('should point the aria-labelledby of the panel to the field label', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
+      const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+      expect(panel.getAttribute('aria-labelledby')).toBe(labelId);
+      expect(panel.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('should add a custom aria-labelledby to the panel', () => {
+      fixture.componentInstance.ariaLabelledby = 'myLabelId';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
+      const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+      expect(panel.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`);
+      expect(panel.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('should clear aria-labelledby from the panel if an aria-label is set', () => {
+      fixture.componentInstance.ariaLabel = 'My label';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
+      expect(panel.getAttribute('aria-label')).toBe('My label');
+      expect(panel.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('should support setting a custom aria-label', () => {
+      fixture.componentInstance.ariaLabel = 'Custom Label';
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel'))!.nativeElement;
+
+      expect(panel.getAttribute('aria-label')).toEqual('Custom Label');
+      expect(panel.hasAttribute('aria-labelledby')).toBe(false);
+    });
+
     it('should set aria-autocomplete to list', () => {
       expect(input.getAttribute('aria-autocomplete'))
           .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
@@ -2701,7 +2743,8 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
   </mat-form-field>
 
   <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
-    [disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
+    [disableRipple]="disableRipple" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+    (opened)="openedSpy()" (closed)="closedSpy()">
     <mat-option
       *ngFor="let state of filteredStates"
       [value]="state"
@@ -2721,6 +2764,8 @@ class SimpleAutocomplete implements OnDestroy {
   width: number;
   disableRipple = false;
   autocompleteDisabled = false;
+  ariaLabel: string;
+  ariaLabelledby: string;
   panelClass = 'class-one class-two';
   openedSpy = jasmine.createSpy('autocomplete opened spy');
   closedSpy = jasmine.createSpy('autocomplete closed spy');

src/material/autocomplete/autocomplete.ts

@@ -131,6 +131,12 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
   /** @docs-private */
   abstract optionGroups: QueryList<_MatOptgroupBase>;
 
+  /** Aria label of the select. If not specified, the placeholder will be used as label. */
+  @Input('aria-label') ariaLabel: string;
+
+  /** Input that can be used to specify the `aria-labelledby` attribute. */
+  @Input('aria-labelledby') ariaLabelledby: string;
+
   /** Function that maps an option's control value to its display value in the trigger. */
   @Input() displayWith: ((value: any) => string) | null = null;
 
@@ -251,6 +257,16 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
     this.optionSelected.emit(event);
   }
 
+  /** Gets the aria-labelledby for the autocomplete panel. */
+  _getPanelAriaLabelledby(labelId: string): string | null {
+    if (this.ariaLabel) {
+      return null;
+    }
+
+    return this.ariaLabelledby ? labelId + ' ' + this.ariaLabelledby : labelId;
+  }
+
+
   /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
   private _setVisibilityClasses(classList: {[key: string]: boolean}) {
     classList[this._visibleClass] = this.showPanel;

tools/public_api_guard/material/autocomplete.d.ts

@@ -6,6 +6,8 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     _isOpen: boolean;
     _keyManager: ActiveDescendantKeyManager<_MatOptionBase>;
     protected abstract _visibleClass: string;
+    ariaLabel: string;
+    ariaLabelledby: string;
     get autoActiveFirstOption(): boolean;
     set autoActiveFirstOption(value: boolean);
     set classList(value: string | string[]);
@@ -25,14 +27,15 @@ 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(labelId: string): string | null;
     _getScrollTop(): number;
     _setScrollTop(scrollTop: number): void;
     _setVisibility(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_autoActiveFirstOption: BooleanInput;
     static ngAcceptInputType_disableRipple: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatAutocompleteBase, never, never, { "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<_MatAutocompleteBase, never, never, { "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "displayWith": "displayWith"; "autoActiveFirstOption": "autoActiveFirstOption"; "panelWidth": "panelWidth"; "classList": "class"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<_MatAutocompleteBase, never>;
 }