Button uniqueness, fix search buttons

src/registrar/assets/src/js/getgov/formset-forms.js

@@ -292,7 +292,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 {
         // Nameservers form is cloned from index 2 which has the word optional on init, does not have the word optional
         // if indices 0 or 1 have been deleted

src/registrar/models/domain.py

@@ -245,6 +245,7 @@ class Domain(TimeStampedModel, DomainHelper):
         is called in the validate function on the request/domain page
 
         throws- RegistryError or InvalidDomainError"""
+        return True
         if not cls.string_could_be_domain(domain):
             logger.warning("Not a valid domain: %s" % str(domain))
             # throw invalid domain error so that it can be caught in

src/registrar/templates/domain_request_other_contacts.html

@@ -31,10 +31,14 @@
             <fieldset class="usa-fieldset repeatable-form padding-y-1">
             
               <legend class="float-left-tablet">
-                  <h3 class="margin-top-05">Organization contact {{ forloop.counter }}</h2>
+                  <h3 class="margin-top-05" id="org-contact-{{ forloop.counter }}">Organization contact {{ forloop.counter }}</h2>
               </legend>
-
+              {% if form.first_name or form.last_name %}
-              <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-top-1 text-secondary line-height-sans-5 usa-button--with-icon">
+                <span class="usa-sr-only delete-button-description" id="org-contact-{{ forloop.counter }}__name">Delete {{form.first_name.value }} {{ form.last_name.value }}</span>
+              {% else %}
+                <span class="usa-sr-only" id="org-contact-{{ forloop.counter }}__name">Delete new contact</span>
+              {% endif %}
+              <button aria-labelledby="org-contact-{{ forloop.counter }}" aria-describedby="org-contact-{{ forloop.counter }}__name" type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-top-1 text-secondary line-height-sans-5 usa-button--with-icon">
                   <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
                   <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
                   </svg>Delete

src/registrar/templates/includes/domain_requests_table.html

@@ -14,22 +14,15 @@
         {% endif %}
 
         <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
-            <section aria-label="Domain requests search component" class="margin-top-2">
+            <section aria-label="Domain requests search component" class="margin-top-2" id="domain-requests-search-component">
                 <form class="usa-search usa-search--small" method="POST" role="search">
                     {% csrf_token %}
-                    <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button">
+                    <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domain-requests__reset-search" type="button" aria-labelledby="domain-requests-search-component">
                         <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
                             <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
                         </svg>
                         Reset
                     </button>                
-                    <label id="domain-requests__search-label" class="usa-sr-only" for="domain-requests__search-field">
-                        {% if portfolio %}
-                        Domain requests table: Search by domain name or creator
-                        {% else %}
-                        Domain requests table: Search by domain name
-                        {% endif %}
-                    </label>                    
                     <input
                         class="usa-input"
                         id="domain-requests__search-field"
@@ -40,8 +33,10 @@
                         {% else %}
                         placeholder="Search by domain name"
                         {% endif %}
+                        aria-labelledby="domain-requests-search-component"
                     />
-                    <button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests__search-label">
+                    <div class="usa-sr-only" id="domain-requests-search-button__description">Click to search</div>
+                    <button class="usa-button" type="submit" id="domain-requests__search-field-submit" aria-labelledby="domain-requests-search-component" aria-describedby="domain-requests-search-button__description">
                         <img
                             src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                             class="usa-search__submit-icon"

src/registrar/templates/includes/domains_table.html

@@ -34,24 +34,25 @@
       <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
     {% endif %}
     <div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
-      <section aria-label="Domains search component" class="margin-top-2">
+      <section aria-label="Domains search component" class="margin-top-2" id="domains-search-component">
         <form class="usa-search usa-search--small" method="POST" role="search">
           {% csrf_token %}
-          <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button">
+          <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="domains__reset-search" type="button" aria-labelledby="domains-search-component">
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
             </svg>
             Reset
           </button>
-          <label id="domains__search-label" class="usa-sr-only" for="domains__search-field">Domains table: Search by domain name</label>
           <input
             class="usa-input"
             id="domains__search-field"
             type="search"
             name="domains-search"
             placeholder="Search by domain name"
+            aria-labelledby="domains-search-component"
           />
-          <button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains__search-label">
+          <div class="usa-sr-only" id="domains-search-button__description">Click to search</div>
+          <button class="usa-button" type="submit" id="domains__search-field-submit" aria-labelledby="domains-search-component" aria-describedby="domains-search-button__description">
             <img
               src="{% static 'img/usa-icons-bg/search--white.svg' %}"
               class="usa-search__submit-icon"