From b731cd62bbec88b0d0327c06d84fc4296433a0a0 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Thu, 12 Dec 2024 23:08:25 -0800
Subject: [PATCH] adding error annoucement

---
 app/main/views/templates.py                         |  1 +
 .../components/components/input/template.njk        |  2 +-
 app/templates/components/textbox.html               |  7 ++++---
 app/templates/views/edit-sms-template.html          | 13 +++++++++++++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/main/views/templates.py b/app/main/views/templates.py
index 5c59e1e7c..3a7315db7 100644
--- a/app/main/views/templates.py
+++ b/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",
         )
diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk
index 7f5634651..f843f82b2 100644
--- a/app/templates/components/components/input/template.njk
+++ b/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,
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index db3f27c64..77dc636a4 100644
--- a/app/templates/components/textbox.html
+++ b/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 %}
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index f0129ef1c..e27558aa0 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/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)) }}