Merge pull request #3193 from cisagov/es/2913-domain-request-screenreader

2913: Update domain request screenreader outputs [ES]

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

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

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

@@ -34,6 +34,9 @@ h2 {
 .usa-form,
 .usa-form fieldset {
   font-size: 1rem;
+  .usa-legend {
+    font-size: 1rem;
+  }
 }
 
 .p--blockquote {

src/registrar/forms/domain_request_wizard.py

@@ -530,7 +530,7 @@ class PurposeForm(RegistrarForm):
         widget=forms.Textarea(
             attrs={
                 "aria-label": "What is the purpose of your requested domain? Describe how you’ll use your .gov domain. \
-                Will it be used for a website, email, or something else? You can enter up to 2000 characters."
+                Will it be used for a website, email, or something else?"
             }
         ),
         validators=[
@@ -736,7 +736,13 @@ class NoOtherContactsForm(BaseDeletableRegistrarForm):
         required=True,
         # label has to end in a space to get the label_suffix to show
         label=("No other employees rationale"),
-        widget=forms.Textarea(),
+        widget=forms.Textarea(
+            attrs={
+                "aria-label": "You don’t need to provide names of other employees now, \
+                but it may slow down our assessment of your eligibility. Describe \
+                why there are no other employees who can help verify your request."
+            }
+        ),
         validators=[
             MaxLengthValidator(
                 1000,
@@ -784,7 +790,12 @@ class AnythingElseForm(BaseDeletableRegistrarForm):
     anything_else = forms.CharField(
         required=True,
         label="Anything else?",
-        widget=forms.Textarea(),
+        widget=forms.Textarea(
+            attrs={
+                "aria-label": "Is there anything else you’d like us to know about your domain request? \
+                    Provide details below. You can enter up to 2000 characters"
+            }
+        ),
         validators=[
             MaxLengthValidator(
                 2000,

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

@@ -2,15 +2,25 @@
   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 span_for_text %}
+  {% if legend_heading %}
-    <span>{{ field.label }}</span>
+    <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 %}
   {% else %}
-    {{ field.label }}
+    {% if span_for_text %}
+      <span>{{ field.label }}</span>
+    {% else %}
+      {{ field.label }}
+    {% endif %}
   {% endif %}
 
   {% if widget.attrs.required %}
-  <!--Don't add asterisk to one-field forms -->
+
-    {% if field.label == "Is your organization an election office?" or field.label == "What .gov domain do you want?" or field.label == "I read and agree to the requirements for operating a .gov domain." or field.label == "Please explain why there are no other employees from your organization we can contact to help us assess your eligibility for a .gov domain." %}
+    {% if field.widget_type == 'radioselect' %}
+      <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+    <!--Don't add asterisk to one-field forms -->
+    {% elif field.label == "Is your organization an election office?" or field.label == "What .gov domain do you want?" or field.label == "I read and agree to the requirements for operating a .gov domain." or field.label == "Please explain why there are no other employees from your organization we can contact to help us assess your eligibility for a .gov domain." or field.label == "Has other contacts" %}
     {% else %}
       <abbr class="usa-hint usa-hint--required" title="required">*</abbr>
     {% endif %}

src/registrar/templates/domain_request_additional_details.html

@@ -9,15 +9,9 @@
 
 {% block form_fields %}
 
-    <fieldset class="usa-fieldset margin-top-2">
+    <fieldset class="usa-fieldset">
-      <legend>
-        <h2>Are you working with a CISA regional representative on your domain request?</h2>
-        <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>
-      </legend>
-
       <!-- Toggle -->
-      <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+      {% with add_class="usa-radio__input--tile" add_legend_class="margin-top-0" add_legend_heading="Are you working with a CISA regional representative on your domain request?" %}
-      {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
         {% 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 #} 
@@ -31,13 +25,8 @@
     </div>
 
     <fieldset class="usa-fieldset margin-top-2">
-        <legend>
-            <h2>Is there anything else you’d like us to know about your domain request?</h2> 
-        </legend>
-  
         <!-- Toggle -->
-        <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
+        {% with add_class="usa-radio__input--tile" add_legend_heading="Is there anything else you’d like us to know about your domain request?" %}
-        {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
           {% 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 #} 
@@ -45,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" %}
+        {% 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

@@ -9,7 +9,7 @@
       <li><strong>We typically don’t reach out to these employees</strong>, but if contact is necessary, our practice is to coordinate with you first.</li>
     </ul>
   </p>
-
+  {% include "includes/required_fields.html" %}
 {% endblock %}
 
 {% block form_required_fields_help_text %}
@@ -17,20 +17,14 @@
 {% endblock %}
 
 {% block form_fields %}
-    <fieldset class="usa-fieldset margin-top-2">
+    <div class="margin-top-2">
-      <legend>
+      {% with add_class="usa-radio__input--tile" add_legend_heading="Are there other employees who can help verify your request?" %}
-        <h2>Are there other employees who can help verify your request?</h2>
-      </legend>
-
-      {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
         {% 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 #}
-
+    </div>
-    </fieldset>
 
     <div id="other-employees" class="other-contacts-form">
-        {% include "includes/required_fields.html" %}
         {{ forms.1.management_form }}
         {# forms.1 is a formset and this iterates over its forms #}
         {% for form in forms.1.forms %}

src/registrar/templates/includes/input_with_errors.html

@@ -71,7 +71,11 @@ error messages, if necessary.
   {% endif %}
 
   {# this is the input field, itself #}
-  {% include widget.template_name %}
+  {% with aria_label=aria_label %}
+      {% include widget.template_name %}
+  {% endwith %}
+  
+  
 
   {% if append_gov %}
       <span class="padding-top-05 padding-left-2px">.gov </span>

src/registrar/templatetags/field_helpers.py

@@ -57,6 +57,7 @@ def input_with_errors(context, field=None):  # noqa: C901
     legend_classes = []
     group_classes = []
     aria_labels = []
+    legend_headings = []
     sublabel_text = []
 
     # this will be converted to an attribute string
@@ -91,6 +92,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_heading":
+            legend_headings.append(value)
 
         elif key == "add_group_class":
             group_classes.append(value)
@@ -120,9 +123,6 @@ def input_with_errors(context, field=None):  # noqa: C901
     else:
         context["label_tag"] = "label"
 
-    if field.use_fieldset:
-        label_classes.append("usa-legend")
-
     if field.widget_type == "checkbox":
         label_classes.append("usa-checkbox__label")
     elif not field.use_fieldset:
@@ -153,6 +153,9 @@ def input_with_errors(context, field=None):  # noqa: C901
     if legend_classes:
         context["legend_classes"] = " ".join(legend_classes)
 
+    if legend_headings:
+        context["legend_heading"] = " ".join(legend_headings)
+
     if group_classes:
         context["group_classes"] = " ".join(group_classes)