search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.73k stars 1.17k forks source link

Dropdown: Not associated with label #2924

Open zcdunn opened 2 years ago

zcdunn commented 2 years ago

Describe the bug

The Dropdown component isn't properly associated with a label that has a for attribute matching the Dropdown's input-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.

zcdunn commented 1 year ago

This is still an issue on 3.26.0. I updated the original description and the sandbox

zcdunn commented 1 year ago

@mertsincan any update on this one?

mertsincan commented 1 year ago

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

eneeio-nm commented 1 year ago

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.

zcdunn commented 1 year ago

@mertsincan That would work for me if the dropdown has the correct name in the accessibility tree and clicking the label focuses the dropdown

tommie commented 1 year ago

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.

peXed commented 6 months ago

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.

msabino commented 3 months ago

Any update?

MLC-Brunata commented 1 month ago

Is this issue fixed?