3

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.

Lawson
  • 31
  • 1
  • Orphaned form label is when you have a ` – GrahamTheDev May 20 '20 at 20:07
  • i dont think wave likes when a label is used for a mat-select. i don't know the solution to the problem other than not using mat-select or other material inputs – Salim Proctor Feb 18 '22 at 18:28

0 Answers0