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

@@ -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

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"