Avoid referencing an ID that is not in the DOM

When the menu is not open, do not set the aria props
referencing it.

Author: pcorpet

.changeset/curly-mice-nail.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Avoid referencing an ID that is not in the DOM

packages/react-select/src/Select.tsx

@@ -1558,13 +1558,15 @@ export default class Select<
       'aria-autocomplete': 'list' as const,
       'aria-expanded': menuIsOpen,
       'aria-haspopup': true,
-      'aria-controls': this.getElementId('listbox'),
-      'aria-owns': this.getElementId('listbox'),
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-invalid': this.props['aria-invalid'],
       'aria-label': this.props['aria-label'],
       'aria-labelledby': this.props['aria-labelledby'],
       role: 'combobox',
+      ...(menuIsOpen && {
+        'aria-controls': this.getElementId('listbox'),
+        'aria-owns': this.getElementId('listbox'),
+      }),
       ...(!isSearchable && {
         'aria-readonly': true,
       }),

packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap

@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap

@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap

@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap

@@ -193,11 +193,9 @@ exports[`snapshot - defaults 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap

@@ -193,11 +193,9 @@ exports[`defaults > snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"