Change layout architecture of legend + delete button to fix accessibility issue (legend needs to be direct child of fieldset)

src/registrar/assets/js/get-gov.js

@@ -338,30 +338,6 @@ function markForm(e, formLabel){
 
     // Set display to 'none'
     formToRemove.style.display = 'none';
-
-    //
-    // This next block is a hack to fix a page jump when a fielset is set to display none at the start of the formset but still takes
-    // a bit of space in the DOM, causing the content to jump down a bit
-    // 
-    // Get the first hidden fieldset
-    const hiddenFieldset = document.querySelector('.repeatable-form[style="display: none;"]');
-    let targetFieldset = null;
-    // If that first hidden fieldset does not have any sibling out of all the previous siblings that's visible, get the next visible fieldset
-    if (hiddenFieldset && !hiddenFieldset.previousElementSibling.matches('.repeatable-form:not([style="display: none;"])')) {
-      let currentSibling = hiddenFieldset.nextElementSibling;
-      // Iterate through siblings until a visible fieldset is found
-      while (currentSibling) {
-        if (currentSibling.matches(':not([style="display: none;"])')) {
-          targetFieldset = currentSibling;
-          break;
-        }
-        currentSibling = currentSibling.nextElementSibling;
-      }
-    }
-    if (targetFieldset) {
-      // Account for the space the hidden fieldsets at the top of the formset are occupying in the DOM
-      targetFieldset.querySelector('h2').style.marginTop = '1rem';
-    }
   }
   
   // Update h2s on the visible forms only. We won't worry about the forms' identifiers

src/registrar/assets/sass/_theme/_base.scss

@@ -4,6 +4,10 @@
 .sr-only {
   @include sr-only;
 }
+
+.clear-both {
+  clear: both;
+}
  
 * {
   -webkit-font-smoothing: antialiased;

src/registrar/assets/sass/_theme/_forms.scss

@@ -31,3 +31,10 @@
   padding-left: 0;
   border-left: none;
 }
+
+legend.float-left-tablet + button.float-right-tablet {
+  margin-top: .5rem;
+  @include at-media('tablet') {
+    margin-top: 1rem;
+  }
+}

src/registrar/templates/application_other_contacts.html

@@ -34,31 +34,26 @@
         {{ forms.1.management_form }}
         {# forms.1 is a formset and this iterates over its forms #}
         {% for form in forms.1.forms %}
-            <fieldset class="usa-fieldset repeatable-form">
+            <fieldset class="usa-fieldset repeatable-form padding-y-1">
             
-            <div class="grid-row grid-gap-2 flex-end">
+              <legend class="float-left-tablet">
+                  <h2 class="margin-top-1">Organization contact {{ forloop.counter }}</h2>
+              </legend>
 
-                <div class="tablet:grid-col-8">
-                    <legend>
-                        <h2>Organization contact {{ forloop.counter }}</h2>
-                    </legend>
-                </div>    
+              <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2">
+                  <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><span class="margin-left-05">Delete</span>
+              </button>
 
-                <div class="tablet:grid-col-4">
-                    <button type="button" class="usa-button usa-button--unstyled display-block float-right-tablet delete-record margin-bottom-2">
-                        <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><span class="margin-left-05">Delete</span>
-                    </button>
-                </div>
-
-            </div>
 
             {% if forms.1.can_delete %}
               {{ form.DELETE }}
             {% endif %}
 
-            {% input_with_errors form.first_name %}
+            <div class="padding-top-1 clear-both">
+              {% input_with_errors form.first_name %}
+            </div>
 
             {% input_with_errors form.middle_name %}
 
@@ -71,11 +66,11 @@
             affecting the margin of this block. The wrapper div is a 
             temporary workaround. {% endcomment %}
             <div class="margin-top-3">
-                {% input_with_errors form.email %}
+              {% input_with_errors form.email %}
             </div>
 
             {% with add_class="usa-input--medium" %}
-                {% input_with_errors form.phone %}
+              {% input_with_errors form.phone %}
             {% endwith %}
 
             </fieldset>