Skip to content

[Accessibility]: Inputs uses incorrect aria labeling #6092

@bhayden-umn

Description

@bhayden-umn

Version 5.10 freshly updated generates an input control as such:

<div class="css-1jqq78o-placeholder" id="react-select-2-placeholder">
Select...
</div>
<div class="css-19bb58m" data-value="">
<input class="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2; font: inherit; min-width: 2px; border: 0px; margin: 0px; padding: 0px;" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-describedby="react-select-2-placeholder" value="">

This uses aria-describedby="react-select-2-placeholder" which is not valid for applying a 'label' for accessbility compliance. It should be aria-labelledby.

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue/bug-unconfirmedIssues that describe a bug that hasn't been confirmed by a maintainer yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions