Merge pull request #1617 from Safelite/CSR-1729-add-label-copy-for-textarea

CSR-1729 add label copy for textarea.

src/digital-components/textarea-question/textarea-question.vue

@@ -1,29 +1,31 @@
 <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>
+            <div class="d-flex mb-1">
-            <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
+                <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"
+                @keyup="updateCount"
+                class="p-4"
+                :maxlength="maxLength"
+                role="textbox"
+                aria-multiline="true"
+                :aria-required="isRequired">
+            </textarea>
+            <p
+                tabindex="-1"
+                class="caption mt-2 mb-0 w-100"
+                id="charactersRemaining"
+                :class="[urgentCountdown ? 'urgent-countdown' : '']">
+                {{ remainingCount }}/{{ maxLength }} characters remaining
+            </p>
         </div>
-        <textarea
-            id="textareaQuestion"
-            ref="textarea"
-            v-model="value"
-            v-maska="mask"
-            @keyup="updateCount"
-            class="p-4"
-            :maxlength="maxLength"
-            role="textbox"
-            aria-multiline="true"
-            :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>
 </template>
 
@@ -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" />