From 084a5e37fc13f5a3e7390d1771c85e78548ca8be Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <53159604+heyitsmebev@users.noreply.github.com>
Date: Tue, 21 Jan 2025 22:20:44 -0800
Subject: [PATCH] Revert "Send Message A11Y Audit - Unique IDs and also
 refactor error message on templates page"

---
 .../uswds/_uswds-theme-custom-styles.scss     |  4 ----
 app/main/views/templates.py                   |  1 -
 .../components/components/input/template.njk  |  4 +---
 app/templates/components/form.html            |  1 +
 app/templates/components/textbox.html         | 23 ++++++++++---------
 app/templates/views/edit-sms-template.html    |  7 ++----
 app/templates/views/send-test.html            |  4 ++--
 app/templates/views/templates/template.html   |  4 ++++
 tests/app/main/views/test_send.py             |  2 +-
 tests/app/main/views/test_tour.py             |  2 +-
 10 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 7fafb8276..0bb1aab7e 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -1024,7 +1024,3 @@ nav.nav {
   font-size: units(3);
   font-weight: bold;
 }
-
-.form-control-error {
-   border: 4px solid #b10e1e
-}
diff --git a/app/main/views/templates.py b/app/main/views/templates.py
index 3a7315db7..5c59e1e7c 100644
--- a/app/main/views/templates.py
+++ b/app/main/views/templates.py
@@ -645,7 +645,6 @@ 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 9e2cff08c..7f5634651 100644
--- a/app/templates/components/components/input/template.njk
+++ b/app/templates/components/components/input/template.njk
@@ -42,7 +42,5 @@
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-  {%- if params.required %} required{% endif %}
-/>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
 </div>
diff --git a/app/templates/components/form.html b/app/templates/components/form.html
index 5875a19a9..17cabc7f0 100644
--- a/app/templates/components/form.html
+++ b/app/templates/components/form.html
@@ -19,6 +19,7 @@
         data-{{ key }}="{{ val }}"
       {% endif %}
     {% endfor %}
+    novalidate
   >
     {{ caller() }}
   </form>
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index e8b6f813d..3e479cbce 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -13,13 +13,22 @@
   safe_error_message=False,
   rows=8,
   extra_form_group_classes='',
-  placeholder='',
-  required=None
+  placeholder=''
 ) %}
   <div
-    class="usa-form-group{% if field.errors %} usa-form-group--error{% endif %} {{ extra_form_group_classes }}"
+    class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
+    {% if field.errors %}
+      <div class="usa-alert usa-alert--error edit-textbox-error-mt" role="alert">
+        <div class="usa-alert__body">
+          <h4 class="usa-alert__heading">Error message</h4>
+          <p class="usa-alert__text" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+            {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
+          </p>
+        </div>
+      </div>
+    {% endif %}
     <label class="usa-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
@@ -32,12 +41,6 @@
         {{ hint }}
       </div>
     {% endif %}
-    {% if field.errors %}
-    <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
     %}
@@ -56,8 +59,6 @@
       data_highlight_placeholders='true' if highlight_placeholders else 'false',
       rows=rows|string,
       placeholder=placeholder,
-      aria_describedby=field.name+"-error",
-      required='required' if required else None,
       **kwargs
     ) }}
     {% if suffix %}
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 728b92cd6..97eac73dc 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -29,11 +29,9 @@
 
     {% call form_wrapper() %}
       <div class="grid-row">
-        <div class="tablet:grid-col-9 mobile-lg:grid-col-12" aria-live="polite" role="alert">
+        <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
           {{ form.name(param_extensions={
             "extra_form_group_classes": "margin-bottom-2",
-            "id": "name",
-            "required": True,
             "hint": {"text": "Your recipients will not see this"}
           }) }}
           {{ textbox(
@@ -43,8 +41,7 @@
             hint=content_hint,
             rows=5,
             extra_form_group_classes='margin-bottom-1',
-            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!',
-            required=True
+            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
           ) }}
           {% if current_user.platform_admin %}
             {{ form.process_type }}
diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index be3b32a9a..720849ae6 100644
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -37,8 +37,8 @@
     data_kwargs={'force-focus': True}
   ) %}
     <div class="grid-row">
-      <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
-        {{ form.placeholder_value(param_extensions={"id": "phone-number"}) }}
+      <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}" aria-live="polite" role="alert">
+        {{ form.placeholder_value(param_extensions={"classes": ""}) }}
       </div>
       {% if skip_link or link_to_upload %}
         <div class="grid-col-12 margin-top-1">
diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html
index fd954a347..5613f074d 100644
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -90,4 +90,8 @@
     {% endif %}
   </div>
 
+  <!--<div class="">
+    {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
+  </div>-->
+
 {% endblock %}
diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py
index 0ab770c18..806474c49 100644
--- a/tests/app/main/views/test_send.py
+++ b/tests/app/main/views/test_send.py
@@ -1521,7 +1521,7 @@ def test_link_to_upload_not_offered_when_entering_personalisation(
 
     # We’re entering personalization
     assert page.select_one("input[type=text]")["name"] == "placeholder_value"
-    assert page.select_one("label[for=phone-number]").text.strip() == "name"
+    assert page.select_one("label[for=placeholder_value]").text.strip() == "name"
     # No ‘Upload’ link shown
     assert len(page.select("main a")) == 0
     assert "Upload" not in page.select_one("main").text
diff --git a/tests/app/main/views/test_tour.py b/tests/app/main/views/test_tour.py
index 9a2b8f053..2916d0887 100644
--- a/tests/app/main/views/test_tour.py
+++ b/tests/app/main/views/test_tour.py
@@ -175,7 +175,7 @@ def test_should_show_empty_text_box(
     # shouldn’t also be set on the textbox itself
     assert "data-module" not in textbox
     assert (
-        normalize_spaces(page.select_one("label[for=phone-number]").text) == "one"
+        normalize_spaces(page.select_one("label[for=placeholder_value]").text) == "one"
     )