From 8337b3432df64cac20b5f7474db5145823b64536 Mon Sep 17 00:00:00 2001
From: Arjun Patel <arjun453@gmail.com>
Date: Fri, 31 May 2024 12:57:49 -0400
Subject: [PATCH] snapshot -u

---
 .../DetailsMenu_Default.storyshot             | 24 +++++-
 .../DetailsMenu_WithDownloadedLog.storyshot   | 24 +++++-
 .../__snapshots__/SearchBar_Default.storyshot | 54 +++++++-----
 .../SearchBar_WithSearchSuggestions.storyshot | 14 +++-
 .../EditableTagField_Default.storyshot        | 84 +++++++++++++++----
 .../FilterBadges_Default.storyshot            | 36 +++++---
 .../HistoryTableTestSearch_Default.storyshot  | 18 ++--
 .../SpruceForm_Example1.storyshot             | 36 +++++---
 .../TextInputWithGlyph_Default.storyshot      | 18 ++--
 .../TextInputWithValidation_Default.storyshot | 18 ++--
 .../TupleSelect_Default.storyshot             | 10 ++-
 ...RegexConditional_WithConditional.storyshot | 10 ++-
 ...ePatchCore_ConfigureTasksDefault.storyshot | 30 +++++--
 13 files changed, 280 insertions(+), 96 deletions(-)

diff --git a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_Default.storyshot b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_Default.storyshot
index 56c28a130..820754b8b 100644
--- a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_Default.storyshot
+++ b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_Default.storyshot
@@ -129,7 +129,7 @@
                           class="leafygreen-ui-1iyoj2o"
                         />
                         <div
-                          class="leafygreen-ui-1c0ck9t"
+                          class="leafygreen-ui-pp12fp"
                         >
                           <div
                             class="leafygreen-ui-1ago99h"
@@ -142,7 +142,7 @@
                               autocomplete="on"
                               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                               data-cy="range-lower-bound"
-                              id="lg-form-field-input-27"
+                              id="lg-form_field-input-27"
                               min="0"
                               placeholder="0"
                               required=""
@@ -151,6 +151,14 @@
                             />
                           </div>
                         </div>
+                        <div
+                          aria-live="polite"
+                          aria-relevant="all"
+                          class="leafygreen-ui-11ydt2g"
+                          data-lgid="lg-form_field-feedback"
+                          data-testid="lg-form_field-feedback"
+                          id="lg-form_field-feedback-26"
+                        />
                       </div>
                       <div
                         aria-labelledby="Range Upper Bound"
@@ -161,7 +169,7 @@
                           class="leafygreen-ui-1iyoj2o"
                         />
                         <div
-                          class="leafygreen-ui-1c0ck9t"
+                          class="leafygreen-ui-pp12fp"
                         >
                           <div
                             class="leafygreen-ui-1ago99h"
@@ -174,7 +182,7 @@
                               autocomplete="on"
                               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                               data-cy="range-upper-bound"
-                              id="lg-form-field-input-31"
+                              id="lg-form_field-input-31"
                               min="0"
                               placeholder="100"
                               required=""
@@ -183,6 +191,14 @@
                             />
                           </div>
                         </div>
+                        <div
+                          aria-live="polite"
+                          aria-relevant="all"
+                          class="leafygreen-ui-11ydt2g"
+                          data-lgid="lg-form_field-feedback"
+                          data-testid="lg-form_field-feedback"
+                          id="lg-form_field-feedback-30"
+                        />
                       </div>
                     </div>
                   </div>
diff --git a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_WithDownloadedLog.storyshot b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_WithDownloadedLog.storyshot
index ccd6cf0fc..410e4da0b 100644
--- a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_WithDownloadedLog.storyshot
+++ b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu_WithDownloadedLog.storyshot
@@ -129,7 +129,7 @@
                           class="leafygreen-ui-1iyoj2o"
                         />
                         <div
-                          class="leafygreen-ui-1c0ck9t"
+                          class="leafygreen-ui-pp12fp"
                         >
                           <div
                             class="leafygreen-ui-1ago99h"
@@ -142,7 +142,7 @@
                               autocomplete="on"
                               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                               data-cy="range-lower-bound"
