Merge pull request #2051 from usagov/usagov-1955-report-issue-error-h…

…andling usagov-1955-report-issue-error-handling: update code to make error bo…
usagov · Nov 6, 2024 · 81f343b · 81f343b
2 parents b14a4bd + 6552769
commit 81f343b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/web/themes/custom/usagov/scripts/reportAProblem.js b/web/themes/custom/usagov/scripts/reportAProblem.js
@@ -57,7 +57,7 @@ function fieldValidation() {
         label.after(
           '<span id="' +
             errorId +
-            '" class="err-label usa-error" tabindex="0">' +
+            '" class="err-label usa-error" tabindex="-1">' +
             error +
             "</span>"
         );
@@ -92,7 +92,7 @@ function fieldValidation() {
   // If there is at least 1 error, focus the screen on the first error message.
   if (!noErrors) {
     var elem = document.querySelector(".err-label");
-    elem.focus();
+    // elem.focus();   // commented out so focus can goto the error box first
     var viewportOffset = elem.getBoundingClientRect();
     var top = viewportOffset.top;
     if (top < 108) {

diff --git a/...ates/field--node--field-custom-twig-content-reporte-problemas-en-este-sitio-web.html.twig b/...ates/field--node--field-custom-twig-content-reporte-problemas-en-este-sitio-web.html.twig
@@ -6,20 +6,20 @@
 		<div class="usa-alert__body">
 			<h2 class="usa-alert__heading">Su información contiene errores</h2>
 			<li id="alert_error_00NU0000004z90C" class="usa-alert__text usa-error--alert">
-				<a href="#label_name"><span>Escriba su nombre</span></a>
+				<a href="#00NU0000004z90C"><span>Escriba su nombre</span></a>
 			</li>
 			<li id="alert_error_email" class="usa-alert__text usa-error--alert">
-				<a href="#label_email"><span>Escriba su email</span></a>
+				<a href="#email"><span>Escriba su email</span></a>
 			</li>
 			<li id="alert_error_description" class="usa-alert__text usa-error--alert">
-				<a href="#label_description"><span>Escriba la descripción</span></a>
+				<a href="#description"><span>Escriba la descripción</span></a>
 			</li>
-			<li id="alert_error_recaptcha_large" class="usa-alert__text usa-error--alert">
+			{# <li id="alert_error_recaptcha_large" class="usa-alert__text usa-error--alert">
 				<a href="#recaptcha-large-container"><span>Complete el reCaptcha</span></a>
 			</li>
 			<li id="alert_error_recaptcha_small" class="usa-alert__text usa-error--alert">
 				<a href="#recaptcha-small-container"><span>Fill out the reCaptcha</span></a>
-			</li>
+			</li> #}
 			</ul>
 		</div>
 	</div>
@@ -58,7 +58,7 @@
 								maxlength="255"
 								size="40"
 								required
-								data-error="Escriba su nombre"
+								data-error="Error: Escriba su nombre"
 								data-name="First Name"
 							/>
 						</p>
@@ -75,7 +75,7 @@
 								maxlength="80"
 								size="40"
 								required\
-								data-error="Escriba su email"
+								data-error="Error: Escriba su email"
 								data-name="Email Address"
 							/>
 						</p>
@@ -94,7 +94,7 @@
 								rows="10"
 								maxlength="1000"
 								required
-								data-error="Escriba la descripción"
+								data-error="Error: Escriba la descripción"
 								data-name="Description"
 							></textarea>
 							<text class="usa-description" id="report-issue-box-es">Por favor limite su comentario a 1000 caracteres.</text>

diff --git a/.../usagov/templates/field--node--field-custom-twig-content-site-issue-report-form.html.twig b/.../usagov/templates/field--node--field-custom-twig-content-site-issue-report-form.html.twig
@@ -6,19 +6,19 @@
 		<div class="usa-alert__body">
 			<h2 class="usa-alert__heading">Your information contains errors</h2>
 			<li id="alert_error_00NU0000004z90C" class="usa-alert__text usa-error--alert">
-				<a href="#label_name"><span>Fill out the name field</span></a>
+				<a href="#00NU0000004z90C"><span>Fill out the name field</span></a>
 			</li>
 			<li id="alert_error_email" class="usa-alert__text usa-error--alert">
-				<a href="#label_email"><span>Fill out the email field</span></a>
+				<a href="#email"><span>Fill out the email field</span></a>
 			</li>
 			<li id="alert_error_description" class="usa-alert__text usa-error--alert">
-				<a href="#label_description"><span>Fill out the description field</span></a>
+				<a href="#description"><span>Fill out the description field</span></a>
 			</li>
-			<li id="alert_error_recaptcha_large" class="usa-alert__text usa-error--alert">
+			{# <li id="alert_error_recaptcha_large" class="usa-alert__text usa-error--alert">
 				<a href="#recaptcha-large-container"><span>Fill out the reCaptcha</span></a>
 			</li>
 			<li id="alert_error_recaptcha_small" class="usa-alert__text usa-error--alert">
-				<a href="#recaptcha-small-container"><span>Fill out the reCaptcha</span></a>
+				<a href="#recaptcha-small-container"><span>Fill out the reCaptcha</span></a> #}
 			</li>
 			</ul>
 		</div>
@@ -58,7 +58,7 @@
 								maxlength="255"
 								size="40"
 								required
-								data-error="Fill out the name field"
+								data-error="Error: Fill out the name field"
 								data-name="First Name"
 							/>
 						</p>
@@ -75,7 +75,7 @@
 								maxlength="80"
 								size="40"
 								required
-								data-error="Fill out the email field"
+								data-error="Error: Fill out the email field"
 								data-name="Email Address"
 							/>
 						</p>
@@ -94,7 +94,7 @@
 								rows="10"
 								maxlength="1000"
 								required
-								data-error="Fill out the description field"
+								data-error="Error: Fill out the description field"
 								data-name="Description"
 							></textarea>
 							<text class="usa-description" id="report-issue-box">Maximum length is 1000 characters.</text>