From 7776f9900a70555ac0901593eeb95b2f1a784402 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 27 Jan 2025 19:15:37 -0800
Subject: [PATCH] added id and required field

---
 .../uswds/_uswds-theme-custom-styles.scss     |  4 ++++
 .../components/components/input/template.njk  |  6 ++++--
 app/templates/components/textbox.html         | 20 +++++++++----------
 app/templates/views/edit-sms-template.html    |  5 ++++-
 app/templates/views/send-test.html            |  4 ++--
 app/templates/views/templates/template.html   |  4 ----
 6 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 0bb1aab7e..ebce95061 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -1024,3 +1024,7 @@ nav.nav {
   font-size: units(3);
   font-weight: bold;
 }
+
+.form-control-error {
+  border: 4px solid #b10e1e
+}
diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk
index 7f5634651..4ea649dce 100644
--- a/app/templates/components/components/input/template.njk
+++ b/app/templates/components/components/input/template.njk
@@ -34,7 +34,7 @@
     attributes: params.errorMessage.attributes,
     html: params.errorMessage.html,
     text: params.errorMessage.text,
-    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText,
   }) | indent(2) | trim }}
 {% endif %}
   <input class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
@@ -42,5 +42,7 @@
   {%- 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 -%}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
+  {%- if params.required %} required{% endif %}
+  />
 </div>
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 3e479cbce..fa92d0cf8 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -16,19 +16,9 @@
   placeholder=''
 ) %}
   <div
-    class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
+    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 %}"
   >
-    {% 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 }}
@@ -41,6 +31,12 @@
         {{ 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 }}" tabindex="-1" aria-live="assertive" role="alert">
+        <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
     %}
@@ -59,6 +55,8 @@
       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 97eac73dc..8ef41bdb2 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -32,6 +32,8 @@
         <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(
@@ -41,7 +43,8 @@
             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!'
+            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!',
+            required=True
           ) }}
           {% 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 720849ae6..be3b32a9a 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 %}" aria-live="polite" role="alert">
-        {{ form.placeholder_value(param_extensions={"classes": ""}) }}
+      <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>
       {% 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 5613f074d..fd954a347 100644
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -90,8 +90,4 @@
     {% endif %}
   </div>
 
-  <!--<div class="">
-    {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
-  </div>-->
-
 {% endblock %}