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.