2

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.

ThirstForKnowledge
  • 1,035
  • 1
  • 5
  • 21
  • in the documentation, there are some aria label parameters. Have you tried them? https://www.primefaces.org/primeng/showcase/#/dropdown The other choice will be to manipulate the aria labels with typescript, after the `onShow` event emitted – StPaulis Jul 30 '20 at 12:30
  • @StPaulis, I suppose you mean the two parameters `ariaLabelledBy` and `ariaFilterLabel`? I have tested both of them, but unfortunately they do not affect the chevron subelement itself. At the same time, PrimeNG sets the value `role="button"` on the chevron sub-element, which is what triggers the annotations of the Lighthouse test. – ThirstForKnowledge Jul 30 '20 at 13:05
  • @StPaulis, How do you think the `onShow` event approach could look like in Typescript? – ThirstForKnowledge Jul 30 '20 at 13:06
  • I am not sure, how exactly the control works, I would try to manipulate the elements when the drop down is open. I played a little while and I saw that the control is already doing a lot of stuff while opening, I am not sure If it will be an easy task. You can create a ticket in PrimeNg to ask them. – StPaulis Jul 30 '20 at 13:55

0 Answers0