Merge branch 'main' into ad/3256-new-changes-on-name-servers-page

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}`);
       }

src/registrar/templates/domain_request_dotgov_domain.html

@@ -61,7 +61,7 @@
 
   <fieldset class="usa-fieldset margin-top-1 dotgov-domain-form" id="form-container">
     <legend>
-      <h2>Alternative domains (optional)</h2>
+      <h2 id="alternative-domains-title">Alternative domains (optional)</h2>
     </legend>
 
     <p id="alt_domain_instructions" class="margin-top-05">Are there other domains you’d like if we can’t give
@@ -79,19 +79,23 @@
         {% endfor %}
       {% endwith %}
     {% endwith %}
-
+    
-    <button type="button" value="save" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
+    <div class="usa-sr-only" id="alternative-domains__add-another-alternative">Add another alternative domain</div> 
+    <button aria-labelledby="alternative-domains-title" aria-describedby="alternative-domains__add-another-alternative" type="button" value="save" class="usa-button usa-button--unstyled usa-button--with-icon" id="add-form">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
       </svg><span class="margin-left-05">Add another alternative</span>
     </button>
 
     <div class="margin-bottom-3">
+      <div class="usa-sr-only" id="alternative-domains__check-availability">Check domain availability</div> 
       <button
       id="validate-alt-domains-availability"
       type="button"
       class="usa-button usa-button--outline"
       validate-for="{{ forms.1.requested_domain.auto_id }}"
+      aria-labelledby="alternative-domains-title"
+      aria-describedby="alternative-domains__check-availability"
       >Check availability</button>
     </div>
     

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" id="domain-requests-search-component" class="margin-top-2">
                 <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>
+                    </button>                
-                    <label id="domain-requests__search-label" class="usa-sr-only" for="domain-requests__search-field">
-                        {% if portfolio %}
-                            Search by domain name or creator
-                        {% else %}
-                            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">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"
@@ -63,12 +64,13 @@
     </div>
     {% if user_domain_count and user_domain_count > 0 %}
     <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
-      <section aria-label="Domains report component" class="margin-top-205">
+      <section aria-label="Domains report component" class="margin-top-205" id="domains-report-component">
-        <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
+        <div class="usa-sr-only" id="domains-export-button__description">Click to export as csv</div>
+        <button data-href="{% url 'export_data_type_user' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="domains-report-component" aria-describedby="domains-export-button__description">
           <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
             <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
           </svg>Export as CSV
-        </a>
+        </button>
       </section>
     </div>
     {% endif %}

src/registrar/templates/includes/form_errors.html

@@ -1,16 +1,18 @@
 {% 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" role="alert">
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert" tabindex="0">
     <div class="usa-alert__body">
-    {{ error|escape }}
+      <span class="usa-sr-only">Error:</span>
+      {{ error|escape }}
     </div>
     </div>
   {% endfor %}
   {% for field in form %}
   {% for error in 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" tabindex="0">
       <div class="usa-alert__body">
+        <span class="usa-sr-only">Error:</span>
         {{ error|escape }}
       </div>
     </div>

src/registrar/templates/includes/members_table.html

@@ -9,24 +9,25 @@
   <div class="section-outlined__header margin-bottom-3 grid-row">
       <!-- ---------- SEARCH ---------- -->
       <div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-6 section-outlined__search--widescreen">
-        <section aria-label="Members search component" class="margin-top-2">
+        <section aria-label="Members search component" class="margin-top-2" id="members-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="members__reset-search" type="button">
+            <button class="usa-button usa-button--unstyled margin-right-3 display-none" id="members__reset-search" type="button" aria-labelledby="members-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 class="usa-sr-only" for="members__search-field">Search by member name</label>
             <input
               class="usa-input"
               id="members__search-field"
               type="search"
               name="members-search"
               placeholder="Search by member name"
+              aria-labelledby="members-search-component"
             />
-            <button class="usa-button" type="submit" id="members__search-field-submit">
+            <div class="usa-sr-only" id="members-search-button__description">Click to search</div>
+            <button class="usa-button" type="submit" id="members__search-field-submit" aria-labelledby="members-search-component" aria-describedby="members-search-button__description">
               <img
                 src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                 class="usa-search__submit-icon"
@@ -37,12 +38,13 @@
         </section>
       </div>
       <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
-        <section aria-label="Domains report component" class="margin-top-205">
+        <section aria-label="Members report component" class="margin-top-205" id="members-report-component">
-          <a href="{% url 'export_members_portfolio' %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
+          <div class="usa-sr-only" id="members-export-button__description">Click to export as csv</div>
+          <button href="{% url 'export_members_portfolio' %}" class="use-button-as-link usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right" aria-labelledby="members-report-component" aria-describedby="members-export-button__description">
             <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
             </svg>Export as CSV
-          </a>
+          </button>
         </section>
       </div>
     </div>