DropDown: Labels unassociated from DropDown unless :editable="true"

[zachlearnscode]

Describe the bug

I'm getting an 'orphaned form label' accessibility warning for label elementss associated with DropDown components. As a result of this issue, the label does not properly bring focus to a DropDown element. The issue resolves itself when :editable="true" is added to the DropDown. Discord user FlipWarthog helpfully pointed out that the browser renders and input element when :editable="true" is applied and renders a span otherwise, which appears to be the root cause of this issue.

NOTE: Feel free to change this to a feature request if that would be more appropriate.

Reproducer

https://stackblitz.com/edit/a5syvg?file=src%2FApp.vue

PrimeVue version

^3.31.x

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Try to click the "Testing" label associated with the dropdown component and note that it doesn't bring focus to the input. Click the Testing 2 and Testing 3 labels on the other inputs and note that focus is brought properly to the related inputs. Add :editable="true" to the Testing dropdown. Click the label again, and note that focus is property brought to the input.

Expected behavior

A label that is properly associated with a dropdown component should bring focus to the input when clicked regardless of the value of the editable prop. Accessibility tools should not report an orphaned form label if a form label is properly coded/associated to a dropdown component.

[FlipWarthog]

@mertsincan @melloware Does this work on the PrimeReact side? I don't think the Dropdown showcase has any examples with labels set up for them.

[melloware]

I would assume PrimeReact has this same issue.

[FlipWarthog]

@melloware You assume wrongly ;) Looks like it does actually work. I'll see if I can figure out what it's doing and how to port it over. https://stackblitz.com/edit/react-dzv6ot?file=src%2FApp.js

[melloware]

Ha nice. PrimeVue code is more accurate though for ARIA so we need to study https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ to see how ARIA recommends handling the label focus

[FlipWarthog]

Okay I did some digging and reading. I think ARIA won't necessarily apply here since it's a click action on the label; even the example in the w3 doesn't focus if you click the label. Without messing with the ARIA work that's already been done, I managed to come up with a Vue-y way of working around the issue, which is basically a click event on the label that calls the onFocus method of the Dropdown. @zachlearnscode Can you try this and see if you can get it working? It's a bit wonky currently, but I think it's on the right track.

https://stackblitz.com/edit/a5syvg-y2q5df?file=src%2FApp.vue

[melloware]

@FlipWarthog something clever that could be done in Dropdown itself is if aria-labelledby="lblTesting" you do a DomHandler.find() for the labeled by and if found and if its a Label add the click event to the label dynamically.

[FlipWarthog]

Oh that's not a bad idea. Let me poke around with it and see what it does.

[zachlearnscode]

@FlipWarthog I was able to get your example to work by calling DomHandler.focus in the focusDropdown method.

I couldn't get access to .focus directly via the dropdown ref, so I had to rip it from the util file. However, it looks like adding that call to source code would provide the functionality we're going for. Not sure if any of this solves the 'orphan input label' issue, but from the w3 docs above, it looks like that might be a small deficiency with the accessibility tool I'm using.

[FlipWarthog]

@zachlearnscode Awesome. Yeah I don't think the chrome error will be solved. See this ticket from the PrimeFaces side for more info on that primefaces/primefaces#10254

[zachlearnscode]

@FlipWarthog Yeah... 'overly agressive warning' seems like the right way to put it. Let me know if can be of any more help.