Accessibility: Invalid ARIA used (aria-control and aria-owns)

[mellis481]

Violation

Ensure ARIA roles, states, and properties are valid

Issue

There are elements with invalid ARIA attributes and/or values. Examples include:

• The select component uses aria-control and aria-owns in an invalid manner, which causes the select to not work appropriately. All of the ARIA is on the which is not valid.
• Additionally, aria-owns and aria-controls are missing corresponding elements (ID references).

User Impact

Assistive technologies may be unable to parse this content.

Code Reference

<input 
    class="select__input"
    autocapitalize="none"
    autocomplete="off"
    autocorrect="off"
    id="react-select-3-input"
    spellcheck="false"
    tabindex="0"
    type="text"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="react-select-3-listbox"
    aria-owns="react-select-3-listbox"
    role="combobox"
    value="" 
    style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;" 
    aria-describedby="react-select-3-placeholder">

Compliant Code Example

Please see the W3C working compliant example for a select-only combobox:
https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-select-only.html

[Rall3n]

#5131 should have fixed the problem. Therefore I will close this issue.