From 45b52c2c1142a0d2f3ac9600f48547ece88f000a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Tue, 21 Jul 2026 17:10:55 +0200
Subject: [PATCH] feat(settings): improve input setting accessibility

---
 .../settings/components/SettingsInput.vue       | 17 +++++++++++++----
 src/locales/de.json                             | 10 +++++++++-
 src/locales/en.json                             | 10 +++++++++-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/features/settings/components/SettingsInput.vue b/src/features/settings/components/SettingsInput.vue
index adac6c4..6550f7c 100644
--- a/src/features/settings/components/SettingsInput.vue
+++ b/src/features/settings/components/SettingsInput.vue
@@ -19,7 +19,7 @@ import Icon from '@/features/icons/components/Icon.vue';
 
 import { useSettingsStore } from '../stores/settingsStore';
 
-import { computed } from 'vue';
+import { computed, useId } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -37,6 +37,8 @@ const store = useSettingsStore();
 
 const inputModel = defineModel();
 inputModel.value = store.get(props.path);
+const inputId = useId();
+const inputLabelId = useId();
 
 const inputClass = computed(() => ({
         number: 'number',
@@ -55,9 +57,9 @@ const apply = function apply () {
 
 <template>
     <div class="input-setting-container">
-        <div>
+        <label :for="inputId" :id="inputLabelId">
             {{ t(props.setting.i18n) }}
-        </div>
+        </label>
         <form
             @submit.prevent="apply"
             class="input-container"
@@ -65,10 +67,17 @@ const apply = function apply () {
         >
             <input
                 :type="inputClass"
+                :id="inputId"
+                :aria-labelledby="inputLabelId"
                 v-model="inputModel"
                 class="input"
             />
-            <button class="done-button button" type="submit">
+            <button
+                class="done-button button"
+                type="submit"
+                :title="t('settings.input.done.title')"
+                :aria-label="t('settings.input.done.ariaLabel')"
+            >
                 <Icon name="check-mark" />
             </button>
         </form>
diff --git a/src/locales/de.json b/src/locales/de.json
index 9815a30..44c0ea4 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -38,5 +38,13 @@
             }
         }
     },
-    "slogan": "Gebaut zum Suchen."
+    "slogan": "Gebaut zum Suchen.",
+    "settings": {
+        "input": {
+            "done": {
+                "title": "Wert speichern",
+                "ariaLabel": "Speichert den eingegebenen Wert"
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 8b4f3fd..a7eb8bc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -38,5 +38,13 @@
             }
         }
     },
-    "slogan": "Built to search."
+    "slogan": "Built to search.",
+    "settings": {
+        "input": {
+            "done": {
+                "title": "Save value",
+                "ariaLabel": "Saves the entered value"
+            }
+        }
+    }
 }
\ No newline at end of file