2

初始场景：

  • PrimeNG 9.1.0
  • 角 9.1.9

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

 

待解决的挑战：

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

 

目标场景：

通过 Lighthouse 可访问性测试。

4

1 回答 1

0

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

<label>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
</label>
于 2021-10-07T17:07:27.613 回答