diff --git a/package.json b/package.json
index 4189b6f4d2..6be5a730ab 100644
--- a/package.json
+++ b/package.json
@@ -278,7 +278,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@sentry/types": "^6.19.3",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
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/yarn.lock b/yarn.lock
index b34411eabd..2fd51e9d1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1048,10 +1048,10 @@
   resolved "https://registry.yarnpkg.com/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
   integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==
 
-"@pmmmwh/react-refresh-webpack-plugin@^0.5.4":
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.4.tgz#df0d0d855fc527db48aac93c218a0bf4ada41f99"
-  integrity sha512-zZbZeHQDnoTlt2AF+diQT0wsSXpvWiaIOZwBRdltNFhG1+I3ozyaw7U/nBiUwyJ0D+zwdXp0E3bWOl38Ag2BMw==
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz#e77aac783bd079f548daa0a7f080ab5b5a9741ca"
+  integrity sha512-RbG7h6TuP6nFFYKJwbcToA1rjC1FyPg25NR2noAZ0vKI+la01KTSRPkuVPE+U88jXv7javx2JHglUcL1MHcshQ==
   dependencies:
     ansi-html-community "^0.0.8"
     common-path-prefix "^3.0.0"