diff --git a/src/registrar/templates/django/forms/widgets/input.html b/src/registrar/templates/django/forms/widgets/input.html index f47fc6415..e7b43655d 100644 --- a/src/registrar/templates/django/forms/widgets/input.html +++ b/src/registrar/templates/django/forms/widgets/input.html @@ -4,6 +4,7 @@ {# hint: spacing in the class string matters #} class="{{ uswds_input_class }}{% if classes %} {{ classes }}{% endif %}" {% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %} + {% if aria_label %}aria-label="{{ aria_label }} {{ label }}"{% endif %} {% if sublabel_text %}aria-describedby="{{ widget.attrs.id }}__sublabel"{% endif %} {% include "django/forms/widgets/attrs.html" %} /> diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html index 6e18bce13..ba742ab09 100644 --- a/src/registrar/templates/domain_dsdata.html +++ b/src/registrar/templates/domain_dsdata.html @@ -63,11 +63,12 @@

DS data record {{forloop.counter}}

- +
diff --git a/src/registrar/templates/domain_nameservers.html b/src/registrar/templates/domain_nameservers.html index fd6256f39..cc1fc0164 100644 --- a/src/registrar/templates/domain_nameservers.html +++ b/src/registrar/templates/domain_nameservers.html @@ -47,7 +47,7 @@

DNS name servers

{% endwith %}
- {% with sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" %} + {% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %} {% input_with_errors form.ip %} {% endwith %}
@@ -56,6 +56,7 @@

DNS name servers

Delete + Name server {{forloop.counter}} diff --git a/src/registrar/templatetags/field_helpers.py b/src/registrar/templatetags/field_helpers.py index 68a803711..8a80a75b9 100644 --- a/src/registrar/templatetags/field_helpers.py +++ b/src/registrar/templatetags/field_helpers.py @@ -24,6 +24,7 @@ def input_with_errors(context, field=None): # noqa: C901 add_label_class: append to input element's label's `class` attribute add_legend_class: append to input element's legend's `class` attribute add_group_class: append to input element's surrounding tag's `class` attribute + add_aria_label: append to input element's `aria_label` attribute attr_* - adds or replaces any single html attribute for the input add_error_attr_* - like `attr_*` but only if field.errors is not empty toggleable_input: shows a simple edit button, and adds display-none to the input field. @@ -55,6 +56,7 @@ def input_with_errors(context, field=None): # noqa: C901 label_classes = [] legend_classes = [] group_classes = [] + aria_labels = [] # this will be converted to an attribute string described_by = [] @@ -98,6 +100,9 @@ def input_with_errors(context, field=None): # noqa: C901 if "display-none" not in classes: classes.append("display-none") + elif key == "add_aria_label": + aria_labels.append(value) + attrs["id"] = field.auto_id # do some work for various edge cases @@ -151,7 +156,10 @@ def input_with_errors(context, field=None): # noqa: C901 # ensure we don't overwrite existing attribute value if "aria-describedby" in attrs: described_by.append(attrs["aria-describedby"]) - attrs["aria-describedby"] = " ".join(described_by) + attrs["aria_describedby"] = " ".join(described_by) + + if aria_labels: + context["aria_label"] = " ".join(aria_labels) # ask Django to give us the widget dict # see Widget.get_context() on