From fcf53d640fd20286b84ff236b4e564ad83d25152 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 5 Aug 2026 16:56:15 +0300
Subject: [PATCH] poll form refactor + improvements

---
 src/components/poll/poll_form.js  | 37 +++++++++++++++++++++----------
 src/components/poll/poll_form.vue |  7 ++++--
 src/i18n/en.json                  |  2 ++
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 5d0334a63..657e75b44 100644
--- a/src/components/poll/poll_form.js
+++ b/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
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index cb8a6f91f..b5db1314a 100644
--- a/src/components/poll/poll_form.vue
+++ b/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"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 60fcaf1dd..4b257be9f 100644
--- a/src/i18n/en.json
+++ b/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",