From d9214df03486e152cd209de8bc93d01a08aeef89 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 20 Aug 2020 21:14:08 +0200
Subject: [PATCH] fix(select): use combobox pattern for accessibility

Applies some of our recent learnings on how to handle the accessibility of a custom select to `mat-select`. Includes switching the trigger to be a `combobox` and the panel to a `listbox`.

Fixes #11083.
---
 src/material/select/select.html               |  10 +-
 src/material/select/select.spec.ts            | 217 ++++++++++--------
 src/material/select/select.ts                 |  90 +++++---
 src/material/select/testing/select-harness.ts |   3 +-
 tools/public_api_guard/material/select.d.ts   |   5 +-
 5 files changed, 188 insertions(+), 137 deletions(-)

diff --git a/src/material/select/select.html b/src/material/select/select.html
index 2b2ab384862a..785edff07848 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -1,10 +1,9 @@
 <div cdk-overlay-origin
      class="mat-select-trigger"
-     aria-hidden="true"
      (click)="toggle()"
      #origin="cdkOverlayOrigin"
      #trigger>
-  <div class="mat-select-value" [ngSwitch]="empty">
+  <div class="mat-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
     <span class="mat-select-placeholder" *ngSwitchCase="true">{{placeholder || '\u00A0'}}</span>
     <span class="mat-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
       <span *ngSwitchDefault>{{triggerValue || '\u00A0'}}</span>
@@ -32,8 +31,13 @@
   <div class="mat-select-panel-wrap" [@transformPanelWrap]>
     <div
       #panel
-      [attr.id]="id + '-panel'"
+      role="listbox"
+      tabindex="-1"
       class="mat-select-panel {{ _getPanelTheme() }}"
