From 7a6c4cf8cb7b04814ed57b09e04a71c0161d455f Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sun, 26 Jul 2026 14:53:54 +0300
Subject: [PATCH] fix(app): label storage credential fields

- Give shared inputs explicit ID and accessible-label support

- Associate storage key labels with their password fields
---
 src/components/settings/storage/StorageSettingsPanel.vue | 4 +++-
 src/components/ui/AppInput.vue                           | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/storage/StorageSettingsPanel.vue b/src/components/settings/storage/StorageSettingsPanel.vue
index f2190edf6..43a3fb9f2 100644
--- a/src/components/settings/storage/StorageSettingsPanel.vue
+++ b/src/components/settings/storage/StorageSettingsPanel.vue
@@ -110,13 +110,15 @@ onMounted(() => void refreshStatuses())
       class="flex flex-col gap-1"
       :data-credential="field.id"
     >
-      <label class="text-[10px] text-muted">
+      <label :for="`storage-${field.id}`" class="text-[10px] text-muted">
         {{ credentialLabel(field.id) }}
       </label>
       <div class="flex gap-2">
         <AppInput
+          :id="`storage-${field.id}`"
           v-model="credentialDrafts[field.id]"
           type="password"
+          :aria-label="credentialLabel(field.id)"
           :placeholder="
             credentialStatuses[field.id] === 'configured'
               ? dialogs.keySavedReplace
diff --git a/src/components/ui/AppInput.vue b/src/components/ui/AppInput.vue
index 9bbaff362..3d48282e8 100644
--- a/src/components/ui/AppInput.vue
+++ b/src/components/ui/AppInput.vue
@@ -5,8 +5,10 @@ import { tv } from 'tailwind-variants'
 import theme from '@/theme/input'
 
 interface AppInputProps {
+  id?: string
   type?: 'text' | 'password' | 'number' | 'search'
   placeholder?: string
+  ariaLabel?: string
   readonly?: boolean
   disabled?: boolean
   autofocus?: boolean
@@ -19,8 +21,10 @@ interface AppInputProps {
 }
 
 const {
+  id,
   type = 'text',
   placeholder,
+  ariaLabel,
   readonly,
   disabled,
   autofocus,
@@ -44,9 +48,11 @@ const emit = defineEmits<{
 
 <template>
   <input
+    :id="id"
     v-model="modelValue"
     :type="type"
     :placeholder="placeholder"
+    :aria-label="ariaLabel"
     :readonly="readonly"
     :disabled="disabled"
     :autofocus="autofocus"