Accessibility issue regarding <label>

[ZacharyMohler]

Currently, using the built in @labelText creates a <label> tag and associates it with the dropdown trigger's id (be it default or overridden). This causes accessibility assessment tools to complain about the <label> being orphaned due to the fact that the dropdown trigger is a <div>.

I'm not certain on if it's truly an accessibility concern, or if it's just the assessment tool's complaint, but it's certainly not ideal to have a <label> tag when the interactive element is not truly <input>-like

the fix I've found to please the accessibility tool while maintaining the functionality is to manually label the select with a <span> in this way:

<span id="my-powerselect-label">A Label</span>

<PowerSelect
    @ariaLabelledBy="my-powerselect-label"
    . . . some more args
>
. . .
</PowerSelect> 

Would it be acceptable/not breaking to render the built in @labelText in this way by default? If unclear, I can code up an example

[mkszepp]

Thanks for reporting...

Looking to W3C examples, its atm like you have written incorrectly... In Google Lighthouse the tests are passed...

I have found this docs

• without search https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
• with serach https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/

We can resolve in current version only by passing an an arg like @labelTag

[ZacharyMohler]

Of course, happy to get involved.

I wasn't aware @labelTag was an available arg, will try tomorrow when I'm back in the office.

The accessability tool im currently using is WAVE addon for firefox, its flagging the use of a <label> tag with no form control to associate it to, hence my use of the @ariaLabeledBy to create a "label" without using the <label> tag that is generated by the @labelText arg (the dropdown trigger that the <label> tag's for attribute links to is a <div>, which is disregarded for that reason if I understand correctly)

If I have an error in my example I'd really appreciate more feedback

[mkszepp]

Right now, we have no `@labelTag arg, it was only an idea, how we can fix this in current version, without making braking... If you like, you can create an PR for this

[kexposito]

Hey @mkszepp , opened a PR for it, you can take a look here, Just follow your idea of the labelTag arg.

[mkszepp]

we have added an option to pass @labelTag in v8.12.0, so you can already resolve the accessibility issue in apps before we make a new major.

I will keep this issue open until we have a beta for v9