Refactor legend heading

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

@@ -149,6 +149,14 @@ footer {
   color: color('primary');
 }
 
+.usa-footer {
+  margin-bottom: 0.5rem;
+}
+
+.usa-radio {
+  margin-top: 1rem;
+}
+
 abbr[title] {
   // workaround for underlining abbr element
   border-bottom: none;

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

@@ -27,9 +27,8 @@ h2 {
 .usa-form,
 .usa-form fieldset {
   font-size: 1rem;
-  legend em {
+  .usa-legend {
     font-size: 1rem;
-    margin-bottom: 0.5rem;
   }
 }
 

src/registrar/templates/django/forms/label.html

@@ -2,8 +2,8 @@
   class="{% if label_classes %} {{ label_classes }}{% endif %}{% if label_tag == 'legend' %} {{ legend_classes }}{% endif %}"
   {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% endif %}
 >
-  {% if legend_label %}
+  {% if legend_heading %}
-    <h2 class="{{ legend_classes }}">{{ legend_label }} </h2>
+    <h2 class="{{ legend_classes }}">{{ legend_heading }} </h2>
     {% if widget.attrs.id == 'id_additional_details-has_cisa_representative' %}
       <p>.gov is managed by the Cybersecurity and Infrastructure Security Agency. CISA has <a href="https://www.cisa.gov/about/regions" target="_blank">10 regions</a> that some organizations choose to work with. Regional representatives use titles like protective security advisors, cyber security advisors, or election security advisors.</p>
     {% endif %}

src/registrar/templates/domain_request_additional_details.html

@@ -9,9 +9,9 @@
 
 {% block form_fields %}
 
-    <fieldset class="usa-fieldset margin-top-2">
+    <fieldset class="usa-fieldset">
       <!-- Toggle -->
-      {% with add_class="usa-radio__input--tile" add_legend_label="Are you working with a CISA regional representative on your domain request?" %}
+      {% with add_class="usa-radio__input--tile" add_legend_heading="Are you working with a CISA regional representative on your domain request?" %}
         {% input_with_errors forms.0.has_cisa_representative %}
       {% endwith %}
       {# forms.0 is a small yes/no form that toggles the visibility of "cisa representative" formset #} 
@@ -26,7 +26,7 @@
 
     <fieldset class="usa-fieldset margin-top-2">
         <!-- Toggle -->
-        {% with add_class="usa-radio__input--tile" add_legend_label="Is there anything else you’d like us to know about your domain request?" %}
+        {% with add_class="usa-radio__input--tile" add_legend_heading="Is there anything else you’d like us to know about your domain request?" %}
           {% input_with_errors forms.2.has_anything_else_text %}
         {% endwith %}
         {# forms.2 is a small yes/no form that toggles the visibility of "cisa representative" formset #} 
@@ -34,7 +34,7 @@
   
     <div class="margin-top-3" id="anything-else">
         <p>Provide details below. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></p>
-        {% with attr_maxlength=2000 add_label_class="usa-sr-only" add_legend_class="usa-sr-only" add_legend_label="Is there anything else you’d like us to know about your domain request?" add_aria_label="Provide details below. You can enter up to 2000 characters" %}
+        {% with attr_maxlength=2000 add_label_class="usa-sr-only" add_legend_class="usa-sr-only" add_legend_heading="Is there anything else you’d like us to know about your domain request?" add_aria_label="Provide details below. You can enter up to 2000 characters" %}
             {% input_with_errors forms.3.anything_else %}
         {% endwith %}
         {# forms.3 is a form for inputting the e-mail of a cisa representative #}

src/registrar/templates/domain_request_other_contacts.html

@@ -18,7 +18,7 @@
 
 {% block form_fields %}
     <div class="margin-top-2">
-      {% with add_class="usa-radio__input--tile" add_legend_label="Are there other employees who can help verify your request?" %}
+      {% with add_class="usa-radio__input--tile" add_legend_heading="Are there other employees who can help verify your request?" %}
         {% input_with_errors forms.0.has_other_contacts %}
       {% endwith %}
       {# forms.0 is a small yes/no form that toggles the visibility of "other contact" formset #}

src/registrar/templatetags/field_helpers.py

@@ -57,7 +57,7 @@ def input_with_errors(context, field=None):  # noqa: C901
     legend_classes = []
     group_classes = []
     aria_labels = []
-    legend_labels = []
+    legend_headings = []
 
     # this will be converted to an attribute string
     described_by = []
@@ -91,8 +91,8 @@ def input_with_errors(context, field=None):  # noqa: C901
             label_classes.append(value)
         elif key == "add_legend_class":
             legend_classes.append(value)
-        elif key == "add_legend_label":
+        elif key == "add_legend_heading":
-            legend_labels.append(value)
+            legend_headings.append(value)
 
         elif key == "add_group_class":
             group_classes.append(value)
@@ -152,8 +152,8 @@ def input_with_errors(context, field=None):  # noqa: C901
     if legend_classes:
         context["legend_classes"] = " ".join(legend_classes)
 
-    if legend_labels:
+    if legend_headings:
-        context["legend_label"] = " ".join(legend_labels)
+        context["legend_heading"] = " ".join(legend_headings)
 
     if group_classes:
         context["group_classes"] = " ".join(group_classes)