merge 2908 and 2909 into bundle

src/registrar/assets/src/js/getgov/form-errors.js

@@ -0,0 +1,19 @@
+export function initFormErrorHandling() {
+  document.addEventListener('DOMContentLoaded', function() {
+    const errorSummary = document.getElementById('form-errors');
+    const firstErrorField = document.querySelector('.usa-input--error');
+    if (firstErrorField) {
+      // Scroll to the first field in error
+      firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  
+      // Add focus to the first field in error
+      setTimeout(() => {
+        firstErrorField.focus();
+      }, 50);
+    } else if (errorSummary) {
+      // Focus on the error summary for screen reader users
+      errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+  });
+}

src/registrar/assets/src/js/getgov/main.js

@@ -15,6 +15,7 @@ import { initDomainRequestForm } from './domain-request-form.js';
 import { initDomainManagersPage } from './domain-managers.js';
 import { initDomainDSData } from './domain-dsdata.js';
 import { initDomainDNSSEC } from './domain-dnssec.js';
+import { initFormErrorHandling } from './form-errors.js';
 
 initDomainValidators();
 
@@ -45,8 +46,9 @@ initDomainManagersPage();
 initDomainDSData();
 initDomainDNSSEC();
 
+initFormErrorHandling();
+
 // Init the portfolio new member page
 initPortfolioMemberPageRadio();
 initPortfolioNewMemberPageToggle();
 initAddNewMemberPageListeners();
-//ignore, testing why test fails in pipeline

src/registrar/templates/includes/form_errors.html

@@ -1,6 +1,7 @@
 {% if form.errors %}
+  <div id="form-errors">
   {% for error in form.non_field_errors %}
-    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2">
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
     <div class="usa-alert__body">
     {{ error|escape }}
     </div>
@@ -14,5 +15,6 @@
       </div>
     </div>
   {% endfor %}
-{% endfor %}
+  {% endfor %}
+  </div>
 {% endif %}