adding error annoucement

app/main/views/templates.py

@@ -645,6 +645,7 @@ def edit_service_template(service_id, template_id):
         return render_template(
             "views/edit-{}-template.html".format(template["template_type"]),
             form=form,
+            errors=form.errors if form.errors else None,
             template=template,
             heading_action="Edit",
         )

app/templates/components/components/input/template.njk

@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" aria-live="polite" role="alert">
   {{ usaLabel({
     html: params.label.html,
     text: params.label.text,

app/templates/components/textbox.html

@@ -17,7 +17,7 @@
 ) %}
   <div
     class="usa-form-group{% if field.errors %} usa-form-group--error{% endif %} {{ extra_form_group_classes }}"
-    data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
+    data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}" aria-live="polite" role="alert"
   >
     <label class="usa-label" for="{{ field.name }}">
       {% if label %}
@@ -32,11 +32,11 @@
       </div>
     {% endif %}
     {% if field.errors %}
-    <span class="usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+    <span id="{{ field.name}}-error" class="usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+      <span class="usa-sr-only">Error:</span>
       {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
     </span>
   {% endif %}
-
     {%
       if highlight_placeholders or autosize
     %}
@@ -55,6 +55,7 @@
       data_highlight_placeholders='true' if highlight_placeholders else 'false',
       rows=rows|string,
       placeholder=placeholder,
+      aria_describedby=field.name+"-error",
       **kwargs
     ) }}
     {% if suffix %}

app/templates/views/edit-sms-template.html

@@ -15,6 +15,19 @@
   }) }}
 {% endblock %}
 
+{% block skipLink %}
+  {% set skipLink = usaSkipLink({
+    "href": '#main-content',
+    "text": 'Skip to main content'
+  }) %}
+  {% if errors %}
+    <div>{{ skipLink }}</div>
+  {% else %}
+    {{ skipLink }}
+  {% endif %}
+{% endblock %}
+
+
 {% block maincolumn_content %}
 
     {{ page_header('{} text message template'.format(heading_action)) }}