WIP

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

@@ -1,16 +1,15 @@
 <template>
     <div class="textarea-question">
         <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget"><!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
-            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="isRequired" class="fw-normal ms-1">(Optional)</span>
+            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
         </div>
         <textarea
+            rows="4"
             id="textarea-comments"
-            class="p-4"
             :maxlength=maxLength
             role="textbox"
-            contenteditable="true"
-            aria-multiline="true"
-            aria-required="false"></textarea>
+            :aria-required=isRequired>
+        </textarea>
         <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
             {{maxLength}}/{{maxLength}} characters remaining
         </p>
@@ -25,7 +24,6 @@ export default {
         isRequired: Boolean,
         maxLength: Number,
         modelValue: String,
-        labelText: String,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -53,6 +51,9 @@ export default {
         TextAreaContentWidget() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
+        setUpTest() {
+            this.enableRemainingCounter();
+        },
         value: {
             get: function () {
                 return this.modelValue;
@@ -62,14 +63,6 @@ export default {
             },
         },
     },
-    value: {
-        get: function () {
-            return this.modelValue;
-        },
-        set: function (newValue) {
-            this.$emit("update:modelValue", newValue);
-        },
-    },
     mounted: function () {
         const my_textarea = document.getElementById("textarea-comments");
         const remaining = document.getElementById("charactersremaining");

src/layouts/customer-details/customer-details.vue

@@ -1,9 +1,7 @@
 <template>
     <textareaquestion
         cmsWidgetName="TextAreaContentWidget"
-        :labelText="textAreaLabelCopy"
         maxLength=250
-        isRequired
      />
 </template>