diff --git a/package.json b/package.json
index 01583e195f..6be5a730ab 100644
--- a/package.json
+++ b/package.json
@@ -382,7 +382,7 @@
     "react-refresh": "^0.12.0",
     "react-refresh-typescript": "^2.0.4",
     "react-router-dom": "^5.3.1",
-    "react-select": "3.2.0",
+    "react-select": "^5.3.0",
     "react-select-event": "^5.3.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
diff --git a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
index ec4585cb42..d0f2586641 100644
--- a/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -120,42 +120,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-26-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-26-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-26-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -170,7 +179,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -196,42 +205,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-27-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-27-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-27-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -246,7 +264,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -327,42 +345,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-28-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-28-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-28-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -377,7 +404,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -403,42 +430,51 @@ exports[`preferences - closing-preferences given accessing preferences directly
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-29-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-29-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-29-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -453,7 +489,7 @@ exports[`preferences - closing-preferences given accessing preferences directly
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -787,42 +823,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -837,7 +882,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -863,42 +908,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -913,7 +967,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -994,42 +1048,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1044,7 +1107,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1070,42 +1133,51 @@ exports[`preferences - closing-preferences given already in a page and then navi
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1120,7 +1192,7 @@ exports[`preferences - closing-preferences given already in a page and then navi
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 676844b978..c1a12d60ba 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -310,42 +310,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -360,7 +369,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -386,42 +395,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -436,7 +454,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -517,42 +535,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -567,7 +594,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -593,42 +620,51 @@ exports[`preferences - navigation to application preferences given in some child
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -643,7 +679,7 @@ exports[`preferences - navigation to application preferences given in some child
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index 731d58c794..6d5284f7bb 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -628,42 +664,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   Position
                 </div>
                 <div
-                  class="Select theme-lens css-2b097c-container"
+                  class="Select theme-lens css-b62m3t-container"
                 >
+                  <span
+                    class="css-1f43avz-a11yText-A11yText"
+                    id="react-select-14-live-region"
+                  />
+                  <span
+                    aria-atomic="false"
+                    aria-live="polite"
+                    aria-relevant="additions text"
+                    class="css-1f43avz-a11yText-A11yText"
+                  />
                   <div
-                    class="Select__control css-yk16xz-control"
+                    class="Select__control css-1s2u09g-control"
                   >
                     <div
-                      class="Select__value-container css-g1d714-ValueContainer"
+                      class="Select__value-container css-319lph-ValueContainer"
                     >
                       <div
-                        class="Select__placeholder css-1wa3eu0-placeholder"
+                        class="Select__placeholder css-14el2xx-placeholder"
+                        id="react-select-14-placeholder"
                       >
                         Select...
                       </div>
                       <div
-                        class="css-b8ldur-Input"
+                        class="Select__input-container css-6j8wv5-Input"
+                        data-value=""
                       >
-                        <div
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby="react-select-14-placeholder"
+                          aria-expanded="false"
+                          aria-haspopup="true"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
                           class="Select__input"
-                          style="display: inline-block;"
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            id="minimap-input"
-                            spellcheck="false"
-                            style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          id="minimap-input"
+                          role="combobox"
+                          spellcheck="false"
+                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
                       </div>
                     </div>
                     <div
@@ -678,7 +723,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                       >
                         <svg
                           aria-hidden="true"
-                          class="css-6q0nyr-Svg"
+                          class="css-tj5bde-Svg"
                           focusable="false"
                           height="20"
                           viewBox="0 0 20 20"
@@ -703,42 +748,51 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="editor-line-numbers-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="editor-line-numbers-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -753,7 +807,7 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index db0b8f3207..dbf45087b1 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -617,42 +653,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -667,7 +712,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -693,42 +738,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -743,7 +797,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -824,42 +878,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-16-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-16-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-16-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -874,7 +937,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -900,42 +963,51 @@ exports[`preferences - navigation to extension specific preferences given in pre
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-17-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-17-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-17-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -950,7 +1022,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index 374f371edb..7f8ad70c1a 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -624,49 +660,59 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                  
               </div>
               <div
-                class="Select theme-lens css-2b097c-container"
+                class="Select theme-lens Select--is-disabled css-3iigni-container"
               >
+                <span
+                  class="css-1f43avz-a11yText-A11yText"
+                  id="react-select-14-live-region"
+                />
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
                 <div
-                  class="Select__control css-yk16xz-control"
+                  class="Select__control Select__control--is-disabled css-1insrsq-control"
                 >
                   <div
-                    class="Select__value-container css-g1d714-ValueContainer"
+                    class="Select__value-container css-319lph-ValueContainer"
                   >
                     <div
-                      class="Select__placeholder css-1wa3eu0-placeholder"
+                      class="Select__placeholder css-14el2xx-placeholder"
+                      id="react-select-14-placeholder"
                     >
                       Download mirror for kubectl
                     </div>
                     <div
-                      class="css-b8ldur-Input"
+                      class="Select__input-container css-jzldcf-Input"
+                      data-value=""
                     >
-                      <div
+                      <input
+                        aria-autocomplete="list"
+                        aria-describedby="react-select-14-placeholder"
+                        aria-expanded="false"
+                        aria-haspopup="true"
+                        autocapitalize="none"
+                        autocomplete="off"
+                        autocorrect="off"
                         class="Select__input"
-                        style="display: inline-block;"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          id="download-mirror-input"
-                          spellcheck="false"
-                          style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                        />
-                      </div>
+                        disabled=""
+                        id="download-mirror-input"
+                        role="combobox"
+                        spellcheck="false"
+                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                        tabindex="0"
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
                   <div
                     class="Select__indicators css-1hb7zxy-IndicatorsContainer"
                   >
                     <span
-                      class="Select__indicator-separator css-1okebmr-indicatorSeparator"
+                      class="Select__indicator-separator css-109onse-indicatorSeparator"
                     />
                     <div
                       aria-hidden="true"
@@ -674,7 +720,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                     >
                       <svg
                         aria-hidden="true"
-                        class="css-6q0nyr-Svg"
+                        class="css-tj5bde-Svg"
                         focusable="false"
                         height="20"
                         viewBox="0 0 20 20"
@@ -795,42 +841,51 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                 class="flex gaps"
               >
                 <div
-                  class="Select theme-lens box grow css-2b097c-container"
+                  class="Select theme-lens box grow css-b62m3t-container"
                 >
+                  <span
+                    class="css-1f43avz-a11yText-A11yText"
+                    id="react-select-15-live-region"
+                  />
+                  <span
+                    aria-atomic="false"
+                    aria-live="polite"
+                    aria-relevant="additions text"
+                    class="css-1f43avz-a11yText-A11yText"
+                  />
                   <div
-                    class="Select__control css-yk16xz-control"
+                    class="Select__control css-1s2u09g-control"
                   >
                     <div
-                      class="Select__value-container css-g1d714-ValueContainer"
+                      class="Select__value-container css-319lph-ValueContainer"
                     >
                       <div
-                        class="Select__placeholder css-1wa3eu0-placeholder"
+                        class="Select__placeholder css-14el2xx-placeholder"
+                        id="react-select-15-placeholder"
                       >
                         Repositories
                       </div>
                       <div
-                        class="css-b8ldur-Input"
+                        class="Select__input-container css-6j8wv5-Input"
+                        data-value=""
                       >
-                        <div
+                        <input
+                          aria-autocomplete="list"
+                          aria-describedby="react-select-15-placeholder"
+                          aria-expanded="false"
+                          aria-haspopup="true"
+                          autocapitalize="none"
+                          autocomplete="off"
+                          autocorrect="off"
                           class="Select__input"
-                          style="display: inline-block;"
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            id="HelmRepoSelect"
-                            spellcheck="false"
-                            style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          id="HelmRepoSelect"
+                          role="combobox"
+                          spellcheck="false"
+                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                          tabindex="0"
+                          type="text"
+                          value=""
+                        />
                       </div>
                     </div>
                     <div
@@ -845,7 +900,7 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
                       >
                         <svg
                           aria-hidden="true"
-                          class="css-6q0nyr-Svg"
+                          class="css-tj5bde-Svg"
                           focusable="false"
                           height="20"
                           viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index 5f4ad2bebd..ec521a3ad5 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index 17195dc495..278461e4b9 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -296,42 +296,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -346,7 +355,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -372,42 +381,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -422,7 +440,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -503,42 +521,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -553,7 +580,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -579,42 +606,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -629,7 +665,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -805,42 +841,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -855,7 +900,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -881,42 +926,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-15-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-15-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-15-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -931,7 +985,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1012,42 +1066,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-16-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-16-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-16-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1062,7 +1125,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -1088,42 +1151,51 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-17-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-17-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-17-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -1138,7 +1210,7 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index 21aca325fe..76064feb67 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -108,42 +108,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -158,7 +167,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -184,42 +193,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -234,7 +252,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -315,42 +333,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -365,7 +392,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -391,42 +418,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -441,7 +477,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -649,42 +685,51 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-14-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-14-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-14-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="terminal-theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="terminal-theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -699,7 +744,7 @@ exports[`preferences - navigation to terminal preferences given in preferences,
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index fa7004eb24..e44a035cd0 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -110,42 +110,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-2-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-2-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-2-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="theme-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="theme-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -160,7 +169,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -186,42 +195,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-3-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-3-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-3-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="extension-install-registry-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="extension-install-registry-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -236,7 +254,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -317,42 +335,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-4-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-4-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-4-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="update-channel-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="update-channel-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -367,7 +394,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
@@ -393,42 +420,51 @@ exports[`preferences - navigation using application menu when navigating to pref
                
             </div>
             <div
-              class="Select theme-lens css-2b097c-container"
+              class="Select theme-lens css-b62m3t-container"
             >
+              <span
+                class="css-1f43avz-a11yText-A11yText"
+                id="react-select-5-live-region"
+              />
+              <span
+                aria-atomic="false"
+                aria-live="polite"
+                aria-relevant="additions text"
+                class="css-1f43avz-a11yText-A11yText"
+              />
               <div
-                class="Select__control css-yk16xz-control"
+                class="Select__control css-1s2u09g-control"
               >
                 <div
-                  class="Select__value-container css-g1d714-ValueContainer"
+                  class="Select__value-container css-319lph-ValueContainer"
                 >
                   <div
-                    class="Select__placeholder css-1wa3eu0-placeholder"
+                    class="Select__placeholder css-14el2xx-placeholder"
+                    id="react-select-5-placeholder"
                   >
                     Select...
                   </div>
                   <div
-                    class="css-b8ldur-Input"
+                    class="Select__input-container css-6j8wv5-Input"
+                    data-value=""
                   >
-                    <div
+                    <input
+                      aria-autocomplete="list"
+                      aria-describedby="react-select-5-placeholder"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      autocapitalize="none"
+                      autocomplete="off"
+                      autocorrect="off"
                       class="Select__input"
-                      style="display: inline-block;"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        autocapitalize="none"
-                        autocomplete="off"
-                        autocorrect="off"
-                        id="timezone-input"
-                        spellcheck="false"
-                        style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
-                        tabindex="0"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      id="timezone-input"
+                      role="combobox"
+                      spellcheck="false"
+                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                      tabindex="0"
+                      type="text"
+                      value=""
+                    />
                   </div>
                 </div>
                 <div
@@ -443,7 +479,7 @@ exports[`preferences - navigation using application menu when navigating to pref
                   >
                     <svg
                       aria-hidden="true"
-                      class="css-6q0nyr-Svg"
+                      class="css-tj5bde-Svg"
                       focusable="false"
                       height="20"
                       viewBox="0 0 20 20"
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index e08b5f0620..f1db8122d9 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@@ -7,8 +7,7 @@ import "./namespace-select-filter.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import type { OptionTypeBase, PlaceholderProps } from "react-select";
-import { components } from "react-select";
+import { components, type PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { NamespaceSelect } from "./namespace-select";
@@ -78,7 +77,7 @@ export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(
   }),
 });
 
-export interface CustomPlaceholderProps extends PlaceholderProps<OptionTypeBase, boolean> {}
+export interface CustomPlaceholderProps extends PlaceholderProps {}
 
 interface PlaceholderDependencies {
   namespaceStore: NamespaceStore;
diff --git a/src/renderer/components/+preferences/kubectl-binaries.tsx b/src/renderer/components/+preferences/kubectl-binaries.tsx
index 138a6f805d..99e112e1eb 100644
--- a/src/renderer/components/+preferences/kubectl-binaries.tsx
+++ b/src/renderer/components/+preferences/kubectl-binaries.tsx
@@ -64,7 +64,7 @@ const NonInjectedKubectlBinaries: React.FC<Dependencies> = observer(
             options={downloadMirrorOptions}
             value={userStore.downloadMirror}
             onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
-            disabled={!userStore.downloadKubectlBinaries}
+            isDisabled={!userStore.downloadKubectlBinaries}
             isOptionDisabled={({ platforms }) =>
               !platforms.has(process.platform)
             }
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 69d92ec8ff..46c99f34cc 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -7,22 +7,25 @@
 // API docs: https://react-select.com/
 import "./select.scss";
 
-import type { ReactNode } from "react";
 import React from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { components } from "react-select";
-import ReactSelectCreatable from "react-select/creatable";
-import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import type { CreatableProps } from "react-select/creatable";
-
+import ReactSelect, {
+  type ActionMeta,
+  components,
+  type GroupBase,
+  type Props as ReactSelectProps,
+  type StylesConfig,
+} from "react-select";
+import ReactSelectCreatable, { type CreatableProps } from "react-select/creatable";
 import { ThemeStore } from "../../theme.store";
 import { autoBind, cssNames } from "../../utils";
+import { merge } from "lodash";
 
 const { Menu } = components;
 
 export interface GroupSelectOption<T extends SelectOption = SelectOption> {
-  label: ReactNode;
+  label: React.ReactNode;
   options: T[];
 }
 
@@ -31,7 +34,7 @@ export interface SelectOption<T = any> {
   label?: React.ReactNode;
 }
 
-export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean> {
+export interface SelectProps<T = any> extends ReactSelectProps<T, boolean>, CreatableProps<T, boolean, GroupBase<T>> {
   id?: string; // Optional only because of Extension API. Required to make Select deterministic in unit tests
   value?: T;
   themeName?: "dark" | "light" | "outlined" | "lens";
@@ -61,12 +64,16 @@ export class Select extends React.Component<SelectProps> {
     return `theme-${themeName}`;
   }
 
-  private styles: Styles<OptionTypeBase, boolean> = {
-    menuPortal: styles => ({
-      ...styles,
-      zIndex: "auto",
-    }),
-  };
+  @computed get styles(): StylesConfig {
+    const defaultStyles: StylesConfig = {
+      menuPortal: styles => ({
+        ...styles,
+        zIndex: "auto",
+      }),
+    };
+
+    return merge(defaultStyles, this.props.styles);
+  }
 
   protected isValidOption(opt: SelectOption | any) {
     return typeof opt === "object" && opt.value !== undefined;
@@ -104,7 +111,7 @@ export class Select extends React.Component<SelectProps> {
     }
   }
 
-  onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
+  onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt);
     }
@@ -122,7 +129,7 @@ export class Select extends React.Component<SelectProps> {
 
     const selectProps: Partial<SelectProps> = {
       ...props,
-      ...(inputId ? { inputId }: {}),
+      ...(inputId ? { inputId } : {}),
       styles: this.styles,
       value: autoConvertOptions ? this.selectedOption : value,
       options: autoConvertOptions ? this.options : options,
@@ -142,7 +149,7 @@ export class Select extends React.Component<SelectProps> {
     };
 
     return isCreatable
-      ? <ReactSelectCreatable {...selectProps}/>
-      : <ReactSelect {...selectProps}/>;
+      ? <ReactSelectCreatable {...selectProps} /> // select list with ability to add new options
+      : <ReactSelect {...selectProps} />;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 972b23276a..2fd51e9d1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -92,13 +92,20 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.1":
+"@babel/helper-module-imports@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz#dd331bd45bccc566ce77004e9d05fe17add13876"
   integrity sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==
   dependencies:
     "@babel/types" "^7.10.1"
 
+"@babel/helper-module-imports@^7.12.13":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz#24e2f08ee6832c60b157bb0936c86bef7210c622"
@@ -129,6 +136,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-replace-supers@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz#ec6859d20c5d8087f6a2dc4e014db7228975f13d"
@@ -164,6 +176,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helpers@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.1.tgz#a6827b7cb975c9d9cef5fd61d919f60d8844a973"
@@ -231,6 +248,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
+  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.1.tgz#fffee77b4934ce77f3b427649ecdddbec1958550"
@@ -295,6 +319,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.1", "@babel/template@^7.3.3":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
@@ -328,6 +359,14 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -409,79 +448,85 @@
     minimatch "^3.0.4"
     plist "^3.0.4"
 
-"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
-  version "10.0.29"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
-  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
   dependencies:
-    "@emotion/sheet" "0.9.4"
-    "@emotion/stylis" "0.8.5"
-    "@emotion/utils" "0.11.3"
-    "@emotion/weak-memoize" "0.2.5"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
 
-"@emotion/core@^10.0.9":
-  version "10.0.28"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
-  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
 
-"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
-  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
-  dependencies:
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/utils" "0.11.3"
-    babel-plugin-emotion "^10.0.27"
-
-"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
+"@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
-  version "0.11.16"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
-  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+"@emotion/react@^11.1.1":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
   dependencies:
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/unitless" "0.7.5"
-    "@emotion/utils" "0.11.3"
-    csstype "^2.5.7"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
 
-"@emotion/sheet@0.9.4":
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
-  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.3.tgz#99e2060c26c6292469fb30db41f4690e1c8fea63"
+  integrity sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
 
-"@emotion/stylis@0.8.5":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
-  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -1836,7 +1881,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@*", "@types/react-transition-group@^4.2.0":
+"@types/react-transition-group@*", "@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
   integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
@@ -2969,22 +3021,6 @@ babel-jest@^26.6.3:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-plugin-emotion@^10.0.27:
-  version "10.0.33"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
-  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.8.0"
-    "@emotion/memoize" "0.7.4"
-    "@emotion/serialize" "^0.11.16"
-    babel-plugin-macros "^2.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^1.0.5"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -3006,7 +3042,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@^2.0.0:
+babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -3015,11 +3051,6 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -4350,7 +4381,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.7:
+csstype@^2.5.2, csstype@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -6645,7 +6676,7 @@ history@^4.10.1, history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -10772,7 +10803,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10985,13 +11016,6 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.21.0"
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -11068,18 +11092,17 @@ react-select-event@^5.3.0:
   dependencies:
     "@testing-library/dom" ">=7"
 
-react-select@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
-  integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==
+react-select@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.3.0.tgz#dc77c1f95e1037ec4cb01c5e5d6272d80be8d3f6"
+  integrity sha512-GM6Fbv1+X+kb3e5Fc4oNeyOJkCIesY/D4NBiReKlGY4RxoeztFYm3J0KREgwMaIKQqwTiuLqTlpUBY3SYw5goQ==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^10.0.9"
-    "@emotion/core" "^10.0.9"
-    "@emotion/css" "^10.0.9"
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
 react-swipeable@^6.1.0:
@@ -12547,6 +12570,11 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 stylus@^0.54.8:
   version "0.54.8"
   resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147"