How to apply an Aria label to a sub-element of a PrimeNG component?

user_10287036 0
Viewed 2333

Initial scenario:

  • PrimeNG 9.1.0
  • Angular 9.1.9

The accessibility test of Google's Lighthouse notes the missing Aria label for the chevron element of the PrimeNG dropdown component ("Buttons do not have an accessible name").

My usage in the HTML file:

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

DOM section generated by PrimeNG accordingly:

<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>

 

Challenge to be solved:

How can I add an aria label to the chevron sub-element (line 8) of the PrimeNG dropdown component if I don't have access to it myself and therefore cannot add an aria-label="action description"?

 

Target scenario:

Pass the Lighthouse accessibility test.

primeng-dropdowns primeng angular typescript wai-aria
2 Answers

In my case, I was getting an error that no accessible name for the input box exists inside of the drop-down list after rendering. Wrapping the drop-down list with a label html element solved the Andi issue.

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

Here is a work around. You can add aria label in typescript code.

For example, first define your aria label in labels list. Then,

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