При проверке доступности с помощью Wave Tool для mat-select, использующего mat-label, выдается предупреждение о доступности метки Orphaned form

Question

Раскрывающийся список создается с помощью mat-select, а метка для раскрывающегося списка добавляется с mat-label.При проверке доступности с помощью расширения хрома Wave Evaluation Tool, появляется метка «Сиротливая форма» Предупреждение.(Метка не связана с правильным элементом формы)

Инструмент Волна: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Какое поведение ожидается?Предупреждение о появлении потерянной формы не должно отображаться

Каково текущее поведение?Предупреждающая этикетка с осиротевшей формой apeard

Какие шаги нужно воспроизвести?Синтаксис для воспроизведения проблемы

Синтаксис

Каков вариант использования или мотивация для изменения существующего поведения?Мы пытаемся исправить проблемы с доступностью в нашем проекте и полагаемся на Material Designs.

Какие версии Angular, Material, OS, TypeScript, браузеров затронуты?Угловой - 5.2.0, Материал - 5.2.3, ОС - Windows, TypeScript - 2.5.3, Браузер - Google Chrome

Что еще мы должны знать?Попробовал Добавление идентификатора в mat-select / добавление для в mat-label.Также устал использовать заполнитель. Предупреждение о волновом инструменте

Answer 1

Какой код генерируется материалом?Если я посмотрю на второй пример, «Варианты внешнего вида поля формы», на https://material.angular.io/components/form-field/overview, будет сгенерировано

<input _ngcontent-c25="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" matinput=""
  placeholder="Placeholder" id="mat-input-2" aria-describedby="mat-hint-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
  <label class="mat-form-field-label ng-tns-c21-7 mat-empty mat-form-field-empty ng-star-inserted" for="mat-input-2" aria-owns="mat-input-2">
    <mat-label _ngcontent-c25="" class="ng-star-inserted">Legacy form field</mat-label>
  </label>
</span>

Обратите внимание, что <input> имеет идентификатор «mat-input-2»и что следующий <label> имеет атрибут for, который указывает на "mat-input-2".Это правильный способ связать метку с входом.Без этой ассоциации вы, вероятно, получите сообщение с меткой-сиротой.