From 9cf2245217dc716116669020cabbca3a18d195cf Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Tue, 21 Jul 2026 17:29:05 +0200
Subject: [PATCH] feat(settings): improve switch setting accessibility

---
 src/features/settings/components/Switch.vue | 16 +++++++++++++---
 src/locales/de.json                         |  4 ++++
 src/locales/en.json                         |  4 ++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/features/settings/components/Switch.vue b/src/features/settings/components/Switch.vue
index 7091356..1ce8124 100644
--- a/src/features/settings/components/Switch.vue
+++ b/src/features/settings/components/Switch.vue
@@ -16,6 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
+import { useId } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -29,6 +30,9 @@ const props = defineProps({
     }
 });
 
+const labelId = useId();
+const switchId = useId();
+
 const store = useSettingsStore();
 
 const toggle = function toggle () {
@@ -38,10 +42,16 @@ const toggle = function toggle () {
 
 <template>
     <div class="switch-container" @click="toggle">
-        <div>
+        <label :for="switchId" :id="labelId">
             {{ t(props.setting.i18n) }}
-        </div>
-        <div class="switch-wrapper" :class="{ enabled: store.get(props.path) }">
+        </label>
+        <div
+            class="switch-wrapper"
+            :class="{ enabled: store.get(props.path) }"
+            :title="t('settings.switch.title')"
+            :aria-label="t('settings.switch.ariaLabel')"
+            :aria-labelledby="labelId"
+        >
             <div class="switch-point"></div>
         </div>
     </div>
diff --git a/src/locales/de.json b/src/locales/de.json
index 44c0ea4..3a77bec 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -45,6 +45,10 @@
                 "title": "Wert speichern",
                 "ariaLabel": "Speichert den eingegebenen Wert"
             }
+        },
+        "switch": {
+            "title": "Wert umschalten",
+            "ariaLabel": "Schaltet den Wert um"
         }
     }
 }
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index a7eb8bc..d74bb20 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -45,6 +45,10 @@
                 "title": "Save value",
                 "ariaLabel": "Saves the entered value"
             }
+        },
+        "switch": {
+            "title": "Toggle value",
+            "ariaLabel": "Toggles the value"
         }
     }
 }
\ No newline at end of file