Question

使用mat-select创建下拉列表，并使用mat-label添加下拉列表标签。在使用Wave Evaluation Tool chrome扩展程序检查辅助功能时，获取孤立表单标签警告。（标签与正确的表单元素无关）

Wave工具：https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

预期的行为是什么？不应出现孤立形式标签警告

目前的行为是什么？孤立形式标签警告apeard

重现的步骤是什么？重现问题的语法

改变现有行为的用例或动机是什么？我们正在尝试修复项目中的可访问性问题，并且我们依赖于Material Designs。

哪些版本的Angular，Material，OS，TypeScript，浏览器会受到影响？ Angular - 5.2.0，Material - 5.2.3，OS-Windows，TypeScript - 2.5.3，浏览器 - 谷歌浏览器

还有什么我们应该知道的吗？尝试在mat-label中的mat-select / adding中添加id。也使用占位符累了。 Wave Tool Warning

Answer 1

材料生成什么代码？如果我查看第二个示例＆＃34;表单字段外观变体＆＃34;，在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>的ID为＆＃34; mat-input-2＆＃34;并且以下<label>具有for属性，该属性指向＆＃34; mat-input-2＆＃34;。这是将标签与输入相关联的正确方法。如果没有这种关联，您可能会收到孤立的标签消息。

使用Wave Tool检查辅助功能以使用mat-label进行mat-select时，获取Orphaned表单标签辅助功能警告

1 个答案: