diff --git a/.changeset/real-suns-rescue.md b/.changeset/real-suns-rescue.md new file mode 100644 index 0000000000..123f906beb --- /dev/null +++ b/.changeset/real-suns-rescue.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Add aria attributes to dummy input diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index 7e762e375b..c8d59039d0 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -918,13 +918,19 @@ export default class Select extends Component { this.openMenu('first'); } } else { - //$FlowFixMe - if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { + if ( + // $FlowFixMe + event.target.tagName !== 'INPUT' && + event.target.tagName !== 'TEXTAREA' + ) { this.onMenuClose(); } } - //$FlowFixMe - if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { + if ( + // $FlowFixMe + event.target.tagName !== 'INPUT' && + event.target.tagName !== 'TEXTAREA' + ) { event.preventDefault(); } }; @@ -1397,6 +1403,13 @@ export default class Select extends Component { const id = inputId || this.getElementId('input'); + // aria attributes makes the JSX "noisy", separated for clarity + const ariaAttributes = { + 'aria-autocomplete': 'list', + 'aria-label': this.props['aria-label'], + 'aria-labelledby': this.props['aria-labelledby'], + }; + if (!isSearchable) { // use a dummy input to maintain focus/blur functionality return ( @@ -1410,17 +1423,11 @@ export default class Select extends Component { disabled={isDisabled} tabIndex={tabIndex} value="" + {...ariaAttributes} /> ); } - // aria attributes makes the JSX "noisy", separated for clarity - const ariaAttributes = { - 'aria-autocomplete': 'list', - 'aria-label': this.props['aria-label'], - 'aria-labelledby': this.props['aria-labelledby'], - }; - const { cx, theme, selectProps } = this.commonProps; return (