From 8822edaf249c21c2f5fd0682eb6af420edfd6b91 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Tue, 11 Feb 2025 08:28:41 -0700
Subject: [PATCH] Improve settings dialog accessibility (#2513)

---
 src/components/common/FormItem.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index 1ea5867a0d..49805a02da 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -2,7 +2,11 @@
 <template>
   <div class="flex flex-row items-center gap-2">
     <div class="form-label flex flex-grow items-center">
-      <span class="text-muted" :class="props.labelClass">
+      <span
+        class="text-muted"
+        :class="props.labelClass"
+        :id="`${props.id}-label`"
+      >
         <slot name="name-prefix"></slot>
         {{ props.item.name }}
         <i
@@ -17,6 +21,7 @@
       <component
         :is="markRaw(getFormComponent(props.item))"
         :id="props.id"
+        :aria-labelledby="`${props.id}-label`"
         v-model:modelValue="formValue"
         v-bind="getFormAttrs(props.item)"
       />