CSR-1729 add label copy for textarea.

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;

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" />