From 1119ba1b21f16edfc3b671aa0e71a582048db306 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Fri, 15 Mar 2024 08:41:53 -0500
Subject: [PATCH] updated snapshots using form components

---
 .../ResourceSearchForm.test.js.snap           | 304 ++++++++----------
 .../UpdateProfileForm.test.js.snap            | 101 +++---
 .../MilitaryDetails.test.js.snap              | 101 +++---
 .../__snapshots__/MilitaryStatus.test.js.snap | 101 +++---
 .../ProfessionalDetails.test.js.snap          | 101 +++---
 .../__snapshots__/Technology.test.js.snap     | 204 ++++++------
 6 files changed, 426 insertions(+), 486 deletions(-)

diff --git a/components/Forms/ResourceSearchForm/__tests__/__snapshots__/ResourceSearchForm.test.js.snap b/components/Forms/ResourceSearchForm/__tests__/__snapshots__/ResourceSearchForm.test.js.snap
index 247415bad..83fd641b8 100644
--- a/components/Forms/ResourceSearchForm/__tests__/__snapshots__/ResourceSearchForm.test.js.snap
+++ b/components/Forms/ResourceSearchForm/__tests__/__snapshots__/ResourceSearchForm.test.js.snap
@@ -55,93 +55,86 @@ exports[`ResourceSearchForm > should render with required props 1`] = `
           className="selectFeedbackGrouping"
         >
           <div
-            className=" css-2b097c-container"
+            className=" css-b62m3t-container"
             onKeyDown={[Function]}
           >
+            <span
+              className="css-1f43avz-a11yText-A11yText"
+              id="react-select-category-live-region"
+            />
             <span
               aria-atomic="false"
               aria-live="polite"
               aria-relevant="additions text"
               className="css-1f43avz-a11yText-A11yText"
+              role="log"
             />
             <div
-              className=" css-6k4gi9-control"
+              className=" css-8olv4-control"
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
               <div
-                className=" css-g1d714-ValueContainer"
+                className=" css-art2ul-ValueContainer2"
               >
                 <div
-                  className=" css-1wa3eu0-placeholder"
+                  className=" css-1jqq78o-placeholder"
+                  id="react-select-category-placeholder"
                 >
                   Start typing a category...
                 </div>
                 <div
-                  className="css-b8ldur-Input"
+                  className=" css-w9q2zk-Input2"
+                  data-value=""
                 >
-                  <div
+                  <input
+                    aria-activedescendant=""
+                    aria-autocomplete="list"
+                    aria-describedby="react-select-category-placeholder"
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    autoCapitalize="none"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className=""
+                    disabled={false}
+                    id="react-select-category-input"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    role="combobox"
+                    spellCheck="false"
                     style={
                       {
-                        "display": "inline-block",
+                        "background": 0,
+                        "border": 0,
+                        "color": "inherit",
+                        "font": "inherit",
+                        "gridArea": "1 / 2",
+                        "label": "input",
+                        "margin": 0,
+                        "minWidth": "2px",
+                        "opacity": 1,
+                        "outline": 0,
+                        "padding": 0,
+                        "width": "100%",
                       }
                     }
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      autoCapitalize="none"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      disabled={false}
-                      id="react-select-category-input"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      spellCheck="false"
-                      style={
-                        {
-                          "background": 0,
-                          "border": 0,
-                          "boxSizing": "content-box",
-                          "color": "inherit",
-                          "fontSize": "inherit",
-                          "label": "input",
-                          "opacity": 1,
-                          "outline": 0,
-                          "padding": 0,
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex="0"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      style={
-                        {
-                          "height": 0,
-                          "left": 0,
-                          "overflow": "scroll",
-                          "position": "absolute",
-                          "top": 0,
-                          "visibility": "hidden",
-                          "whiteSpace": "pre",
-                        }
-                      }
-                    />
-                  </div>
+                    tabIndex={0}
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
               <div
-                className=" css-1hb7zxy-IndicatorsContainer"
+                className=" css-4xgw5l-IndicatorsContainer2"
               >
                 <span
-                  className=" css-1okebmr-indicatorSeparator"
+                  className=" css-1u9des2-indicatorSeparator"
                 />
                 <div
                   aria-hidden="true"
-                  className=" css-1vtn1ro-indicatorContainer"
+                  className=" css-itfj09-indicatorContainer"
                   onMouseDown={[Function]}
                   onTouchEnd={[Function]}
                 >
@@ -186,93 +179,86 @@ exports[`ResourceSearchForm > should render with required props 1`] = `
           className="selectFeedbackGrouping"
         >
           <div
