feat(settings): improve switch setting accessibility

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>
+        </label>
-        <div class="switch-wrapper" :class="{ enabled: store.get(props.path) }">
+        <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>

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

src/locales/en.json

@@ -45,6 +45,10 @@
                 "title": "Save value",
                 "ariaLabel": "Saves the entered value"
             }
+        },
+        "switch": {
+            "title": "Toggle value",
+            "ariaLabel": "Toggles the value"
         }
     }
 }