如何将Aria标签应用于PrimeNG组件的子元素

Question

初始场景：

• PrimeNG 9.1.0
• 角度9.1.9

谷歌灯塔的可访问性测试注意到PrimeNG下拉组件的V形元素缺少Aria标签("按钮没有可访问的名称"(。

我在HTML文件中的用法：

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

PrimeNG相应生成的DOM部分：

<div class="ng-tns-c5-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-dropdown-clearable">
<div class="ui-helper-hidden-accessible">
<input class="ng-tns-c5-7" aria-haspopup="listbox" readonly="" role="listbox" type="text" aria-label=" " kl_vkbd_parsed="true" aria-expanded="false">
</div>
<div class="ui-dropdown-label-container">
<span class="ng-tns-c5-7 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ng-star-inserted">Select a City</span>
</div>
<div class="ui-dropdown-trigger ui-state-default ui-corner-right" aria-haspopup="listbox" role="button" aria-expanded="false">
<span class="ui-dropdown-trigger-icon ui-clickable pi pi-chevron-down">
::before
</span>
</div>
</div>

 

需要解决的挑战：

如果我自己无法访问，因此无法添加aria-label="action description"，我如何将咏叹调标签添加到PrimeNG下拉组件的V形子元素(第8行(？

 

目标场景：

通过灯塔可达性测试。

Answer 1

在我的案例中，我收到一个错误，即渲染后下拉列表中不存在输入框的可访问名称。用标签html元素包装下拉列表解决了Andi问题。

<label>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
</label>

Answer 2

这里有一个解决方案。您可以在typescript代码中添加aria标签。

例如，首先在标签列表中定义您的咏叹调标签。然后，

this.elements = document.getElementsByClassName("ui-dropdown-trigger");
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].ariaLabel = this.labels[i];
}