Add aria label option for inputs

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" %}
 />

src/registrar/templates/domain_nameservers.html

@@ -47,7 +47,7 @@
           {% endwith %}
         </div>
         <div class="tablet:grid-col-5">
-          {% 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 %}
         </div>
@@ -56,6 +56,7 @@
             <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
               <use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
             </svg>Delete
+            <span class="sr-only">Name server {{forloop.counter}}</span>
           </button>
         </div>
       </div>

src/registrar/templates/includes/input_with_errors.html

@@ -66,7 +66,7 @@ error messages, if necessary.
   {% if toggleable_input %}
     {% include "includes/toggleable_input.html" %}
   {% endif %}
-
+  
   {# this is the input field, itself #}
   {% include widget.template_name %}
 

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