-            className=" css-2b097c-container"
+            className=" css-b62m3t-container"
             onKeyDown={[Function]}
           >
+            <span
+              className="css-1f43avz-a11yText-A11yText"
+              id="react-select-free-live-region"
+            />
             <span
               aria-atomic="false"
               aria-live="polite"
               aria-relevant="additions text"
               className="css-1f43avz-a11yText-A11yText"
+              role="log"
             />
             <div
-              className=" css-6k4gi9-control"
+              className=" css-8olv4-control"
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
               <div
-                className=" css-g1d714-ValueContainer"
+                className=" css-art2ul-ValueContainer2"
               >
                 <div
-                  className=" css-1wa3eu0-placeholder"
+                  className=" css-1jqq78o-placeholder"
+                  id="react-select-free-placeholder"
                 >
                   Resource cost...
                 </div>
                 <div
-                  className="css-b8ldur-Input"
+                  className=" css-w9q2zk-Input2"
+                  data-value=""
                 >
-                  <div
+                  <input
+                    aria-activedescendant=""
+                    aria-autocomplete="list"
+                    aria-describedby="react-select-free-placeholder"
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    autoCapitalize="none"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className=""
+                    disabled={false}
+                    id="react-select-free-input"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    role="combobox"
+                    spellCheck="false"
                     style={
                       {
-                        "display": "inline-block",
+                        "background": 0,
+                        "border": 0,
+                        "color": "inherit",
+                        "font": "inherit",
+                        "gridArea": "1 / 2",
+                        "label": "input",
+                        "margin": 0,
+                        "minWidth": "2px",
+                        "opacity": 1,
+                        "outline": 0,
+                        "padding": 0,
+                        "width": "100%",
                       }
                     }
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      autoCapitalize="none"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      disabled={false}
-                      id="react-select-free-input"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      spellCheck="false"
-                      style={
-                        {
-                          "background": 0,
-                          "border": 0,
-                          "boxSizing": "content-box",
-                          "color": "inherit",
-                          "fontSize": "inherit",
-                          "label": "input",
-                          "opacity": 1,
-                          "outline": 0,
-                          "padding": 0,
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex="0"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      style={
-                        {
-                          "height": 0,
-                          "left": 0,
-                          "overflow": "scroll",
-                          "position": "absolute",
-                          "top": 0,
-                          "visibility": "hidden",
-                          "whiteSpace": "pre",
-                        }
-                      }
-                    />
-                  </div>
+                    tabIndex={0}
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
               <div
-                className=" css-1hb7zxy-IndicatorsContainer"
+                className=" css-4xgw5l-IndicatorsContainer2"
               >
                 <span
-                  className=" css-1okebmr-indicatorSeparator"
+                  className=" css-1u9des2-indicatorSeparator"
                 />
                 <div
                   aria-hidden="true"
-                  className=" css-1vtn1ro-indicatorContainer"
+                  className=" css-itfj09-indicatorContainer"
                   onMouseDown={[Function]}
                   onTouchEnd={[Function]}
                 >
@@ -317,93 +303,86 @@ exports[`ResourceSearchForm > should render with required props 1`] = `
           className="selectFeedbackGrouping"
         >
           <div
-            className=" css-2b097c-container"
+            className=" css-b62m3t-container"
             onKeyDown={[Function]}
           >
+            <span
+              className="css-1f43avz-a11yText-A11yText"
+              id="react-select-languages-live-region"
+            />
             <span
               aria-atomic="false"
               aria-live="polite"
               aria-relevant="additions text"
               className="css-1f43avz-a11yText-A11yText"
+              role="log"
             />
             <div
-              className=" css-6k4gi9-control"
+              className=" css-8olv4-control"
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
               <div
-                className=" css-g1d714-ValueContainer"
+                className=" css-art2ul-ValueContainer2"
               >
                 <div
-                  className=" css-1wa3eu0-placeholder"
+                  className=" css-1jqq78o-placeholder"
+                  id="react-select-languages-placeholder"
                 >
                   Start typing a language...
                 </div>
                 <div
-                  className="css-b8ldur-Input"
+                  className=" css-w9q2zk-Input2"
+                  data-value=""
                 >
-                  <div
+                  <input
+                    aria-activedescendant=""
+                    aria-autocomplete="list"
+                    aria-describedby="react-select-languages-placeholder"
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    autoCapitalize="none"
+                    autoComplete="off"
+                    autoCorrect="off"
                     className=""
+                    disabled={false}
+                    id="react-select-languages-input"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    role="combobox"
+                    spellCheck="false"
                     style={
                       {
-                        "display": "inline-block",
+                        "background": 0,
+                        "border": 0,
+                        "color": "inherit",
+                        "font": "inherit",
+                        "gridArea": "1 / 2",
+                        "label": "input",
+                        "margin": 0,
+                        "minWidth": "2px",
+                        "opacity": 1,
+                        "outline": 0,
+                        "padding": 0,
+                        "width": "100%",
                       }
                     }
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      autoCapitalize="none"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      disabled={false}
-                      id="react-select-languages-input"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      spellCheck="false"
-                      style={
-                        {
-                          "background": 0,
-                          "border": 0,
-                          "boxSizing": "content-box",
-                          "color": "inherit",
-                          "fontSize": "inherit",
-                          "label": "input",
-                          "opacity": 1,
-                          "outline": 0,
-                          "padding": 0,
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex="0"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      style={
-                        {
-                          "height": 0,
-                          "left": 0,
-                          "overflow": "scroll",
-                          "position": "absolute",
-                          "top": 0,
-                          "visibility": "hidden",
-                          "whiteSpace": "pre",
-                        }
-                      }
-                    />
-                  </div>
+                    tabIndex={0}
+                    type="text"
+                    value=""
+                  />
                 </div>
               </div>
               <div
-                className=" css-1hb7zxy-IndicatorsContainer"
+                className=" css-4xgw5l-IndicatorsContainer2"
               >
                 <span
-                  className=" css-1okebmr-indicatorSeparator"
+                  className=" css-1u9des2-indicatorSeparator"
                 />
                 <div
                   aria-hidden="true"
-                  className=" css-1vtn1ro-indicatorContainer"
+                  className=" css-itfj09-indicatorContainer"
                   onMouseDown={[Function]}
                   onTouchEnd={[Function]}
                 >
@@ -426,6 +405,7 @@ exports[`ResourceSearchForm > should render with required props 1`] = `
               <input
                 name="languages"
                 type="hidden"
+                value=""
               />
             </div>
           </div>
diff --git a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
index 0c25435d3..83be6e7c2 100644
--- a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
+++ b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap
@@ -49,93 +49,86 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-employmentStatus-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-employmentStatus-placeholder"
               >
                 Select...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-employmentStatus-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-employmentStatus-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-employmentStatus-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.js.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.js.snap
index 812a655db..08aa345ed 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.js.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.js.snap
@@ -23,93 +23,86 @@ exports[`UpdateProfileForm/Steps/MilitaryDetails > should render in context of F
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-branchOfService-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-branchOfService-placeholder"
               >
                 Select...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-branchOfService-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-branchOfService-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-branchOfService-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.js.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.js.snap
index 244ac46ad..258c050a4 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.js.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.js.snap
@@ -29,93 +29,86 @@ exports[`UpdateProfileForm/Steps/MilitaryStatus > should render in context of Fo
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-militaryStatus-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-militaryStatus-placeholder"
               >
                 Select...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-militaryStatus-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-militaryStatus-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-militaryStatus-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.js.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.js.snap
index a215724e3..b48988ed6 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.js.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.js.snap
@@ -23,93 +23,86 @@ exports[`UpdateProfileForm/Steps/ProfessionalDetails > should render in context
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-employmentStatus-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-employmentStatus-placeholder"
               >
                 Select...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-employmentStatus-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-employmentStatus-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-employmentStatus-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/Technology.test.js.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/Technology.test.js.snap
index 73ac04c1a..fd2b91d85 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/Technology.test.js.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/Technology.test.js.snap
@@ -23,93 +23,86 @@ exports[`UpdateProfileForm/Steps/Technology > should render in context of Formik
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-programmingLanguages-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-programmingLanguages-placeholder"
               >
                 Select at least one...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-programmingLanguages-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-programmingLanguages-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-programmingLanguages-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
@@ -132,6 +125,7 @@ exports[`UpdateProfileForm/Steps/Technology > should render in context of Formik
             <input
               name="programmingLanguages"
               type="hidden"
+              value=""
             />
           </div>
         </div>
@@ -155,93 +149,86 @@ exports[`UpdateProfileForm/Steps/Technology > should render in context of Formik
         className="selectFeedbackGrouping"
       >
         <div
-          className="fullWidth css-2b097c-container"
+          className="fullWidth css-b62m3t-container"
           onKeyDown={[Function]}
         >
+          <span
+            className="css-1f43avz-a11yText-A11yText"
+            id="react-select-disciplines-live-region"
+          />
           <span
             aria-atomic="false"
             aria-live="polite"
             aria-relevant="additions text"
             className="css-1f43avz-a11yText-A11yText"
+            role="log"
           />
           <div
-            className=" css-6k4gi9-control"
+            className=" css-8olv4-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
             <div
-              className=" css-g1d714-ValueContainer"
+              className=" css-art2ul-ValueContainer2"
             >
               <div
-                className=" css-1wa3eu0-placeholder"
+                className=" css-1jqq78o-placeholder"
+                id="react-select-disciplines-placeholder"
               >
                 Select at least one...
               </div>
               <div
-                className="css-b8ldur-Input"
+                className=" css-w9q2zk-Input2"
+                data-value=""
               >
-                <div
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-describedby="react-select-disciplines-placeholder"
+                  aria-expanded={false}
+                  aria-haspopup={true}
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect="off"
                   className=""
+                  disabled={false}
+                  id="react-select-disciplines-input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="combobox"
+                  spellCheck="false"
                   style={
                     {
-                      "display": "inline-block",
+                      "background": 0,
+                      "border": 0,
+                      "color": "inherit",
+                      "font": "inherit",
+                      "gridArea": "1 / 2",
+                      "label": "input",
+                      "margin": 0,
+                      "minWidth": "2px",
+                      "opacity": 1,
+                      "outline": 0,
+                      "padding": 0,
+                      "width": "100%",
                     }
                   }
-                >
-                  <input
-                    aria-autocomplete="list"
-                    autoCapitalize="none"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    disabled={false}
-                    id="react-select-disciplines-input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    spellCheck="false"
-                    style={
-                      {
-                        "background": 0,
-                        "border": 0,
-                        "boxSizing": "content-box",
-                        "color": "inherit",
-                        "fontSize": "inherit",
-                        "label": "input",
-                        "opacity": 1,
-                        "outline": 0,
-                        "padding": 0,
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex="0"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    style={
-                      {
-                        "height": 0,
-                        "left": 0,
-                        "overflow": "scroll",
-                        "position": "absolute",
-                        "top": 0,
-                        "visibility": "hidden",
-                        "whiteSpace": "pre",
-                      }
-                    }
-                  />
-                </div>
+                  tabIndex={0}
+                  type="text"
+                  value=""
+                />
               </div>
             </div>
             <div
-              className=" css-1hb7zxy-IndicatorsContainer"
+              className=" css-4xgw5l-IndicatorsContainer2"
             >
               <span
-                className=" css-1okebmr-indicatorSeparator"
+                className=" css-1u9des2-indicatorSeparator"
               />
               <div
                 aria-hidden="true"
-                className=" css-1vtn1ro-indicatorContainer"
+                className=" css-itfj09-indicatorContainer"
                 onMouseDown={[Function]}
                 onTouchEnd={[Function]}
               >
@@ -264,6 +251,7 @@ exports[`UpdateProfileForm/Steps/Technology > should render in context of Formik
             <input
               name="disciplines"
               type="hidden"
+              value=""
             />
           </div>
         </div>