bug(SELECT): Aria-labelledby got empty space when no mat-label is defined and shows accessibility error in WAVE

[talamaska]

Reproduction

Use StackBlitz to reproduce your issue:

• Components: https://stackblitz.com/edit/components-issue-3tmqu4?file=src/app/example-component.ts

Steps to reproduce:

1. inspect the mat-select
2. see the aria-labelledby
3. check source code
   in select

  /** Gets the aria-labelledby for the select panel. */
  _getPanelAriaLabelledby(): string | null {
    if (this.ariaLabel) {
      return null;
    }

    const labelId = this._getLabelId();
    return this.ariaLabelledby ? labelId + ' ' + this.ariaLabelledby : labelId;
  }

and in form-field

  /**
   * Gets the id of the label element. If no label is present, returns `null`.
   */
  getLabelId(): string|null {
    return this._hasFloatingLabel() ? this._labelId : null;
  }

labelIed can be null so we end up with null + ' ' + ariaLabelledby or null
The only way to overcome this behavior is to provide our own aria-label
But that's more like a workaround.

Expected Behavior

No empty space before the concatenated parts of the string.
I think there should be null check before adding space infornt of the other string.

Actual Behavior

There is an empty space before the value of the attribute.

This breaks the accessibility tested with WAVE addon

Environment

• Angular: 10.x
• CDK/Material: 10.2.7
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

Verfied that the same ource code logic exist in v11 so it must be valid for v11 aswell

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}