我有一个带有文本输入控件的 mat-form-field。我有一个 mat-label 并且还放置了一个 aria-label 属性attr.aria-label
直接在输入元素上。
Is the mat-label
屏幕阅读器本身就足够了吗?是个attr.aria-label
必要还是多余?
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Username</mat-label>
<input attr.aria-label="Username" formControlName="Username" matInput>
</mat-form-field>
同样的问题也适用于垫选择控件。
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Cars</mat-label>
<mat-select formControlName="Car">
<mat-option *ngFor="let car of cars" [value]="car.name">
{{car.name}}
</mat-option>
</mat-select>
</mat-form-field>
关于之间差异的重要说明[attr.aria-label]
and [aria-label]
:
对于按钮,您可以设置动态aria-label
像这样:
<button [attr.aria-label]="'This is a button for ' + buttonDescription">Click me</button>
这不适用于所有材料控制,因为有些定义了@Input('aria-label')
property,在内部设置属性(通过@Hostbinding)
mat-select就是这样一种控制
源代码:
@Input('aria-label')
ariaLabel: string
因此,如果您尝试使用[attr.]
语法为mat-select
它不会工作,因为控件实际上会覆盖您显式设置的属性(因为ariaLabel
输入属性到mat-select
永远不会被设置!)。
<mat-select [attr.aria-label]="'This will be overwritten with undefined!'">...</mat-select>
相反,你必须使用aria-label
输入属性。
<mat-select [aria-label]="'Choose your own adventure! ' + 123">...</mat-select>
<mat-select aria-label="{{ 'Choose your own adventure - ' + 123 }}">...</mat-select>
<mat-select aria-label="Choose your own adventure 123">...</mat-select>
构建会告诉您是否使用[aria-label]
当你应该使用[attr.aria-label]
(因为编译器会告诉你没有这样的输入属性)。因此,如果您不想寻找您正在使用的控件的 API,请从[aria-label]
.
https://material.angular.io/components/select/api
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)