fix(material/select): trim aria-labelledby (#22251)

If the form field doesn't have a label, we can end up with an `aria-labelledby` which has a leading
space. This appears to be flagged as invalid by some a11y tools.

Fixes #22192.

(cherry picked from commit 9b67d67)

Author: crisbeto

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

@@ -212,6 +212,17 @@ describe('MDC-based MatSelect', () => {
           expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId}`);
         }));
 
+        it('should trim the trigger aria-labelledby when there is no label', fakeAsync(() => {
+          fixture.componentInstance.hasLabel = false;
+          fixture.detectChanges();
+          flush();
+          fixture.detectChanges();
+
+          // Note that we assert that there are no spaces around the value.
+          const valueId = fixture.nativeElement.querySelector('.mat-mdc-select-value').id;
+          expect(select.getAttribute('aria-labelledby')).toBe(`${valueId}`);
+        }));
+
         it('should set the tabindex of the select to 0 by default', fakeAsync(() => {
           expect(select.getAttribute('tabindex')).toEqual('0');
         }));
@@ -976,6 +987,18 @@ describe('MDC-based MatSelect', () => {
           expect(panel.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`);
         }));
 
+        it('should trim the custom panel aria-labelledby when there is no label', fakeAsync(() => {
+          fixture.componentInstance.hasLabel = false;
+          fixture.componentInstance.ariaLabelledby = 'myLabelId';
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          // Note that we assert that there are no spaces around the value.
+          const panel = document.querySelector('.mat-mdc-select-panel')!;
+          expect(panel.getAttribute('aria-labelledby')).toBe(`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();
@@ -3834,7 +3857,7 @@ describe('MDC-based MatSelect', () => {
   template: `
     <div [style.height.px]="heightAbove"></div>
     <mat-form-field>
-      <mat-label>Select a food</mat-label>
+      <mat-label *ngIf="hasLabel">Select a food</mat-label>
       <mat-select placeholder="Food" [formControl]="control" [required]="isRequired"
         [tabIndex]="tabIndexOverride" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
         [panelClass]="panelClass" [disableRipple]="disableRipple"
@@ -3862,6 +3885,7 @@ class BasicSelect {
   isRequired: boolean;
   heightAbove = 0;
   heightBelow = 0;
+  hasLabel = true;
   tabIndexOverride: number;
   ariaLabel: string;
   ariaLabelledby: string;

src/material/select/select.spec.ts

@@ -215,6 +215,16 @@ describe('MatSelect', () => {
           expect(select.getAttribute('aria-labelledby')).toBe(`${labelId} ${valueId}`);
         }));
 
+        it('should trim the trigger aria-labelledby when there is no label', fakeAsync(() => {
+          // Reset the `placeholder` which also controls the label of the form field.
+          fixture.componentInstance.select.placeholder = '';
+          fixture.detectChanges();
+
+          // Note that we assert that there are no spaces around the value.
+          const valueId = fixture.nativeElement.querySelector('.mat-select-value').id;
+          expect(select.getAttribute('aria-labelledby')).toBe(`${valueId}`);
+        }));
+
         it('should set the tabindex of the select to 0 by default', fakeAsync(() => {
           expect(select.getAttribute('tabindex')).toEqual('0');
         }));
@@ -979,6 +989,19 @@ describe('MatSelect', () => {
           expect(panel.getAttribute('aria-labelledby')).toBe(`${labelId} myLabelId`);
         }));
 
+        it('should trim the custom panel aria-labelledby when there is no label', fakeAsync(() => {
+          // Reset the `placeholder` which also controls the label of the form field.
+          fixture.componentInstance.select.placeholder = '';
+          fixture.componentInstance.ariaLabelledby = 'myLabelId';
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          // Note that we assert that there are no spaces around the value.
+          const panel = document.querySelector('.mat-select-panel')!;
+          expect(panel.getAttribute('aria-labelledby')).toBe(`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();

src/material/select/select.ts

@@ -1030,8 +1030,9 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
       return null;
     }
 
-    const labelId = this._getLabelId();
-    return this.ariaLabelledby ? labelId + ' ' + this.ariaLabelledby : labelId;
+    const labelId = this._parentFormField?.getLabelId();
+    const labelExpression = (labelId ? labelId + ' ' : '');
+    return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;
   }
 
   /** Determines the `aria-activedescendant` to be set on the host. */
@@ -1043,18 +1044,14 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
     return null;
   }
 
-  /** Gets the ID of the element that is labelling the select. */
-  private _getLabelId(): string {
-    return this._parentFormField?.getLabelId() || '';
-  }
-
   /** Gets the aria-labelledby of the select component trigger. */
   private _getTriggerAriaLabelledby(): string | null {
     if (this.ariaLabel) {
       return null;
     }
 
-    let value = this._getLabelId() + ' ' + this._valueId;
+    const labelId = this._parentFormField?.getLabelId();
+    let value = (labelId ? labelId + ' ' : '') + this._valueId;
 
     if (this.ariaLabelledby) {
       value += ' ' + this.ariaLabelledby;