feat(settings): improve input setting accessibility

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>

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"
+            }
+        }
+    }
 }

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"
+            }
+        }
+    }
 }