Angular Material Orphaned form label on mat-select

I am running into an issue when testing for accessibility problems on an Angular 8 Material app. I am using the Chrome Plugin WAVE Evaluation Tool to check for accessibility https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh.

The problem looks to be only with a Mat Select list.

-- Error
image of Mat list with Orphaned Form Lable

WAVE tool Errors

-- Code ( this is what I started with )

 <mat-form-field>
    <mat-select>
      <mat-option *ngFor="let tag of tags" [value]="tags.value">
        {{ tag.viewValue }}
      </mat-option>
    </mat-select>
  <mat-label>Resource Tag</mat-label>
</mat-form-field>

-- Code (then after reading that it was missing the form label I changed it to this)

<mat-form-field>
  <mat-select id="tags">
    <mat-option *ngFor="let tag of tags" [value]="tags.value">
      {{ tag.viewValue }}
    </mat-option>
  </mat-select>
  <mat-label for="tags">Resource Tag</mat-label>
</mat-form-field>

Even after that change, the Orphaned Form Lable is still there.

I also removed all Material elements and just created a default select list using HTML elements that worked and did NOT have a missing form label. From this my guess its something going on in the Material elements.