From 70ad0420bbf37eddf6130ee7de0901ac9fa859a1 Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Tue, 28 Jul 2026 13:12:23 +0200
Subject: [PATCH] feat(settings): improve label relationship in selection

Added attributes to indicate that div.label is the label for
ul.options-list in the selection component.
---
 src/features/settings/components/Selection.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/settings/components/Selection.vue b/src/features/settings/components/Selection.vue
index c671422..2512ffc 100644
--- a/src/features/settings/components/Selection.vue
+++ b/src/features/settings/components/Selection.vue
@@ -17,7 +17,7 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 import { useSettingsStore } from '../stores/settingsStore';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -59,14 +59,16 @@ const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setti
 watch(selected, (newValue) => {
     store.set(props.path, newValue);
 });
+
+const labelId = useId();
 </script>
 
 <template>
     <div>
-        <div class="label">
+        <div class="label" :id="labelId">
             {{ t(props.setting.i18n) }}
         </div>
-        <ul class="options-list">
+        <ul class="options-list" :aria-labelledby="labelId">
             <li v-for="option in props.setting.options" :key="option.name">
                 <label class="settings-button">
                     <input