Dropdown, MultiSelect, AutoComplete, CascadeSelect: aria-label missing from inner ul element

[akashuwtw]

Describe the bug

We are trying to set aria-label for p-dropdown which is getting successfully applied to the main p-dropdown component, but is missing from it's inner ul element.

We are following the steps as per documented here.

Environment

OS: Windows 10

Reproducer

No response

Angular version

16.2.7

PrimeNG version

16.5.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Chrome 121.0.6167.161, Edge 121.0.2277.112

Steps to reproduce the behavior

<p-dropdown data-test="type" [options]="typeOptions" formControlName="type" placeholder="Select type"></p-dropdown>
<p-dropdown data-test="type" [options]="typeOptions" formControlName="type" ariaLabel="Select type"></p-dropdown>
<p-dropdown data-test="type" [options]="typeOptions" formControlName="type" aria-label="Select type"></p-dropdown>

Expected behavior

aria-label should be applied to inner ul element

[cetincakiroglu]

Hi,

ariaLabel and ariaLabelledBy are given to focusable input elements. The test we performed using Axe DevTools shows that there is no issue as you mentioned.

correct use:

<span id="dd1">Options</span>
<p-dropdown ariaLabel="myAriaLabel"/>

This is a DOM node from the basic example in primeng.org. As you see here list item has aria-label and it's generated by option label. The ariaLabel prop you set in the dropdown is for the focusable element that replaces the  in the dropdown, not for the list items.

<li role="option" 
     pripple="" 
     class="p-ripple p-element p-dropdown-item p-focus" 
     id="pn_id_7_0"  
     aria-label="New York" 
     aria-setsize="5" 
     aria-posinset="1" 
     aria-selected="false" 
     data-p-focused="true" 
     data-p-highlight="false" 
     data-p-disabled="false">
.....
</li>

[akashuwtw]

Hi,

We are performing cypress axe tests to check for any a11y violations, and cypress has reported this violation for ul element under p-dropdown

<ul role="listbox" class="p-dropdown-items ng-star-inserted" id="pn_id_5_list">
https://dequeuniversity.com/rules/axe/4.8/aria-input-field-name?application=axeAPI

Since, the ul element has listbox role, it become an input field and hence should have an aria-label.

The li elements under ul element have aria-label applied. No issues there.

Regards,
Akash

[cetincakiroglu]

Hi,

Thanks for the clarification. In this case, do you need a default assigned aria-label value or do you want to send the aria-label via an input?

[akashuwtw]

Hi,

The default aria-label would be fine for us.

Regards,
Akash

[cetincakiroglu]

Hi,

Thanks a lot for the feedback, we'll add an aria label to the element.