poll form refactor + improvements

src/components/poll/poll_form.js

@@ -25,6 +25,10 @@ export default {
   },
   emits: ['update:modelValue'],
   computed: {
+    // Model value
+    options() {
+      return pollFallback(this.modelValue, 'options')
+    },
     pollType: {
       get() {
         return pollFallback(this.modelValue, 'pollType')
@@ -36,14 +40,6 @@ export default {
         })
       },
     },
-    options: {
-      get() {
-        return pollFallback(this.modelValue, 'options')
-      },
-      set(newVal) {
-        this.$emit('update:modelValue', { ...this.modelValue, options: newVal })
-      },
-    },
     expiryAmount: {
       get() {
         return pollFallback(this.modelValue, 'expiryAmount')
@@ -66,6 +62,8 @@ export default {
         })
       },
     },
+
+    // Configuration
     pollLimits() {
       return useInstanceStore().limits.pollLimits
     },
@@ -116,19 +114,34 @@ export default {
     },
     addOption() {
       if (this.options.length < this.maxOptions) {
-        this.options = [...this.options, '']
+        this.$emit('update:modelValue', {
+          ...this.modelValue,
+          options: [...this.options, '']
+        })
+
         return true
       }
       return false
     },
     deleteOption(index) {
       if (this.options.length > 2) {
-        this.options.splice(index, 1)
-        this.options = this.options
+        const options = [...this.options]
+        options.splice(index, 1)
+
+        this.$emit('update:modelValue', {
+          ...this.modelValue,
+          options
+        })
       }
     },
     updateOption(index, value) {
-      this.options = this.options
+      const options = [...this.options]
+      options[index] = value
+
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        options
+      })
     },
     convertExpiryToUnit(unit, amount) {
       // Note: we want seconds and not milliseconds

src/components/poll/poll_form.vue

@@ -11,14 +11,15 @@
       <div class="input-container">
         <input
           :id="`poll-${index}`"
-          v-model="options[index]"
+          :model-value="options[index]"
           size="1"
           class="input poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
+          :aria-label="$t('polls.option')"
           @keydown.enter.stop.prevent="nextOption(index)"
-          @change="updateOption"
+          @change="(e) => updateOption(index, e.target.value)"
         >
       </div>
       <button
@@ -69,6 +70,7 @@
           class="input expiry-amount hide-number-spinner"
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
+          :aria-label="$t('polls.expiry_amount')"
           @change="expiryAmountChange"
         >
         {{ ' ' }}
@@ -77,6 +79,7 @@
           unstyled="true"
           class="expiry-unit"
           @change="expiryAmountChange"
+          :aria-label="$t('polls.expiry_unit')"
         >
           <option
             v-for="unit in expiryUnits"

src/i18n/en.json

@@ -242,6 +242,8 @@
     "single_choice": "Single choice",
     "multiple_choices": "Multiple choices",
     "expiry": "Poll age",
+    "expiry_unit": "Expiry unit",
+    "expiry_amount": "Expiry amount",
     "expires_at": "Poll ends {0}",
     "expires_in": "Poll ends in {0}",
     "expired": "Poll ended {0} ago",