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,245
  • 1
  • 10
  • 27
  • 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

2 Answers2

0

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>
brian
  • 664
  • 6
  • 8
  • Thanks @Brian for your advice. Unfortunately, the Lighthouse error message persists even after its implementation. I suspect that the label is implicitly passing the text to the embedded dropdown element, but not to the chevron sub element, causing the error scenario to persist. – ThirstForKnowledge Feb 05 '22 at 15:39
0

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];
    }
Patrick Yang
  • 1