-                              id="lg-form-field-input-63"
+                              id="lg-form_field-input-63"
                               min="0"
                               placeholder="0"
                               required=""
@@ -151,6 +151,14 @@
                             />
                           </div>
                         </div>
+                        <div
+                          aria-live="polite"
+                          aria-relevant="all"
+                          class="leafygreen-ui-11ydt2g"
+                          data-lgid="lg-form_field-feedback"
+                          data-testid="lg-form_field-feedback"
+                          id="lg-form_field-feedback-62"
+                        />
                       </div>
                       <div
                         aria-labelledby="Range Upper Bound"
@@ -161,7 +169,7 @@
                           class="leafygreen-ui-1iyoj2o"
                         />
                         <div
-                          class="leafygreen-ui-1c0ck9t"
+                          class="leafygreen-ui-pp12fp"
                         >
                           <div
                             class="leafygreen-ui-1ago99h"
@@ -174,7 +182,7 @@
                               autocomplete="on"
                               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                               data-cy="range-upper-bound"
-                              id="lg-form-field-input-67"
+                              id="lg-form_field-input-67"
                               min="0"
                               placeholder="100"
                               required=""
@@ -183,6 +191,14 @@
                             />
                           </div>
                         </div>
+                        <div
+                          aria-live="polite"
+                          aria-relevant="all"
+                          class="leafygreen-ui-11ydt2g"
+                          data-lgid="lg-form_field-feedback"
+                          data-testid="lg-form_field-feedback"
+                          id="lg-form_field-feedback-66"
+                        />
                       </div>
                     </div>
                   </div>
diff --git a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_Default.storyshot b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_Default.storyshot
index e727715d8..6f8f60d0a 100644
--- a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_Default.storyshot
+++ b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_Default.storyshot
@@ -13,7 +13,7 @@
         aria-expanded="false"
         aria-invalid="false"
         aria-labelledby="searchbar-select"
-        class="lg-ui-button-0001 leafygreen-ui-1p6i2zy"
+        class="lg-ui-button-0000 leafygreen-ui-1p6i2zy"
         data-cy="searchbar-select"
         data-lgid="lg-button"
         data-testid="leafygreen-ui-select-menubutton"
@@ -127,20 +127,20 @@
             class="leafygreen-ui-1iyoj2o"
           />
           <div
-            class="leafygreen-ui-os8x4a"
+            class="leafygreen-ui-1lnipbl"
           >
             <div
               class="leafygreen-ui-1ago99h"
             >
               <input
-                aria-describedby="lg-form-field-description-234"
+                aria-describedby="lg-form_field-feedback-234"
                 aria-disabled="false"
                 aria-invalid="true"
                 aria-labelledby="searchbar-input"
                 autocomplete="on"
                 class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                 data-cy="searchbar-input"
-                id="lg-form-field-input-235"
+                id="lg-form_field-input-235"
                 placeholder="optional, regexp to search"
                 required=""
                 spellcheck="false"
@@ -150,31 +150,39 @@
             </div>
           </div>
           <div
-            class="leafygreen-ui-15w6x3f"
+            aria-live="polite"
+            aria-relevant="all"
+            class="leafygreen-ui-wsgs9n"
+            data-lgid="lg-form_field-feedback"
+            data-testid="lg-form_field-feedback"
+            id="lg-form_field-feedback-234"
           >
-            <svg
-              aria-hidden="true"
-              class="leafygreen-ui-160ryfb"
-              fill="none"
-              height="16"
-              role="img"
-              title="Error"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="leafygreen-ui-1nmw6il"
             >
-              <path
-                clip-rule="evenodd"
-                d="M8.864 1.514a.983.983 0 0 0-1.728 0L1.122 12.539A.987.987 0 0 0 1.986 14h12.028a.987.987 0 0 0 .864-1.461L8.864 1.514ZM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0V5Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="leafygreen-ui-1xsx4zj"
+                fill="none"
+                height="16"
+                role="img"
+                title="Error"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M8.864 1.514a.983.983 0 0 0-1.728 0L1.122 12.539A.987.987 0 0 0 1.986 14h12.028a.987.987 0 0 0 .864-1.461L8.864 1.514ZM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0V5Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
             <p
               class="leafygreen-ui-p319dc"
               data-lgid="lg-form_field-error_message"
               data-testid="lg-form_field-error_message"
