【问题标题】：How to apply an Aria label to a sub-element of a PrimeNG component?如何将 Aria 标签应用于 PrimeNG 组件的子元素？
【发布时间】：2020-11-20 04:30:52
【问题描述】：

初始场景：

PrimeNG 9.1.0
Angular 9.1.9

Google Lighthouse 的可访问性测试注意到 PrimeNG dropdown component 的 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>

待解决的挑战：

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

目标场景：

通过 Lighthouse 可访问性测试。

【问题讨论】：

在文档中，有一些 aria 标签参数。你试过了吗？ primefaces.org/primeng/showcase/#/dropdown 另一种选择是在发出onShow 事件之后使用打字稿操作 aria 标签
@StPaulis，我想你的意思是ariaLabelledBy 和ariaFilterLabel 这两个参数？我已经测试了它们，但不幸的是它们不会影响 chevron 子元素本身。同时，PrimeNG 在 chevron 子元素上设置值role="button"，这是触发 Lighthouse 测试的注释的原因。
@StPaulis，您认为onShow 事件方法在 Typescript 中的表现如何？
我不确定控件的工作原理，我会在下拉菜单打开时尝试操作元素。我玩了一会儿，我看到控件在打开时已经做了很多事情，我不确定这是否会是一件容易的事。您可以在 PrimeNg 中创建一张票来询问他们。

标签： angular typescript primeng wai-aria primeng-dropdowns

【解决方案1】：

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

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

【讨论】：

感谢@Brian 的建议。不幸的是，即使在实施之后，Lighthouse 错误消息仍然存在。我怀疑标签将文本隐式传递给嵌入的下拉元素，而不是 chevron 子元素，导致错误情况持续存在。