diff --git a/src/registrar/assets/src/js/getgov/formset-forms.js b/src/registrar/assets/src/js/getgov/formset-forms.js index 17ead9aeb..b4a40e5cf 100644 --- a/src/registrar/assets/src/js/getgov/formset-forms.js +++ b/src/registrar/assets/src/js/getgov/formset-forms.js @@ -215,7 +215,18 @@ export function initFormsetsForms() { // For the other contacts form, we need to update the fieldset headers based on what's visible vs hidden, // since the form on the backend employs Django's DELETE widget. let totalShownForms = document.querySelectorAll(`.repeatable-form:not([style*="display: none"])`).length; - newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${totalShownForms + 1}`); + let newFormCount = totalShownForms + 1; + // update the header + let header = newForm.querySelector('legend h3'); + header.textContent = `${formLabel} ${newFormCount}`; + header.id = `org-contact-${newFormCount}`; + // update accessibility elements on the delete buttons + let deleteDescription = newForm.querySelector('.delete-button-description'); + deleteDescription.textContent = 'Delete new contact'; + deleteDescription.id = `org-contact-${newFormCount}__name`; + let deleteButton = newForm.querySelector('button'); + deleteButton.setAttribute("aria-labelledby", header.id); + deleteButton.setAttribute("aria-describedby", deleteDescription.id); } else { newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `${formLabel} ${formNum}`); } diff --git a/src/registrar/templates/domain_request_dotgov_domain.html b/src/registrar/templates/domain_request_dotgov_domain.html index 91373609d..9edba1612 100644 --- a/src/registrar/templates/domain_request_dotgov_domain.html +++ b/src/registrar/templates/domain_request_dotgov_domain.html @@ -61,7 +61,7 @@