-              id="lg-form-field-description-234"
             >
               This input needs your attention
             </p>
diff --git a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_WithSearchSuggestions.storyshot b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_WithSearchSuggestions.storyshot
index 2ab633bd5..b965b3359 100644
--- a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_WithSearchSuggestions.storyshot
+++ b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar_WithSearchSuggestions.storyshot
@@ -13,7 +13,7 @@
         aria-expanded="false"
         aria-invalid="false"
         aria-labelledby="searchbar-select"
-        class="lg-ui-button-0001 leafygreen-ui-1p6i2zy"
+        class="lg-ui-button-0000 leafygreen-ui-1p6i2zy"
         data-cy="searchbar-select"
         data-lgid="lg-button"
         data-testid="leafygreen-ui-select-menubutton"
@@ -127,7 +127,7 @@
             class="leafygreen-ui-1iyoj2o"
           />
           <div
-            class="leafygreen-ui-95c1iv"
+            class="leafygreen-ui-109lyo9"
           >
             <div
               class="leafygreen-ui-1ago99h"
@@ -140,7 +140,7 @@
                 autocomplete="on"
                 class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                 data-cy="searchbar-input"
-                id="lg-form-field-input-242"
+                id="lg-form_field-input-242"
                 placeholder="optional, regexp to search"
                 required=""
                 spellcheck="false"
@@ -149,6 +149,14 @@
               />
             </div>
           </div>
+          <div
+            aria-live="polite"
+            aria-relevant="all"
+            class="leafygreen-ui-11ydt2g"
+            data-lgid="lg-form_field-feedback"
+            data-testid="lg-form_field-feedback"
+            id="lg-form_field-feedback-241"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e1j7n2io0"
diff --git a/apps/spruce/src/components/EditableTagField/__snapshots__/EditableTagField_Default.storyshot b/apps/spruce/src/components/EditableTagField/__snapshots__/EditableTagField_Default.storyshot
index 367f3a909..653707f68 100644
--- a/apps/spruce/src/components/EditableTagField/__snapshots__/EditableTagField_Default.storyshot
+++ b/apps/spruce/src/components/EditableTagField/__snapshots__/EditableTagField_Default.storyshot
@@ -27,13 +27,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_key_1"
-                  id="lg-form-field-label-3"
+                  id="lg-form_field-label-3"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -42,7 +42,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-3"
+                    aria-labelledby="lg-form_field-label-3"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-key-field"
@@ -53,6 +53,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-5"
+              />
             </div>
           </div>
         </div>
@@ -74,13 +82,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_value_1"
-                  id="lg-form-field-label-7"
+                  id="lg-form_field-label-7"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -89,7 +97,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-7"
+                    aria-labelledby="lg-form_field-label-7"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-value-field"
@@ -100,6 +108,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-9"
+              />
             </div>
           </div>
         </div>
@@ -163,13 +179,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_key_2"
-                  id="lg-form-field-label-11"
+                  id="lg-form_field-label-11"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -178,7 +194,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-11"
+                    aria-labelledby="lg-form_field-label-11"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-key-field"
@@ -189,6 +205,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-13"
+              />
             </div>
           </div>
         </div>
@@ -210,13 +234,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_value_2"
-                  id="lg-form-field-label-15"
+                  id="lg-form_field-label-15"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -225,7 +249,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-15"
+                    aria-labelledby="lg-form_field-label-15"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-value-field"
@@ -236,6 +260,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-17"
+              />
             </div>
           </div>
         </div>
@@ -299,13 +331,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_key_3"
-                  id="lg-form-field-label-19"
+                  id="lg-form_field-label-19"
                 >
                   Key
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -314,7 +346,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-19"
+                    aria-labelledby="lg-form_field-label-19"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-key-field"
@@ -325,6 +357,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-21"
+              />
             </div>
           </div>
         </div>
@@ -346,13 +386,13 @@
                   data-lgid="lg-label"
                   data-testid="lg-form_field-label"
                   for="tag_value_3"
