Open zcdunn opened 2 years ago
This is still an issue on 3.26.0. I updated the original description and the sandbox
@mertsincan any update on this one?
Hi @zcdunn, sorry for the delayed response! We focused on unstyled mode integration. Finally, we finished it :)
I reviewed your issue again. As you know, the label's for
feature needs the id of a form element to work. But the components you mentioned above have changed with accessibility enhancement. Now most of the time the element is rendered instead of the . Therefore, the behavior of the browser with
We are experiencing the same issue. With other PrimeVue form input components they either accept an id
or an input-id
prop. This allows for a label
to then be associated with the form field. This doesn't work with Dropdown
component, and is clearly demonstrated by the OP.
This is an accessibility problem and needs fixing, please.
@mertsincan That would work for me if the dropdown has the correct name in the accessibility tree and clicking the label focuses the dropdown
Related: I can't find any <input>
element in Dropdown at all, unless editable
is set. This breaks HTML form submission/SSR. I can emulate it with a hidden input, of course, but it would be nice if Dropdown itself did it.
Any news on this? I'm currently running in the same issue and can't get the dropdown to open when clicking on the label.
Any update?
Is this issue fixed?
Describe the bug
The Dropdown component isn't properly associated with a label that has a
for
attribute matching the Dropdown'sinput-id
prop. Clicking on the label doesn't focus the dropdown and the dropdown doesn't have an accessible name (it should be the labels text value, if properly associated).I've observed the same issue with the Calendar, InputNumber, and InputSwitch components.
Reproducer
https://codesandbox.io/s/nice-stallman-hf8kur
PrimeVue version
3.26.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
The dropdown should have a name in the accessibility tree that matches the associated label. Clicking an associated label should focus the dropdown.