Component: p-dropdown lost accessibility behavior

[PauloKoglin]

Describe the bug

Our Team is currently migrating the PrimeNG-Version in our project from 15.4.1 to 17.3.1.

Almost all our tests, which validate components that use the p-dropdown, started to fail, because the labels associated with the dropdown-components lost their accesible behavior.

After taking a look at the current p-dropdown code, I noticed that it was recently changed from an <input> element to a <span> (See images bellow). The problem is that <span> is not a form-control and therefore can't be associated with a <label>.

Version 15.4.1:

Version 17.3.1:

The angular-testing-library, which we use to build our tests, relies on accessibility standards, so, for example, when we try to query a p-dropdown by its <label>, the library doesn't find the element, cause it's semantically wrong.

Did anyone experienced this issue too? Was this change intentional?

Environment

"@angular/animations": "17.0.8", "@angular/common": "17.0.8", "@angular/compiler": "17.0.8", "@angular/core": "17.0.8", "@angular/forms": "17.0.8", "@angular/platform-browser": "17.0.8", "@angular/platform-browser-dynamic": "17.0.8", "@angular/router": "17.0.8", "@swc/helpers": "~0.5.2", "primeflex": "^3.3.1", "primeicons": "^6.0.1", "primeng": "17.3.1", "rxjs": "7.8.1", "tslib": "^2.3.0", "zone.js": "0.14.2"

Reproducer

https://stackblitz.com/edit/wcqer4

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

In the Stackblitz example: Click on the label "Label for cities".

Expected behavior

After clicked on the label, the dropdown should be focused.

[mertsincan]

Hi,

We'll check it again and discuss it with our team. Thanks a lot for your report! I added a milestone. We'll check it before the milestone is released.

[cetincakiroglu]

Hi,

Since it would be a major and breaking change that replacing span with the input element. I am moving this issue to the 17.Future milestone as it will also affect other PrimeUI libraries. After completing the passthrough implementation, we will discuss it as a team and reconsider this enhancement.