-                  id="lg-form-field-label-23"
+                  id="lg-form_field-label-23"
                 >
                   Value
                 </label>
               </div>
               <div
-                class="leafygreen-ui-95c1iv"
+                class="leafygreen-ui-109lyo9"
               >
                 <div
                   class="leafygreen-ui-1ago99h"
@@ -361,7 +401,7 @@
                     aria-describedby=""
                     aria-disabled="false"
                     aria-invalid="false"
-                    aria-labelledby="lg-form-field-label-23"
+                    aria-labelledby="lg-form_field-label-23"
                     autocomplete="on"
                     class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                     data-cy="user-tag-value-field"
@@ -372,6 +412,14 @@
                   />
                 </div>
               </div>
+              <div
+                aria-live="polite"
+                aria-relevant="all"
+                class="leafygreen-ui-11ydt2g"
+                data-lgid="lg-form_field-feedback"
+                data-testid="lg-form_field-feedback"
+                id="lg-form_field-feedback-25"
+              />
             </div>
           </div>
         </div>
diff --git a/apps/spruce/src/components/FilterBadges/__snapshots__/FilterBadges_Default.storyshot b/apps/spruce/src/components/FilterBadges/__snapshots__/FilterBadges_Default.storyshot
index 25eb7bb5e..a36716cc5 100644
--- a/apps/spruce/src/components/FilterBadges/__snapshots__/FilterBadges_Default.storyshot
+++ b/apps/spruce/src/components/FilterBadges/__snapshots__/FilterBadges_Default.storyshot
@@ -61,14 +61,14 @@
             class="leafygreen-ui-6bdaia"
             data-lgid="lg-label"
             data-testid="lg-form_field-label"
-            for="lg-form-field-input-31"
-            id="lg-form-field-label-28"
+            for="lg-form_field-input-31"
+            id="lg-form_field-label-28"
           >
             key
           </label>
         </div>
         <div
-          class="leafygreen-ui-95c1iv"
+          class="leafygreen-ui-109lyo9"
         >
           <div
             class="leafygreen-ui-1ago99h"
@@ -77,10 +77,10 @@
               aria-describedby=""
               aria-disabled="false"
               aria-invalid="false"
-              aria-labelledby="lg-form-field-label-28"
+              aria-labelledby="lg-form_field-label-28"
               autocomplete="on"
               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-              id="lg-form-field-input-31"
+              id="lg-form_field-input-31"
               placeholder="key"
               required=""
               type="text"
@@ -88,6 +88,14 @@
             />
           </div>
         </div>
+        <div
+          aria-live="polite"
+          aria-relevant="all"
+          class="leafygreen-ui-11ydt2g"
+          data-lgid="lg-form_field-feedback"
+          data-testid="lg-form_field-feedback"
+          id="lg-form_field-feedback-30"
+        />
       </div>
       <div
         class="leafygreen-ui-1br9h7w"
@@ -100,14 +108,14 @@
             class="leafygreen-ui-6bdaia"
             data-lgid="lg-label"
             data-testid="lg-form_field-label"
-            for="lg-form-field-input-35"
-            id="lg-form-field-label-32"
+            for="lg-form_field-input-35"
+            id="lg-form_field-label-32"
           >
             value
           </label>
         </div>
         <div
-          class="leafygreen-ui-95c1iv"
+          class="leafygreen-ui-109lyo9"
         >
           <div
             class="leafygreen-ui-1ago99h"
@@ -116,10 +124,10 @@
               aria-describedby=""
               aria-disabled="false"
               aria-invalid="false"
-              aria-labelledby="lg-form-field-label-32"
+              aria-labelledby="lg-form_field-label-32"
               autocomplete="on"
               class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-              id="lg-form-field-input-35"
+              id="lg-form_field-input-35"
               placeholder="value"
               required=""
               type="text"
@@ -127,6 +135,14 @@
             />
           </div>
         </div>
+        <div
+          aria-live="polite"
+          aria-relevant="all"
+          class="leafygreen-ui-11ydt2g"
+          data-lgid="lg-form_field-feedback"
+          data-testid="lg-form_field-feedback"
+          id="lg-form_field-feedback-34"
+        />
       </div>
       <button
         aria-disabled="false"
