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
Currently, using the built in
@labelTextcreates 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>-likethe 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:Would it be acceptable/not breaking to render the built in
@labelTextin this way by default? If unclear, I can code up an example