Describe the bug
The bug is the same than this one #8092 but a case for Select was missed
aria-controls should only reference the listbox when it exists in the DOM. Setting it unconditionally causes accessibility violations when the overlay is hidden — the referenced element is not present.
<img width="758" height="490" alt="Accessibility inspection panel showing a “Needs Review” warning that says “Ensure all ARIA attributes have valid values.” The highlighted HTML snippet contains a element with role="combobox" and aria-controls="pv_id_1_list", indicating an invalid ARIA relationship because the referenced element is missing." src="https://github.com/user-attachments/assets/73fbcb51-b9aa-4fef-ab86-12994b57e8d2" />
<img width="1292" height="477" alt="Screenshot of a PrimeVue issue template page in dark mode showing a “Pick a city” dropdown. Browser DevTools are open on the right, highlighting a element with role="combobox" and an aria-controls="pv_id_0_list" attribute. Large orange annotation text points out that the aria-controls attribute references an element that does not exist in the DOM." src="https://github.com/user-attachments/assets/b374efb0-8b34-4a55-9bd6-1f1f80980610" />
Pull Request Link
#8571
Reason for not contributing a PR
Other Reason
No response
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-emqe2zup?file=src%2FApp.vue
Environment
All environments, spotted with "Lambda Test accessibility devtools"
Vue version
3.4.x
PrimeVue version
4.3.x
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
Use a <Select> component (non editable version)
Expected behavior
There should be no errors regarding aria-controls pointing to an unexisting DOM element. (in Lambda Test accessibility devtools and other devtools)
Describe the bug
The bug is the same than this one #8092 but a case for
Selectwas missedaria-controlsshould only reference the listbox when it exists in the DOM. Setting it unconditionally causes accessibility violations when the overlay is hidden — the referenced element is not present.<img width="758" height="490" alt="Accessibility inspection panel showing a “Needs Review” warning that says “Ensure all ARIA attributes have valid values.” The highlighted HTML snippet contains a element with role="combobox" and aria-controls="pv_id_1_list", indicating an invalid ARIA relationship because the referenced element is missing." src="https://github.com/user-attachments/assets/73fbcb51-b9aa-4fef-ab86-12994b57e8d2" />
<img width="1292" height="477" alt="Screenshot of a PrimeVue issue template page in dark mode showing a “Pick a city” dropdown. Browser DevTools are open on the right, highlighting a element with role="combobox" and an aria-controls="pv_id_0_list" attribute. Large orange annotation text points out that the aria-controls attribute references an element that does not exist in the DOM." src="https://github.com/user-attachments/assets/b374efb0-8b34-4a55-9bd6-1f1f80980610" />
Pull Request Link
#8571
Reason for not contributing a PR
Other Reason
No response
Reproducer
https://stackblitz.com/edit/primevue-4-vite-issue-template-emqe2zup?file=src%2FApp.vue
Environment
All environments, spotted with "Lambda Test accessibility devtools"
Vue version
3.4.x
PrimeVue version
4.3.x
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
Use a
<Select>component (non editable version)Expected behavior
There should be no errors regarding
aria-controlspointing to an unexisting DOM element. (in Lambda Test accessibility devtools and other devtools)