diff --git a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch_Default.storyshot b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch_Default.storyshot
index 4e75a7e2b..43230c06d 100644
--- a/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch_Default.storyshot
+++ b/apps/spruce/src/components/HistoryTable/HistoryTableTestSearch/__snapshots__/HistoryTableTestSearch_Default.storyshot
@@ -20,14 +20,14 @@
               class="leafygreen-ui-6bdaia"
               data-lgid="lg-label"
               data-testid="lg-form_field-label"
-              for="lg-form-field-input-65"
-              id="lg-form-field-label-62"
+              for="lg-form_field-input-65"
+              id="lg-form_field-label-62"
             >
               Filter by Failed Tests
             </label>
           </div>
           <div
-            class="leafygreen-ui-95c1iv"
+            class="leafygreen-ui-109lyo9"
           >
             <div
               class="leafygreen-ui-1ago99h"
@@ -36,10 +36,10 @@
                 aria-describedby=""
                 aria-disabled="false"
                 aria-invalid="false"
-                aria-labelledby="lg-form-field-label-62"
+                aria-labelledby="lg-form_field-label-62"
                 autocomplete="on"
                 class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-                id="lg-form-field-input-65"
+                id="lg-form_field-input-65"
                 placeholder="Search test name regex"
                 required=""
                 type="search"
@@ -47,6 +47,14 @@
               />
             </div>
           </div>
+          <div
+            aria-live="polite"
+            aria-relevant="all"
+            class="leafygreen-ui-11ydt2g"
+            data-lgid="lg-form_field-feedback"
+            data-testid="lg-form_field-feedback"
+            id="lg-form_field-feedback-64"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
index ee775b1a5..1515a1b2b 100644
--- a/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
+++ b/apps/spruce/src/components/SpruceForm/__snapshots__/SpruceForm_Example1.storyshot
@@ -184,14 +184,14 @@
                                 class="leafygreen-ui-6bdaia"
                                 data-lgid="lg-label"
                                 data-testid="lg-form_field-label"
-                                for="lg-form-field-input-231"
-                                id="lg-form-field-label-228"
+                                for="lg-form_field-input-231"
+                                id="lg-form_field-label-228"
                               >
                                 key
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-95c1iv"
+                              class="leafygreen-ui-109lyo9"
                             >
                               <div
                                 class="leafygreen-ui-1ago99h"
@@ -200,16 +200,24 @@
                                   aria-describedby=""
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  aria-labelledby="lg-form-field-label-228"
+                                  aria-labelledby="lg-form_field-label-228"
                                   autocomplete="on"
                                   class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-                                  id="lg-form-field-input-231"
+                                  id="lg-form_field-input-231"
                                   required=""
                                   type="text"
                                   value="Sample Input"
                                 />
                               </div>
                             </div>
+                            <div
+                              aria-live="polite"
+                              aria-relevant="all"
+                              class="leafygreen-ui-11ydt2g"
+                              data-lgid="lg-form_field-feedback"
+                              data-testid="lg-form_field-feedback"
+                              id="lg-form_field-feedback-230"
+                            />
                           </div>
                         </div>
                       </div>
@@ -231,14 +239,14 @@
                                 class="leafygreen-ui-6bdaia"
                                 data-lgid="lg-label"
                                 data-testid="lg-form_field-label"
-                                for="lg-form-field-input-235"
-                                id="lg-form-field-label-232"
+                                for="lg-form_field-input-235"
+                                id="lg-form_field-label-232"
                               >
                                 value
                               </label>
                             </div>
                             <div
-                              class="leafygreen-ui-95c1iv"
+                              class="leafygreen-ui-109lyo9"
                             >
                               <div
                                 class="leafygreen-ui-1ago99h"
@@ -247,16 +255,24 @@
                                   aria-describedby=""
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  aria-labelledby="lg-form-field-label-232"
+                                  aria-labelledby="lg-form_field-label-232"
                                   autocomplete="on"
                                   class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-                                  id="lg-form-field-input-235"
+                                  id="lg-form_field-input-235"
                                   required=""
                                   type="text"
                                   value="Sample Input"
                                 />
                               </div>
                             </div>
