From 8b7229608c37aef4894db7fabb864a559a508ab2 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 6 Dec 2023 10:37:18 -0500
Subject: [PATCH] CSR-1729 add label copy for textarea.

---
 .../textarea-question/textarea-question.vue   | 33 +++++++++++--------
 .../customer-details/customer-details.vue     |  1 +
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue
index eda3a6f9c..27eeda216 100644
--- a/src/digital-components/textarea-question/textarea-question.vue
+++ b/src/digital-components/textarea-question/textarea-question.vue
@@ -1,12 +1,13 @@
 <template>
     <div class="textarea-question">
-        <div class="label-wrapper mb-1" :aria-label="questionText">
+        <div class="label-wrapper d-flex flex-column mb-1" :aria-label="questionText">
             <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
-            <label for="textarea-question" class="fw-bold" v-html="questionText"></label>
-            <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
-        </div>
-        <textarea
-            id="textareaQuestion"
+            <div class="d-flex mb-1">
+                <label :for="textAreaLabelCopy" class="fw-bold" v-html="questionText"></label>
+                <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
+            </div>
+            <textarea
+            :id="textAreaLabelCopy"
             ref="textarea"
             v-model="value"
             v-maska="mask"
@@ -18,13 +19,14 @@
             :aria-required="isRequired">
         </textarea>
         <p
-            tabindex="-1"
-            class="caption mt-2 mb-0"
-            id="charactersRemaining"
-            :class="[urgentCountdown ? 'urgent-countdown' : '']">
-            {{ remainingCount }}/{{ maxLength }} characters remaining
-        </p>
-    </div>
+        tabindex="-1"
+        class="caption mt-2 mb-0 w-100"
+        id="charactersRemaining"
+        :class="[urgentCountdown ? 'urgent-countdown' : '']">
+        {{ remainingCount }}/{{ maxLength }} characters remaining
+    </p>
+</div>
+</div>
 </template>
 
 <script>
@@ -38,6 +40,10 @@ export default {
             default: 150,
         },
         modelValue: String,
+        textAreaLabelCopy: {
+            type: String,
+            default: "text area",
+        },
     },
     // TODO: At some point in the future we should probably add the tie in to validation here in case the field must be populated for some other use cases
     setup() {},
@@ -83,7 +89,6 @@ export default {
     }
     .label-wrapper {
         display: flex;
-        align-items: center;
         label {
             span {
                 color: $gray-500;
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 08d547f96..48f7d2212 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -48,6 +48,7 @@
                         class="mb-4"
                         v-model="techNotes"
                         cmsWidgetName="TextAreaContentWidget"
+                        textAreaLabelCopy="Customer Comments"
                         maxLength="150" />
 
                     <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />