From f918720383561bcad51f6ad6a66a3fe8245fa885 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 21 Nov 2024 14:57:48 -0800 Subject: [PATCH 01/21] Add screenreader text to no other contacts form --- src/registrar/forms/domain_request_wizard.py | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index c7f5571af..a619aec26 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -733,7 +733,14 @@ 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. \ + You can enter up to 1000 characters." + } + ), validators=[ MaxLengthValidator( 1000, From e76571eb50d4eead1429aa936ff96b48259172d2 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:05:08 -0800 Subject: [PATCH 02/21] Remove unused legends from radio groups --- src/registrar/forms/domain_request_wizard.py | 1 + .../forms/utility/wizard_form_helper.py | 10 +++++- .../templates/django/forms/label.html | 36 +++++++++++-------- .../templates/includes/input_with_errors.html | 6 +++- src/registrar/templatetags/field_helpers.py | 1 + 5 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index a619aec26..5d8f23057 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -544,6 +544,7 @@ class OtherContactsYesNoForm(BaseYesNoForm): """The yes/no field for the OtherContacts form.""" form_choices = ((True, "Yes, I can name other employees."), (False, "No. (We’ll ask you to explain why.)")) + title_label = "Are there other employees who can help verify your request?" field_name = "has_other_contacts" @property diff --git a/src/registrar/forms/utility/wizard_form_helper.py b/src/registrar/forms/utility/wizard_form_helper.py index eedf5839b..22c70b010 100644 --- a/src/registrar/forms/utility/wizard_form_helper.py +++ b/src/registrar/forms/utility/wizard_form_helper.py @@ -239,6 +239,10 @@ class BaseYesNoForm(RegistrarForm): # Default form choice mapping. Default is suitable for most cases. form_choices = ((True, "Yes"), (False, "No")) + # Option to append question to aria label for screenreader accessibility. + # Not added by default. + aria_label = "" + def __init__(self, *args, **kwargs): """Extend the initialization of the form from RegistrarForm __init__""" super().__init__(*args, **kwargs) @@ -256,7 +260,11 @@ def get_typed_choice_field(self): coerce=lambda x: x.lower() == "true" if x is not None else None, choices=self.form_choices, initial=self.get_initial_value(), - widget=forms.RadioSelect, + widget=forms.RadioSelect( + attrs={ + "aria-label": self.aria_label + } + ), error_messages={ "required": self.required_error_message, }, diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index 545ccf781..e4d7842fa 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -1,19 +1,25 @@ -<{{ label_tag }} - 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 }} - {% else %} - {{ field.label }} - {% endif %} + +{% if not type == "radio" and not label_tag == "legend" %} + <{{ label_tag }} + class="{% if label_classes %} {{ label_classes }}{% endif %}{% if label_tag == 'legend' %} {{ legend_classes }}{% endif %}" + {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% 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 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." %} + {% else %} + * + {% endif %} + {% endif %} + +{% if not type == "radio" and not label_tag == "legend" %} + +{% endif %} diff --git a/src/registrar/templates/includes/input_with_errors.html b/src/registrar/templates/includes/input_with_errors.html index d1e53968e..d239954a0 100644 --- a/src/registrar/templates/includes/input_with_errors.html +++ b/src/registrar/templates/includes/input_with_errors.html @@ -68,7 +68,11 @@ {% 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 8a80a75b9..d2bca13fb 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/src/registrar/templatetags/field_helpers.py @@ -169,5 +169,6 @@ def input_with_errors(context, field=None): # noqa: C901 ) # -> {"widget": {"name": ...}} context["widget"] = widget["widget"] + print("context: ", context) return context From 36b78e9cea8207cf14b64c11271a3bbe6033464a Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Fri, 22 Nov 2024 11:43:31 -0800 Subject: [PATCH 03/21] Refactor legends from two separate legends to one combined legend --- .../forms/utility/wizard_form_helper.py | 5 +++-- .../templates/django/forms/label.html | 21 +++++++++---------- .../domain_request_other_contacts.html | 11 +++------- src/registrar/templatetags/field_helpers.py | 6 ++++++ 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/registrar/forms/utility/wizard_form_helper.py b/src/registrar/forms/utility/wizard_form_helper.py index 22c70b010..d48f7af64 100644 --- a/src/registrar/forms/utility/wizard_form_helper.py +++ b/src/registrar/forms/utility/wizard_form_helper.py @@ -241,7 +241,8 @@ class BaseYesNoForm(RegistrarForm): # Option to append question to aria label for screenreader accessibility. # Not added by default. - aria_label = "" + title_label = "" + aria_label = title_label.join("") def __init__(self, *args, **kwargs): """Extend the initialization of the form from RegistrarForm __init__""" @@ -262,7 +263,7 @@ def get_typed_choice_field(self): initial=self.get_initial_value(), widget=forms.RadioSelect( attrs={ - "aria-label": self.aria_label + # "aria-label": self.title_label } ), error_messages={ diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index e4d7842fa..eb9604dec 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -1,25 +1,24 @@ -{% if not type == "radio" and not label_tag == "legend" %} - <{{ label_tag }} - class="{% if label_classes %} {{ label_classes }}{% endif %}{% if label_tag == 'legend' %} {{ legend_classes }}{% endif %}" - {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% endif %} - > -{% endif %} - +<{{ label_tag }} + 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 %} +

{{ legend_label }}

+ {% else %} {% 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.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 %} {% endif %} -{% if not type == "radio" and not label_tag == "legend" %} - -{% endif %} + diff --git a/src/registrar/templates/domain_request_other_contacts.html b/src/registrar/templates/domain_request_other_contacts.html index 72e4abd8b..93fafe872 100644 --- a/src/registrar/templates/domain_request_other_contacts.html +++ b/src/registrar/templates/domain_request_other_contacts.html @@ -17,17 +17,12 @@ {% 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_label="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" %} diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index d2bca13fb..31ceb1072 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_labels = [] # this will be converted to an attribute string described_by = [] @@ -90,6 +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": + legend_labels.append(value) elif key == "add_group_class": group_classes.append(value) @@ -149,6 +152,9 @@ def input_with_errors(context, field=None): # noqa: C901 if legend_classes: context["legend_classes"] = " ".join(legend_classes) + if legend_labels: + context["legend_label"] = " ".join(legend_labels) + if group_classes: context["group_classes"] = " ".join(group_classes) From 3f66face606cf13c916490b1d5bc1e6fdbdded12 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Fri, 22 Nov 2024 11:43:54 -0800 Subject: [PATCH 04/21] Remove outdated comment --- src/registrar/templates/django/forms/label.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index eb9604dec..27407247b 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -1,4 +1,3 @@ - <{{ label_tag }} class="{% if label_classes %} {{ label_classes }}{% endif %}{% if label_tag == 'legend' %} {{ legend_classes }}{% endif %}" {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% endif %} From 394a04d47d173978b03a3ab2ce569dc55681f118 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Mon, 2 Dec 2024 12:28:39 -0800 Subject: [PATCH 05/21] Save changes --- src/registrar/templates/django/forms/label.html | 3 +++ .../templates/domain_request_additional_details.html | 9 ++++++--- src/registrar/templatetags/field_helpers.py | 1 - 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index 27407247b..3fbb6b7af 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -4,6 +4,9 @@ > {% if legend_label %}

{{ legend_label }}

+ {% 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 %} {% if span_for_text %} {{ field.label }} diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 2a581bbd2..454fbc8e4 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -10,14 +10,17 @@ {% block form_fields %}
- + + +

.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_label="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 #} diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index 31ceb1072..6cf671931 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/src/registrar/templatetags/field_helpers.py @@ -175,6 +175,5 @@ def input_with_errors(context, field=None): # noqa: C901 ) # -> {"widget": {"name": ...}} context["widget"] = widget["widget"] - print("context: ", context) return context From 7b1e2662dd9776cad7f236295223eb15fcfa5768 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Tue, 3 Dec 2024 10:43:30 -0800 Subject: [PATCH 06/21] Add select instructions to radio fields --- src/registrar/templates/django/forms/label.html | 13 ++++++++----- .../domain_request_additional_details.html | 3 --- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index 3fbb6b7af..422186522 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -15,12 +15,15 @@

{{ legend_label }}

{% endif %} {% endif %} - {% if widget.attrs.required %} + {% if widget.attrs.required %} + + {% if field.widget_type == 'radioselect' %} + Select one. * - {% 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." or field.label == "Has other contacts" %} - {% else %} - * - {% endif %} + {% 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 %} + {% endif %} diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 454fbc8e4..d09ec6966 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -15,9 +15,6 @@

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.

--> -

.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_label="Are you working with a CISA regional representative on your domain request?" %} From ab05cb7e4674e261de8154ae63a958b26fb91638 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Tue, 3 Dec 2024 12:16:20 -0800 Subject: [PATCH 07/21] Add select text to radios --- src/registrar/assets/sass/_theme/_typography.scss | 3 +++ src/registrar/templates/domain_request_additional_details.html | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/registrar/assets/sass/_theme/_typography.scss b/src/registrar/assets/sass/_theme/_typography.scss index d815ef6dd..3b3958b9b 100644 --- a/src/registrar/assets/sass/_theme/_typography.scss +++ b/src/registrar/assets/sass/_theme/_typography.scss @@ -27,6 +27,9 @@ h2 { .usa-form, .usa-form fieldset { font-size: 1rem; + legend em { + font-size: 1rem; + } } .p--blockquote { diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index d09ec6966..74a024c9b 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -16,7 +16,6 @@

Are you working with a CISA regional representative on your domain request?< --> - Select one. * {% with add_class="usa-radio__input--tile" add_legend_label="Are you working with a CISA regional representative on your domain request?" %} {% input_with_errors forms.0.has_cisa_representative %} {% endwith %} From 1beb0947f7273ce200adc62b9851c0fef60feefb Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:26:29 -0800 Subject: [PATCH 08/21] Refactor additional details radio --- src/registrar/assets/sass/_theme/_typography.scss | 1 + .../templates/domain_request_additional_details.html | 12 +----------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_typography.scss b/src/registrar/assets/sass/_theme/_typography.scss index 3b3958b9b..c60b7d802 100644 --- a/src/registrar/assets/sass/_theme/_typography.scss +++ b/src/registrar/assets/sass/_theme/_typography.scss @@ -29,6 +29,7 @@ h2 { font-size: 1rem; legend em { font-size: 1rem; + margin-bottom: 0.5rem; } } diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 74a024c9b..386a7a4af 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -10,11 +10,6 @@ {% block form_fields %}
- - {% with add_class="usa-radio__input--tile" add_legend_label="Are you working with a CISA regional representative on your domain request?" %} {% input_with_errors forms.0.has_cisa_representative %} @@ -30,13 +25,8 @@

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

- -

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_label="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 #} From 780b53b3fca83544cfa3ef38eaa9e40982a6fe62 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:31:57 -0800 Subject: [PATCH 09/21] Moved required fields text in other contacts form --- src/registrar/templates/domain_request_other_contacts.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/registrar/templates/domain_request_other_contacts.html b/src/registrar/templates/domain_request_other_contacts.html index 93fafe872..035fe442b 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 %} @@ -25,7 +25,6 @@
    - {% 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 %} From 8154d25873208a08234c34490253ecdbb8d867a3 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:55:25 -0800 Subject: [PATCH 10/21] Add aria label for additional details form --- src/registrar/forms/domain_request_wizard.py | 7 ++++++- src/registrar/templates/django/forms/label.html | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 5d8f23057..5ce50dc0c 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -789,7 +789,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 422186522..2852ce2ba 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/src/registrar/templates/django/forms/label.html @@ -3,7 +3,7 @@ {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% endif %} > {% if legend_label %} -

    {{ legend_label }}

    +

    {{ legend_label }}

    {% 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 %} From b9ea3d884665f863f18cc3852af6f1de6b97a469 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:31:58 -0800 Subject: [PATCH 11/21] Save changes --- src/registrar/forms/domain_request_wizard.py | 7 +------ .../templates/domain_request_additional_details.html | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 5ce50dc0c..5d8f23057 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -789,12 +789,7 @@ class AnythingElseForm(BaseDeletableRegistrarForm): anything_else = forms.CharField( required=True, label="Anything else?", - 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" - } - ), + widget=forms.Textarea(), validators=[ MaxLengthValidator( 2000, diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 386a7a4af..6e28e5869 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -34,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_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" %} {% input_with_errors forms.3.anything_else %} {% endwith %} {# forms.3 is a form for inputting the e-mail of a cisa representative #} From 6ff3901c91f021e123feba9ef04328c35988e3b1 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 14:43:41 -0800 Subject: [PATCH 12/21] Add aria label to anything else text field --- src/registrar/forms/domain_request_wizard.py | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 5d8f23057..ca1313184 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -789,7 +789,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, From 4671c8967fcbf1d3ae98c8b53e2425300abe9f95 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:10:57 -0800 Subject: [PATCH 13/21] Refactor legend heading --- src/registrar/assets/sass/_theme/_base.scss | 8 ++++++++ src/registrar/assets/sass/_theme/_typography.scss | 3 +-- src/registrar/templates/django/forms/label.html | 4 ++-- .../templates/domain_request_additional_details.html | 8 ++++---- .../templates/domain_request_other_contacts.html | 2 +- src/registrar/templatetags/field_helpers.py | 10 +++++----- 6 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index db1599621..9a6818f09 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/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; diff --git a/src/registrar/assets/sass/_theme/_typography.scss b/src/registrar/assets/sass/_theme/_typography.scss index c60b7d802..952fc6dad 100644 --- a/src/registrar/assets/sass/_theme/_typography.scss +++ b/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; } } diff --git a/src/registrar/templates/django/forms/label.html b/src/registrar/templates/django/forms/label.html index 2852ce2ba..3783c0fef 100644 --- a/src/registrar/templates/django/forms/label.html +++ b/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 %} -

    {{ legend_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 %} diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index 6e28e5869..ba7a7f441 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -9,9 +9,9 @@ {% block form_fields %} -
    +
    - {% 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 @@
    - {% 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 @@

    Provide details below. *

    - {% 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 #} diff --git a/src/registrar/templates/domain_request_other_contacts.html b/src/registrar/templates/domain_request_other_contacts.html index 035fe442b..b3c1be8b4 100644 --- a/src/registrar/templates/domain_request_other_contacts.html +++ b/src/registrar/templates/domain_request_other_contacts.html @@ -18,7 +18,7 @@ {% block form_fields %}
    - {% 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 #} diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index 6cf671931..a1f662fba 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/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": - legend_labels.append(value) + elif key == "add_legend_heading": + 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: - context["legend_label"] = " ".join(legend_labels) + if legend_headings: + context["legend_heading"] = " ".join(legend_headings) if group_classes: context["group_classes"] = " ".join(group_classes) From 6854310449f81c28678e88022441cb44a3f8921c Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:55:16 -0800 Subject: [PATCH 14/21] Refactor how usa-legend is assigned --- src/registrar/assets/sass/_theme/_base.scss | 1 + src/registrar/templates/domain_request_additional_details.html | 2 +- src/registrar/templatetags/field_helpers.py | 3 --- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index 9a6818f09..f6a9eef90 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/src/registrar/assets/sass/_theme/_base.scss @@ -155,6 +155,7 @@ footer { .usa-radio { margin-top: 1rem; + font-size: 1.06rem; } abbr[title] { diff --git a/src/registrar/templates/domain_request_additional_details.html b/src/registrar/templates/domain_request_additional_details.html index ba7a7f441..86fa79fa3 100644 --- a/src/registrar/templates/domain_request_additional_details.html +++ b/src/registrar/templates/domain_request_additional_details.html @@ -11,7 +11,7 @@
    - {% with add_class="usa-radio__input--tile" 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="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 #} diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index a1f662fba..426caf9bc 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/src/registrar/templatetags/field_helpers.py @@ -119,9 +119,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: From 5b2ecbcf8520c50927bd8d6c17881e7b1842f5cc Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:08:59 -0800 Subject: [PATCH 15/21] Remove unused param --- src/registrar/forms/domain_request_wizard.py | 1 - src/registrar/forms/utility/wizard_form_helper.py | 11 +---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 4a0403e08..5ec8deb24 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -547,7 +547,6 @@ class OtherContactsYesNoForm(BaseYesNoForm): """The yes/no field for the OtherContacts form.""" form_choices = ((True, "Yes, I can name other employees."), (False, "No. (We’ll ask you to explain why.)")) - title_label = "Are there other employees who can help verify your request?" field_name = "has_other_contacts" @property diff --git a/src/registrar/forms/utility/wizard_form_helper.py b/src/registrar/forms/utility/wizard_form_helper.py index d48f7af64..e87998372 100644 --- a/src/registrar/forms/utility/wizard_form_helper.py +++ b/src/registrar/forms/utility/wizard_form_helper.py @@ -239,11 +239,6 @@ class BaseYesNoForm(RegistrarForm): # Default form choice mapping. Default is suitable for most cases. form_choices = ((True, "Yes"), (False, "No")) - # Option to append question to aria label for screenreader accessibility. - # Not added by default. - title_label = "" - aria_label = title_label.join("") - def __init__(self, *args, **kwargs): """Extend the initialization of the form from RegistrarForm __init__""" super().__init__(*args, **kwargs) @@ -261,11 +256,7 @@ def get_typed_choice_field(self): coerce=lambda x: x.lower() == "true" if x is not None else None, choices=self.form_choices, initial=self.get_initial_value(), - widget=forms.RadioSelect( - attrs={ - # "aria-label": self.title_label - } - ), + widget=forms.RadioSelect(), error_messages={ "required": self.required_error_message, }, From 762bda225ad85ecb7154fc44c1d58045c2162c46 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:10:41 -0800 Subject: [PATCH 16/21] Remove unused change --- src/registrar/assets/src/sass/_theme/_base.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss index dd1c375d9..62f9f436e 100644 --- a/src/registrar/assets/src/sass/_theme/_base.scss +++ b/src/registrar/assets/src/sass/_theme/_base.scss @@ -149,10 +149,6 @@ footer { color: color('primary'); } -.usa-footer { - margin-bottom: 0.5rem; -} - .usa-radio { margin-top: 1rem; font-size: 1.06rem; From 904629734c4fec4cce0dea0ec6b5b4ddb222b786 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:13:41 -0800 Subject: [PATCH 17/21] Remove unused parentheses --- src/registrar/forms/utility/wizard_form_helper.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/forms/utility/wizard_form_helper.py b/src/registrar/forms/utility/wizard_form_helper.py index e87998372..eedf5839b 100644 --- a/src/registrar/forms/utility/wizard_form_helper.py +++ b/src/registrar/forms/utility/wizard_form_helper.py @@ -256,7 +256,7 @@ def get_typed_choice_field(self): coerce=lambda x: x.lower() == "true" if x is not None else None, choices=self.form_choices, initial=self.get_initial_value(), - widget=forms.RadioSelect(), + widget=forms.RadioSelect, error_messages={ "required": self.required_error_message, }, From dffae9163e7ccaa88388bd0c3ffd082c28c994fe Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:20:58 -0800 Subject: [PATCH 18/21] Update portfolio screenreader additional details form --- .../portfolio_domain_request_additional_details.html | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/registrar/templates/portfolio_domain_request_additional_details.html b/src/registrar/templates/portfolio_domain_request_additional_details.html index 5bc529243..1adc4e308 100644 --- a/src/registrar/templates/portfolio_domain_request_additional_details.html +++ b/src/registrar/templates/portfolio_domain_request_additional_details.html @@ -6,15 +6,9 @@ {% endblock %} {% block form_fields %} - -
    -

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

    - -
    -

    This question is optional.

    - {% with attr_maxlength=2000 add_label_class="usa-sr-only" %} + {% with attr_maxlength=2000 add_legend_heading="Is there anything else you’d like us to know about your domain request?" add_aria_label="This question is optional." %} {% input_with_errors forms.0.anything_else %} {% endwith %}
    From 1764155a8ba1579a2ba0500d9a23b9b55aff59d0 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:22:53 -0800 Subject: [PATCH 19/21] Revert portfolio form screenreader changes --- .../portfolio_domain_request_additional_details.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/registrar/templates/portfolio_domain_request_additional_details.html b/src/registrar/templates/portfolio_domain_request_additional_details.html index 1adc4e308..5bc529243 100644 --- a/src/registrar/templates/portfolio_domain_request_additional_details.html +++ b/src/registrar/templates/portfolio_domain_request_additional_details.html @@ -6,9 +6,15 @@ {% endblock %} {% block form_fields %} + +
    +

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

    + +
    +

    This question is optional.

    - {% with attr_maxlength=2000 add_legend_heading="Is there anything else you’d like us to know about your domain request?" add_aria_label="This question is optional." %} + {% with attr_maxlength=2000 add_label_class="usa-sr-only" %} {% input_with_errors forms.0.anything_else %} {% endwith %}
    From 8fcf4a57067869337532a0d735ba682d9c7bc036 Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Fri, 13 Dec 2024 11:00:42 -0800 Subject: [PATCH 20/21] Remove duplicate aria text --- src/registrar/forms/domain_request_wizard.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index 5ec8deb24..c533c653c 100644 --- a/src/registrar/forms/domain_request_wizard.py +++ b/src/registrar/forms/domain_request_wizard.py @@ -740,8 +740,7 @@ class NoOtherContactsForm(BaseDeletableRegistrarForm): 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. \ - You can enter up to 1000 characters." + why there are no other employees who can help verify your request." } ), validators=[ From 3770494781092d9135bd4db162eca320bed20b4e Mon Sep 17 00:00:00 2001 From: Erin Song <121973038+erinysong@users.noreply.github.com> Date: Fri, 13 Dec 2024 11:36:47 -0800 Subject: [PATCH 21/21] Remove duplicate aria text --- src/registrar/forms/domain_request_wizard.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/forms/domain_request_wizard.py b/src/registrar/forms/domain_request_wizard.py index c533c653c..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=[