+                            <div
+                              aria-live="polite"
+                              aria-relevant="all"
+                              class="leafygreen-ui-11ydt2g"
+                              data-lgid="lg-form_field-feedback"
+                              data-testid="lg-form_field-feedback"
+                              id="lg-form_field-feedback-234"
+                            />
                           </div>
                         </div>
                       </div>
diff --git a/apps/spruce/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph_Default.storyshot b/apps/spruce/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph_Default.storyshot
index 3cfefafdf..b4c024130 100644
--- a/apps/spruce/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph_Default.storyshot
+++ b/apps/spruce/src/components/TextInputWithGlyph/__snapshots__/TextInputWithGlyph_Default.storyshot
@@ -13,14 +13,14 @@
           class="leafygreen-ui-6bdaia"
           data-lgid="lg-label"
           data-testid="lg-form_field-label"
-          for="lg-form-field-input-249"
-          id="lg-form-field-label-246"
+          for="lg-form_field-input-249"
+          id="lg-form_field-label-246"
         >
           Some search field
         </label>
       </div>
       <div
-        class="leafygreen-ui-95c1iv"
+        class="leafygreen-ui-109lyo9"
       >
         <div
           class="leafygreen-ui-1ago99h"
@@ -29,10 +29,10 @@
             aria-describedby=""
             aria-disabled="false"
             aria-invalid="false"
-            aria-labelledby="lg-form-field-label-246"
+            aria-labelledby="lg-form_field-label-246"
             autocomplete="on"
             class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-            id="lg-form-field-input-249"
+            id="lg-form_field-input-249"
             placeholder="Search"
             required=""
             type="text"
@@ -40,6 +40,14 @@
           />
         </div>
       </div>
+      <div
+        aria-live="polite"
+        aria-relevant="all"
+        class="leafygreen-ui-11ydt2g"
+        data-lgid="lg-form_field-feedback"
+        data-testid="lg-form_field-feedback"
+        id="lg-form_field-feedback-248"
+      />
     </div>
     <div
       class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/apps/spruce/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation_Default.storyshot b/apps/spruce/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation_Default.storyshot
index 76310bcb5..a7e20f919 100644
--- a/apps/spruce/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation_Default.storyshot
+++ b/apps/spruce/src/components/TextInputWithValidation/__snapshots__/TextInputWithValidation_Default.storyshot
@@ -13,14 +13,14 @@
           class="leafygreen-ui-6bdaia"
           data-lgid="lg-label"
           data-testid="lg-form_field-label"
-          for="lg-form-field-input-253"
-          id="lg-form-field-label-250"
+          for="lg-form_field-input-253"
+          id="lg-form_field-label-250"
         >
           Some search field
         </label>
       </div>
       <div
-        class="leafygreen-ui-95c1iv"
+        class="leafygreen-ui-109lyo9"
       >
         <div
           class="leafygreen-ui-1ago99h"
@@ -29,16 +29,24 @@
             aria-describedby=""
             aria-disabled="false"
             aria-invalid="false"
-            aria-labelledby="lg-form-field-label-250"
+            aria-labelledby="lg-form_field-label-250"
             autocomplete="on"
             class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
-            id="lg-form-field-input-253"
+            id="lg-form_field-input-253"
             required=""
             type="text"
             value=""
           />
         </div>
       </div>
+      <div
+        aria-live="polite"
+        aria-relevant="all"
+        class="leafygreen-ui-11ydt2g"
+        data-lgid="lg-form_field-feedback"
+        data-testid="lg-form_field-feedback"
+        id="lg-form_field-feedback-252"
+      />
     </div>
     <div
       class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/apps/spruce/src/components/TupleSelect/__snapshots__/TupleSelect_Default.storyshot b/apps/spruce/src/components/TupleSelect/__snapshots__/TupleSelect_Default.storyshot
index 2f458f3b0..937bc2ce9 100644
--- a/apps/spruce/src/components/TupleSelect/__snapshots__/TupleSelect_Default.storyshot
+++ b/apps/spruce/src/components/TupleSelect/__snapshots__/TupleSelect_Default.storyshot
@@ -85,7 +85,7 @@
             class="leafygreen-ui-1iyoj2o"
           />
           <div
