diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss index 8d475270b..62f9f436e 100644 --- a/src/registrar/assets/src/sass/_theme/_base.scss +++ b/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; diff --git a/src/registrar/assets/src/sass/_theme/_typography.scss b/src/registrar/assets/src/sass/_theme/_typography.scss index 466b6f975..7c7639a83 100644 --- a/src/registrar/assets/src/sass/_theme/_typography.scss +++ b/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 { diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 572ef6399..289b3da0b 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/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, diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index 545ccf781..3783c0fef 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/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 %} - {{ field.label }} + {% if legend_heading %} +

{{ legend_heading }}

+ {% if widget.attrs.id == 'id_additional_details-has_cisa_representative' %} +

.gov is managed by the Cybersecurity and Infrastructure Security Agency. CISA has 10 regions that some organizations choose to work with. Regional representatives use titles like protective security advisors, cyber security advisors, or election security advisors.

+ {% endif %} {% else %} - {{ field.label }} + {% if span_for_text %} + {{ field.label }} + {% else %} + {{ field.label }} + {% endif %} {% endif %} {% if widget.attrs.required %} - - {% 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' %} + Select one. * + + {% 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 %} * {% endif %} diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 2a581bbd2..86fa79fa3 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -9,15 +9,9 @@ {% block form_fields %} -
- -

Are you working with a CISA regional representative on your domain request?

-

.gov is managed by the Cybersecurity and Infrastructure Security Agency. CISA has 10 regions that some organizations choose to work with. Regional representatives use titles like protective security advisors, cyber security advisors, or election security advisors.

- - +
- Select one. * - {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %} + {% 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?" %} {% 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 @@
- -

Is there anything else you’d like us to know about your domain request?

- - - Select one. * - {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %} + {% 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 #} @@ -45,7 +34,7 @@

Provide details below. *

- {% 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 #} diff --git a/src/registrar/templates/domain_request_other_contacts.html b/src/registrar/templates/domain_request_other_contacts.html index 72e4abd8b..b3c1be8b4 100644 --- a/src/registrar/templates/domain_request_other_contacts.html +++ b/src/registrar/templates/domain_request_other_contacts.html @@ -9,7 +9,7 @@
  • We typically don’t reach out to these employees, but if contact is necessary, our practice is to coordinate with you first.

    • - + {% include "includes/required_fields.html" %} {% endblock %} {% block form_required_fields_help_text %} @@ -17,20 +17,14 @@ {% endblock %} {% block form_fields %} -
    - -

    Are there other employees who can help verify your request?

    -     - - {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %} +
    + {% 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 #} - -
    +
    - {% 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 %} diff --git a/src/registrar/templates/includes/input_with_errors.html b/src/registrar/templates/includes/input_with_errors.html index 31900ac57..80768e2b8 100644 --- a/src/registrar/templates/includes/input_with_errors.html +++ b/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 %} .gov diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index d0f85a231..28a4d4556 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/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)