+      [attr.id]="id + '-panel'"
+      [attr.aria-multiselectable]="multiple"
+      [attr.aria-label]="ariaLabel || null"
+      [attr.aria-labelledby]="_getPanelAriaLabelledby()"
       [ngClass]="panelClass"
       [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
       (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index b56f61ef575e..0cab44193d4e 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -145,12 +145,32 @@ describe('MatSelect', () => {
           select = fixture.debugElement.query(By.css('mat-select'))!.nativeElement;
         }));
 
-        it('should set the role of the select to listbox', fakeAsync(() => {
-          expect(select.getAttribute('role')).toEqual('listbox');
+        it('should set the role of the select to combobox', fakeAsync(() => {
+          expect(select.getAttribute('role')).toEqual('combobox');
+          expect(select.getAttribute('aria-autocomplete')).toBe('none');
+          expect(select.getAttribute('aria-haspopup')).toBe('true');
         }));
 
-        it('should set the aria label of the select to the placeholder', fakeAsync(() => {
-          expect(select.getAttribute('aria-label')).toEqual('Food');
+        it('should point the aria-controls attribute to the listbox', fakeAsync(() => {
+          expect(select.hasAttribute('aria-controls')).toBe(false);
+
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const ariaControls = select.getAttribute('aria-controls');
+          expect(ariaControls).toBeTruthy();
+          expect(ariaControls).toBe(document.querySelector('.mat-select-panel')!.id);
+        }));
+
+        it('should set aria-expanded based on the select open state', fakeAsync(() => {
+          expect(select.getAttribute('aria-expanded')).toBe('false');
+
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          expect(select.getAttribute('aria-expanded')).toBe('true');
         }));
 
         it('should support setting a custom aria-label', fakeAsync(() => {
@@ -158,19 +178,25 @@ describe('MatSelect', () => {
           fixture.detectChanges();
 
           expect(select.getAttribute('aria-label')).toEqual('Custom Label');
+          expect(select.hasAttribute('aria-labelledby')).toBeFalsy();
         }));
 
-        it('should not set an aria-label if aria-labelledby is specified', fakeAsync(() => {
+        it('should be able to add an extra aria-labelledby on top of the default', fakeAsync(() => {
           fixture.componentInstance.ariaLabelledby = 'myLabelId';
           fixture.detectChanges();
 
-          expect(select.getAttribute('aria-label')).toBeFalsy('Expected no aria-label to be set.');
-          expect(select.getAttribute('aria-labelledby')).toBe('myLabelId');
+          const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+          const valueId = fixture.nativeElement.querySelector('.mat-select-value').id;
+
+          expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId} myLabelId`);
         }));
 
-        it('should not have aria-labelledby in the DOM if it`s not specified', fakeAsync(() => {
+        it('should set aria-labelledby to the value and label IDs', fakeAsync(() => {
           fixture.detectChanges();
-          expect(select.hasAttribute('aria-labelledby')).toBeFalsy();
+
+          const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+          const valueId = fixture.nativeElement.querySelector('.mat-select-value').id;
+          expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId}`);
         }));
 
         it('should set the tabindex of the select to 0 by default', fakeAsync(() => {
@@ -237,37 +263,15 @@ describe('MatSelect', () => {
           expect(select.getAttribute('tabindex')).toEqual('0');
         }));
 
-        it('should set `aria-labelledby` to form field label if there is no placeholder', () => {
-          fixture.destroy();
-
-          const labelFixture = TestBed.createComponent(SelectWithFormFieldLabel);
-          labelFixture.detectChanges();
-          select = labelFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
-
-          expect(select.getAttribute('aria-labelledby')).toBeTruthy();
-          expect(select.getAttribute('aria-labelledby'))
-              .toBe(labelFixture.nativeElement.querySelector('label').getAttribute('id'));
-        });
-
-        it('should not set `aria-labelledby` if there is a placeholder', () => {
-          fixture.destroy();
-
-          const labelFixture = TestBed.createComponent(SelectWithFormFieldLabel);
-          labelFixture.componentInstance.placeholder = 'Thing selector';
-          labelFixture.detectChanges();
-          select = labelFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
-
-          expect(select.getAttribute('aria-labelledby')).toBeFalsy();
-        });
-
-        it('should not set `aria-labelledby` if there is no form field label', () => {
+        it('should set `aria-labelledby` to the value ID if there is no form field', () => {
           fixture.destroy();
 
           const labelFixture = TestBed.createComponent(SelectWithChangeEvent);
           labelFixture.detectChanges();
           select = labelFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
+          const valueId = labelFixture.nativeElement.querySelector('.mat-select-value').id;
 
-          expect(select.getAttribute('aria-labelledby')).toBeFalsy();
+          expect(select.getAttribute('aria-labelledby')?.trim()).toBe(valueId);
         });
 
         it('should select options via the UP/DOWN arrow keys on a closed select', fakeAsync(() => {
@@ -812,28 +816,28 @@ describe('MatSelect', () => {
           expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
         }));
 
-        // Having `aria-hidden` on the trigger avoids issues where
-        // screen readers read out the wrong amount of options.
-        it('should set aria-hidden on the trigger element', fakeAsync(() => {
-          const trigger = fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
-
-          expect(trigger.getAttribute('aria-hidden'))
-              .toBe('true', 'Expected aria-hidden to be true when the select is open.');
-        }));
-
-        it('should set `aria-multiselectable` to true on multi-select instances', fakeAsync(() => {
-          fixture.destroy();
-
-          const multiFixture = TestBed.createComponent(MultiSelect);
+        it('should set `aria-multiselectable` to true on the listbox inside multi select',
+          fakeAsync(() => {
+            fixture.destroy();
 
-          multiFixture.detectChanges();
-          select = multiFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
+            const multiFixture = TestBed.createComponent(MultiSelect);
+            multiFixture.detectChanges();
+            select = multiFixture.debugElement.query(By.css('mat-select'))!.nativeElement;
+            multiFixture.componentInstance.select.open();
+            multiFixture.detectChanges();
+            flush();
 
-          expect(select.getAttribute('aria-multiselectable')).toBe('true');
-        }));
+            const panel = document.querySelector('.mat-select-panel')!;
+            expect(panel.getAttribute('aria-multiselectable')).toBe('true');
+          }));
 
         it('should set aria-multiselectable false on single-selection instances', fakeAsync(() => {
-          expect(select.getAttribute('aria-multiselectable')).toBe('false');
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('aria-multiselectable')).toBe('false');
         }));
 
         it('should set aria-activedescendant only while the panel is open', fakeAsync(() => {
@@ -929,6 +933,47 @@ describe('MatSelect', () => {
             expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
           }));
 
+        it('should set a role of listbox on the select panel', fakeAsync(() => {
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('role')).toBe('listbox');
+        }));
+
+        it('should point the aria-labelledby of the panel to the field label', fakeAsync(() => {
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('aria-labelledby')).toBe(labelId);
+        }));
+
+        it('should add a custom aria-labelledby to the panel', fakeAsync(() => {
+          fixture.componentInstance.ariaLabelledby = 'myLabelId';
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const labelId = fixture.nativeElement.querySelector('.mat-form-field-label').id;
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`);
+        }));
+
+        it('should clear aria-labelledby from the panel if an aria-label is set', fakeAsync(() => {
+          fixture.componentInstance.ariaLabel = 'My label';
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('aria-label')).toBe('My label');
+          expect(panel.hasAttribute('aria-labelledby')).toBe(false);
+        }));
+
       });
 
       describe('for options', () => {
@@ -2223,49 +2268,7 @@ describe('MatSelect', () => {
         options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       }));
 
-      it('should set aria-owns properly', fakeAsync(() => {
-        const selects = fixture.debugElement.queryAll(By.css('mat-select'));
-
-        expect(selects[0].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
-        expect(selects[0].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
-
-        const backdrop =
-            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        backdrop.click();
-        fixture.detectChanges();
-        flush();
-
-        triggers[1].nativeElement.click();
-        fixture.detectChanges();
-        flush();
-
-        options =
-            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-        expect(selects[1].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
-        expect(selects[1].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
-      }));
-
-      it('should remove aria-owns when the options are not visible', fakeAsync(() => {
-        const select = fixture.debugElement.query(By.css('mat-select'))!;
-
-        expect(select.nativeElement.hasAttribute('aria-owns'))
-            .toBe(true, 'Expected select to have aria-owns while open.');
-
-        const backdrop =
-            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        backdrop.click();
-        fixture.detectChanges();
-        flush();
-
-        expect(select.nativeElement.hasAttribute('aria-owns'))
-            .toBe(false, 'Expected select not to have aria-owns when closed.');
-      }));
-
-      it('should set the option id properly', fakeAsync(() => {
+      it('should set the option id', fakeAsync(() => {
         let firstOptionID = options[0].id;
 
         expect(options[0].id)
@@ -4590,6 +4593,13 @@ describe('MatSelect', () => {
     expect(select.disableOptionCentering).toBe(true);
     expect(select.typeaheadDebounceInterval).toBe(1337);
   });
+
+  it('should not not throw if the select is inside an ng-container with ngIf', fakeAsync(() => {
+    configureMatSelectTestingModule([SelectInNgContainer]);
+    const fixture = TestBed.createComponent(SelectInNgContainer);
+    expect(() => fixture.detectChanges()).not.toThrow();
+  }));
+
 });
 
 
@@ -5430,3 +5440,20 @@ class SelectWithResetOptionAndFormControl {
   @ViewChildren(MatOption) options: QueryList<MatOption>;
   control = new FormControl();
 }
+
+
+@Component({
+  selector: 'select-with-placeholder-in-ngcontainer-with-ngIf',
+  template: `
+    <mat-form-field>
+      <ng-container *ngIf="true">
+        <mat-select placeholder="Product Area">
+          <mat-option value="a">A</mat-option>
+          <mat-option value="b">B</mat-option>
+          <mat-option value="c">C</mat-option>
+        </mat-select>
+      </ng-container>
+    </mat-form-field>
+  `
+})
+class SelectInNgContainer {}
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index 9aed26c3529d..2b585df921ce 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -215,7 +215,6 @@ export const MAT_SELECT_TRIGGER = new InjectionToken<MatSelectTrigger>('MatSelec
 })
 export class MatSelectTrigger {}
 
-
 @Component({
   selector: 'mat-select',
   exportAs: 'matSelect',
@@ -225,23 +224,29 @@ export class MatSelectTrigger {}
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    'role': 'listbox',
+    'role': 'combobox',
+    'aria-autocomplete': 'none',
+    // TODO(crisbeto): the value for aria-haspopup should be `listbox`, but currently it's difficult
+    // to sync into g3, because of an outdated automated a11y check which flags it as an invalid
+    // value. At some point we should try to switch it back to being `listbox`. When doing the
+    // MDC-based `mat-select`, we can get away with starting it off as `listbox`.
+    'aria-haspopup': 'true',
+    'class': 'mat-select',
     '[attr.id]': 'id',
     '[attr.tabindex]': 'tabIndex',
-    '[attr.aria-label]': '_getAriaLabel()',
-    '[attr.aria-labelledby]': '_getAriaLabelledby()',
+    '[attr.aria-controls]': 'panelOpen ? id + "-panel" : null',
+    '[attr.aria-expanded]': 'panelOpen',
+    '[attr.aria-label]': 'ariaLabel || null',
     '[attr.aria-required]': 'required.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-invalid]': 'errorState',
-    '[attr.aria-owns]': 'panelOpen ? _optionIds : null',
-    '[attr.aria-multiselectable]': 'multiple',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
     '[class.mat-select-disabled]': 'disabled',
     '[class.mat-select-invalid]': 'errorState',
     '[class.mat-select-required]': 'required',
     '[class.mat-select-empty]': 'empty',
-    'class': 'mat-select',
+    '[class.mat-select-multiple]': 'multiple',
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_onFocus()',
     '(blur)': '_onBlur()',
@@ -281,6 +286,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** Unique id for this input. */
   private _uid = `mat-select-${nextUniqueId++}`;
 
+  /** Current `ariar-labelledby` value for the select trigger. */
+  private _triggerAriaLabelledBy: string | null = null;
+
   /** Emits whenever the component is destroyed. */
   private readonly _destroy = new Subject<void>();
 
@@ -305,8 +313,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** `View -> model callback called when select has been touched` */
   _onTouched = () => {};
 
-  /** The IDs of child options to be passed to the aria-owns attribute. */
-  _optionIds: string = '';
+  _valueId = `mat-select-value-${nextUniqueId++}`;
 
   /** The value of the select panel's transform-origin property. */
   _transformOrigin: string = 'top';
@@ -607,6 +614,21 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   }
 
   ngDoCheck() {
+    const newAriaLabelledby = this._getTriggerAriaLabelledby();
+
+    // We have to manage setting the `aria-labelledby` ourselves, because part of its value
+    // is computed as a result of a content query which can cause this binding to trigger a
+    // "changed after checked" error.
+    if (newAriaLabelledby !== this._triggerAriaLabelledBy) {
+      const element: HTMLElement = this._elementRef.nativeElement;
+      this._triggerAriaLabelledBy = newAriaLabelledby;
+      if (newAriaLabelledby) {
+        element.setAttribute('aria-labelledby', newAriaLabelledby);
+      } else {
+        element.removeAttribute('aria-labelledby');
+      }
+    }
+
     if (this.ngControl) {
       this.updateErrorState();
     }
@@ -992,8 +1014,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
         this._changeDetectorRef.markForCheck();
         this.stateChanges.next();
       });
-
-    this._setOptionIds();
   }
 
   /** Invoked when an option is clicked. */
@@ -1067,11 +1087,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     this._changeDetectorRef.markForCheck();
   }
 
-  /** Records option IDs to pass to the aria-owns property. */
-  private _setOptionIds() {
-    this._optionIds = this.options.map(option => option.id).join(' ');
-  }
-
   /**
    * Highlights the selected item. If no option is selected, it will highlight
    * the first item instead.
@@ -1164,27 +1179,14 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return Math.min(Math.max(0, optimalScrollPosition), maxScroll);
   }
 
-  /** Returns the aria-label of the select component. */
-  _getAriaLabel(): string | null {
-    // If an ariaLabelledby value has been set by the consumer, the select should not overwrite the
-    // `aria-labelledby` value by setting the ariaLabel to the placeholder.
-    return this.ariaLabelledby ? null : this.ariaLabel || this.placeholder;
-  }
-
-  /** Returns the aria-labelledby of the select component. */
-  _getAriaLabelledby(): string | null {
-    if (this.ariaLabelledby) {
-      return this.ariaLabelledby;
-    }
-
-    // Note: we use `_getAriaLabel` here, because we want to check whether there's a
-    // computed label. `this.ariaLabel` is only the user-specified label.
-    if (!this._parentFormField || !this._parentFormField._hasFloatingLabel() ||
-      this._getAriaLabel()) {
+  /** Gets the aria-labelledby for the select panel. */
+  _getPanelAriaLabelledby(): string | null {
+    if (this.ariaLabel) {
       return null;
     }
 
-    return this._parentFormField.getLabelId();
+    const labelId = this._getLabelId();
+    return this.ariaLabelledby ? labelId + ' ' + this.ariaLabelledby : labelId;
   }
 
   /** Determines the `aria-activedescendant` to be set on the host. */
@@ -1196,6 +1198,11 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return null;
   }
 
+  /** Gets the ID of the element that is labelling the select. */
+  private _getLabelId(): string {
+    return this._parentFormField?.getLabelId() || '';
+  }
+
   /**
    * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
    * This must be adjusted to align the selected option text over the trigger text when
@@ -1379,6 +1386,21 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return this._triggerFontSize * SELECT_ITEM_HEIGHT_EM;
   }
 
+  /** Gets the aria-labelledby of the select component trigger. */
+  private _getTriggerAriaLabelledby(): string | null {
+    if (this.ariaLabel) {
+      return null;
+    }
+
+    let value = this._getLabelId() + ' ' + this._valueId;
+
+    if (this.ariaLabelledby) {
+      value += ' ' + this.ariaLabelledby;
+    }
+
+    return value;
+  }
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private
diff --git a/src/material/select/testing/select-harness.ts b/src/material/select/testing/select-harness.ts
index 996d483ca4c5..44a7d32864f9 100644
--- a/src/material/select/testing/select-harness.ts
+++ b/src/material/select/testing/select-harness.ts
@@ -58,8 +58,7 @@ export class MatSelectHarness extends MatFormFieldControlHarness {
 
   /** Gets a boolean promise indicating if the select is in multi-selection mode. */
   async isMultiple(): Promise<boolean> {
-    const ariaMultiselectable = (await this.host()).getAttribute('aria-multiselectable');
-    return (await ariaMultiselectable) === 'true';
+    return (await this.host()).hasClass('mat-select-multiple');
   }
 
   /** Gets a promise for the select's value text. */
diff --git a/tools/public_api_guard/material/select.d.ts b/tools/public_api_guard/material/select.d.ts
index 87a02f4c9fc8..c8fa0f812e25 100644
--- a/tools/public_api_guard/material/select.d.ts
+++ b/tools/public_api_guard/material/select.d.ts
@@ -20,7 +20,6 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     _onChange: (value: any) => void;
     _onTouched: () => void;
     readonly _openedStream: Observable<void>;
-    _optionIds: string;
     _panelDoneAnimatingStream: Subject<string>;
     _positions: ConnectedPosition[];
     _scrollStrategy: ScrollStrategy;
@@ -28,6 +27,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     _transformOrigin: string;
     _triggerFontSize: number;
     _triggerRect: ClientRect;
+    _valueId: string;
     ariaLabel: string;
     ariaLabelledby: string;
     get compareWith(): (o1: any, o2: any) => boolean;
@@ -72,8 +72,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer, defaults?: MatSelectConfig);
     _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
     _getAriaActiveDescendant(): string | null;
-    _getAriaLabel(): string | null;
-    _getAriaLabelledby(): string | null;
+    _getPanelAriaLabelledby(): string | null;
     _getPanelTheme(): string;
     _handleKeydown(event: KeyboardEvent): void;
     _isRtl(): boolean;