-            class="leafygreen-ui-95c1iv"
+            class="leafygreen-ui-109lyo9"
           >
             <div
               class="leafygreen-ui-1ago99h"
@@ -106,6 +106,14 @@
               />
             </div>
           </div>
+          <div
+            aria-live="polite"
+            aria-relevant="all"
+            class="leafygreen-ui-11ydt2g"
+            data-lgid="lg-form_field-feedback"
+            data-testid="lg-form_field-feedback"
+            id="lg-form_field-feedback-267"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/apps/spruce/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional_WithConditional.storyshot b/apps/spruce/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional_WithConditional.storyshot
index a6f78bfcc..eccd57985 100644
--- a/apps/spruce/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional_WithConditional.storyshot
+++ b/apps/spruce/src/components/TupleSelectWithRegexConditional/__snapshots__/TupleSelectWithRegexConditional_WithConditional.storyshot
@@ -164,7 +164,7 @@
             class="leafygreen-ui-1iyoj2o"
           />
           <div
-            class="leafygreen-ui-95c1iv"
+            class="leafygreen-ui-109lyo9"
           >
             <div
               class="leafygreen-ui-1ago99h"
@@ -185,6 +185,14 @@
               />
             </div>
           </div>
+          <div
+            aria-live="polite"
+            aria-relevant="all"
+            class="leafygreen-ui-11ydt2g"
+            data-lgid="lg-form_field-feedback"
+            data-testid="lg-form_field-feedback"
+            id="lg-form_field-feedback-274"
+          />
         </div>
         <div
           class="css-4bamt4-IconWrapper e13gwrw80"
diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
index aafd6f27a..a8a459e2b 100644
--- a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
+++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot
@@ -13,14 +13,14 @@
           class="leafygreen-ui-6bdaia"
           data-lgid="lg-label"
           data-testid="lg-form_field-label"
-          for="lg-form-field-input-320"
-          id="lg-form-field-label-317"
+          for="lg-form_field-input-320"
+          id="lg-form_field-label-317"
         >
           Patch Name
         </label>
       </div>
       <div
-        class="leafygreen-ui-95c1iv"
+        class="leafygreen-ui-109lyo9"
       >
         <div
           class="leafygreen-ui-1ago99h"
@@ -29,17 +29,25 @@
             aria-describedby=""
             aria-disabled="false"
             aria-invalid="false"
-            aria-labelledby="lg-form-field-label-317"
+            aria-labelledby="lg-form_field-label-317"
             autocomplete="on"
             class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
             data-cy="patch-name-input"
-            id="lg-form-field-input-320"
+            id="lg-form_field-input-320"
             required=""
             type="text"
             value="test"
           />
         </div>
       </div>
+      <div
+        aria-live="polite"
+        aria-relevant="all"
+        class="leafygreen-ui-11ydt2g"
+        data-lgid="lg-form_field-feedback"
+        data-testid="lg-form_field-feedback"
+        id="lg-form_field-feedback-319"
+      />
     </div>
     <div
       class="css-8i32g1-ButtonWrapper ek3m3u41"
@@ -318,7 +326,7 @@
                         class="leafygreen-ui-1iyoj2o"
                       />
                       <div
-                        class="leafygreen-ui-95c1iv"
+                        class="leafygreen-ui-109lyo9"
                       >
                         <div
                           class="leafygreen-ui-1ago99h"
@@ -331,7 +339,7 @@
                             autocomplete="on"
                             class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
                             data-cy="task-filter-input"
-                            id="lg-form-field-input-329"
+                            id="lg-form_field-input-329"
                             placeholder="Search tasks regex"
                             required=""
                             type="text"
@@ -339,6 +347,14 @@
                           />
                         </div>
                       </div>
+                      <div
+                        aria-live="polite"
+                        aria-relevant="all"
+                        class="leafygreen-ui-11ydt2g"
+                        data-lgid="lg-form_field-feedback"
+                        data-testid="lg-form_field-feedback"
+                        id="lg-form_field-feedback-328"
+                      />
                     </div>
                     <div
                       class="css-4bamt4-IconWrapper e13gwrw80"