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.

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,