Link labels to input and select

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -46,8 +46,9 @@
     </div>
     <div v-else>
       <form @submit.prevent="saveAgent">
-        <InputField :label="$t('admin.settings.agents.name.name')">
+        <InputField v-slot="{ id }" :label="$t('admin.settings.agents.name.name')">
           <TextField
+            :id="id"
             v-model="selectedAgent.name"
             :placeholder="$t('admin.settings.agents.name.placeholder')"
             required
@@ -63,39 +64,47 @@
         </InputField>
 
         <template v-if="isEditingAgent">
-          <InputField :label="$t('admin.settings.agents.token')">
-            <TextField v-model="selectedAgent.token" :placeholder="$t('admin.settings.agents.token')" disabled />
+          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.token')">
+            <TextField
+              :id="id"
+              v-model="selectedAgent.token"
+              :placeholder="$t('admin.settings.agents.token')"
+              disabled
+            />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.id')">
-            <TextField :model-value="selectedAgent.id?.toString()" disabled />
+          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.id')">
+            <TextField :id="id" :model-value="selectedAgent.id?.toString()" disabled />
           </InputField>
 
           <InputField
+            v-slot="{ id }"
             :label="$t('admin.settings.agents.backend.backend')"
             docs-url="docs/next/administration/backends/docker"
           >
-            <TextField v-model="selectedAgent.backend" disabled />
+            <TextField :id="id" v-model="selectedAgent.backend" disabled />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.platform.platform')">
-            <TextField v-model="selectedAgent.platform" disabled />
+          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.platform.platform')">
+            <TextField :id="id" v-model="selectedAgent.platform" disabled />
           </InputField>
 
           <InputField
+            v-slot="{ id }"
             :label="$t('admin.settings.agents.capacity.capacity')"
             docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
           >
             <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
-            <TextField :model-value="selectedAgent.capacity?.toString()" disabled />
+            <TextField :id="id" :model-value="selectedAgent.capacity?.toString()" disabled />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.version')">
-            <TextField :model-value="selectedAgent.version" disabled />
+          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.version')">
+            <TextField :id="id" :model-value="selectedAgent.version" disabled />
           </InputField>
 
-          <InputField :label="$t('admin.settings.agents.last_contact')">
+          <InputField v-slot="{ id }" :label="$t('admin.settings.agents.last_contact')">
             <TextField
+              :id="id"
               :model-value="
                 selectedAgent.last_contact
                   ? date.timeAgo(selectedAgent.last_contact * 1000)

web/src/components/admin/settings/AdminUsersTab.vue

@@ -43,18 +43,18 @@
     </div>
     <div v-else>
       <form @submit.prevent="saveUser">
-        <InputField :label="$t('admin.settings.users.login')">
-          <TextField v-model="selectedUser.login" :disabled="isEditingUser" />
+        <InputField v-slot="{ id }" :label="$t('admin.settings.users.login')">
+          <TextField :id="id" v-model="selectedUser.login" :disabled="isEditingUser" />
         </InputField>
 
-        <InputField :label="$t('admin.settings.users.email')">
-          <TextField v-model="selectedUser.email" />
+        <InputField v-slot="{ id }" :label="$t('admin.settings.users.email')">
+          <TextField :id="id" v-model="selectedUser.email" />
         </InputField>
 
-        <InputField :label="$t('admin.settings.users.avatar_url')">
+        <InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
           <div class="flex gap-2">
             <img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
-            <TextField v-model="selectedUser.avatar_url" />
+            <TextField :id="id" v-model="selectedUser.avatar_url" />
           </div>
         </InputField>
 

web/src/components/form/InputField.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
     <div class="flex items-center mb-2">
-      <label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label>
+      <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
       <slot v-else-if="$slots['titleActions']" name="titleActions" />
     </div>
-    <slot />
+    <slot :id="id" />
     <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
       <slot name="description" />
     </div>
@@ -19,6 +19,8 @@ defineProps<{
   label: string;
   docsUrl?: string;
 }>();
+
+const id = (Math.random() + 1).toString(36).substring(7);
 </script>
 
 <script lang="ts">

web/src/components/layout/popups/DeployPipelinePopup.vue

@@ -5,15 +5,15 @@
         <span class="text-xl text-wp-text-100">{{
           $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
         }}</span>
-        <InputField :label="$t('repo.deploy_pipeline.enter_target')">
-          <TextField v-model="payload.environment" required />
+        <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.enter_target')">
+          <TextField :id="id" v-model="payload.environment" required />
         </InputField>
-        <InputField :label="$t('repo.deploy_pipeline.variables.title')">
+        <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.variables.title')">
           <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
           <div class="flex flex-col gap-2">
             <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
-              <TextField :model-value="name" disabled />
-              <TextField :model-value="value" disabled />
+              <TextField :id="id" :model-value="name" disabled />
+              <TextField :id="id" :model-value="value" disabled />
               <div class="w-34 flex-shrink-0">
                 <Button color="red" class="ml-auto" @click="deleteVar(name)">
                   <i-la-times />
@@ -22,11 +22,13 @@
             </div>
             <form class="flex gap-4" @submit.prevent="addPipelineVariable">
               <TextField
+                :id="id"
                 v-model="newPipelineVariable.name"
                 :placeholder="$t('repo.deploy_pipeline.variables.name')"
                 required
               />
               <TextField
+                :id="id"
                 v-model="newPipelineVariable.value"
                 :placeholder="$t('repo.deploy_pipeline.variables.value')"
                 required

web/src/components/layout/popups/ManualPipelinePopup.vue

@@ -3,15 +3,15 @@
     <Panel v-if="!loading">
       <form @submit.prevent="triggerManualPipeline">
         <span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
-        <InputField :label="$t('repo.manual_pipeline.select_branch')">
-          <SelectField v-model="payload.branch" :options="branches" required />
+        <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.select_branch')">
+          <SelectField :id="id" v-model="payload.branch" :options="branches" required />
         </InputField>
-        <InputField :label="$t('repo.manual_pipeline.variables.title')">
+        <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.variables.title')">
           <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
           <div class="flex flex-col gap-2">
             <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
-              <TextField :model-value="name" disabled />
-              <TextField :model-value="value" disabled />
+              <TextField :id="id" :model-value="name" disabled />
+              <TextField :id="id" :model-value="value" disabled />
               <div class="w-34 flex-shrink-0">
                 <Button color="red" class="ml-auto" @click="deleteVar(name)">
                   <i-la-times />
@@ -20,11 +20,13 @@
             </div>
             <form class="flex gap-4" @submit.prevent="addPipelineVariable">
               <TextField
+                :id="id"
                 v-model="newPipelineVariable.name"
                 :placeholder="$t('repo.manual_pipeline.variables.name')"
                 required
               />
               <TextField
+                :id="id"
                 v-model="newPipelineVariable.value"
                 :placeholder="$t('repo.manual_pipeline.variables.value')"
                 required

web/src/components/layout/scaffold/Header.vue

@@ -25,6 +25,7 @@
         <TextField
           v-if="searchBoxPresent"
           class="w-auto <md:w-full <md:order-3"
+          :aria-label="$t('search')"
           :placeholder="$t('search')"
           :model-value="search"
           @update:model-value="(value: string) => $emit('update:search', value)"

web/src/components/repo/settings/BadgeTab.vue

@@ -6,8 +6,9 @@
       </a>
     </template>
 
-    <InputField :label="$t('repo.settings.badge.type')">
+    <InputField v-slot="{ id }" :label="$t('repo.settings.badge.type')">
       <SelectField
+        :id="id"
         v-model="badgeType"
         :options="[
           {
@@ -26,8 +27,8 @@
         required
       />
     </InputField>
-    <InputField :label="$t('repo.settings.badge.branch')">
-      <SelectField v-model="branch" :options="branches" required />
+    <InputField v-slot="{ id }" :label="$t('repo.settings.badge.branch')">
+      <SelectField :id="id" v-model="branch" :options="branches" required />
     </InputField>
 
     <div v-if="badgeContent" class="flex flex-col space-y-4">

web/src/components/repo/settings/CronTab.vue

@@ -37,19 +37,30 @@
 
     <div v-else class="space-y-4">
       <form @submit.prevent="createCron">
-        <InputField :label="$t('repo.settings.crons.name.name')">
-          <TextField v-model="selectedCron.name" :placeholder="$t('repo.settings.crons.name.placeholder')" required />
+        <InputField v-slot="{ id }" :label="$t('repo.settings.crons.name.name')">
+          <TextField
+            :id="id"
+            v-model="selectedCron.name"
+            :placeholder="$t('repo.settings.crons.name.placeholder')"
+            required
+          />
         </InputField>
 
-        <InputField :label="$t('repo.settings.crons.branch.title')">
-          <TextField v-model="selectedCron.branch" :placeholder="$t('repo.settings.crons.branch.placeholder')" />
+        <InputField v-slot="{ id }" :label="$t('repo.settings.crons.branch.title')">
+          <TextField
+            :id="id"
+            v-model="selectedCron.branch"
+            :placeholder="$t('repo.settings.crons.branch.placeholder')"
+          />
         </InputField>
 
         <InputField
+          v-slot="{ id }"
           :label="$t('repo.settings.crons.schedule.title')"
           docs-url="https://pkg.go.dev/github.com/robfig/cron?utm_source=godoc#hdr-CRON_Expression_Format"
         >
           <TextField
+            :id="id"
             v-model="selectedCron.schedule"
             :placeholder="$t('repo.settings.crons.schedule.placeholder')"
             required

web/src/components/repo/settings/GeneralTab.vue

@@ -5,10 +5,13 @@
         docs-url="docs/usage/project-settings#pipeline-path"
         :label="$t('repo.settings.general.pipeline_path.path')"
       >
-        <TextField
-          v-model="repoSettings.config_file"
-          :placeholder="$t('repo.settings.general.pipeline_path.default')"
-        />
+        <template #default="{ id }">
+          <TextField
+            :id="id"
+            v-model="repoSettings.config_file"
+            :placeholder="$t('repo.settings.general.pipeline_path.default')"
+          />
+        </template>
         <template #description>
           <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-wp-text-alt-100">
             <span class="code-box-inline px-1">{{ $t('repo.settings.general.pipeline_path.desc_path_example') }}</span>
@@ -51,9 +54,13 @@
         <RadioField v-model="repoSettings.visibility" :options="projectVisibilityOptions" />
       </InputField>
 
-      <InputField docs-url="docs/usage/project-settings#timeout" :label="$t('repo.settings.general.timeout.timeout')">
+      <InputField
+        v-slot="{ id }"
+        docs-url="docs/usage/project-settings#timeout"
+        :label="$t('repo.settings.general.timeout.timeout')"
+      >
         <div class="flex items-center">
-          <NumberField v-model="repoSettings.timeout" class="w-24" />
+          <NumberField :id="id" v-model="repoSettings.timeout" class="w-24" />
           <span class="ml-4 text-gray-600">{{ $t('repo.settings.general.timeout.minutes') }}</span>
         </div>
       </InputField>

web/src/components/repo/settings/RegistriesTab.vue

@@ -41,22 +41,23 @@
 
     <div v-else class="space-y-4">
       <form @submit.prevent="createRegistry">
-        <InputField :label="$t('repo.settings.registries.address.address')">
+        <InputField v-slot="{ id }" :label="$t('repo.settings.registries.address.address')">
           <!-- TODO: check input field Address is a valid address -->
           <TextField
+            :id="id"
             v-model="selectedRegistry.address"
             :placeholder="$t('repo.settings.registries.address.placeholder')"
             required
             :disabled="isEditingRegistry"
           />
         </InputField>
 
-        <InputField :label="$t('username')">
-          <TextField v-model="selectedRegistry.username" :placeholder="$t('username')" required />
+        <InputField v-slot="{ id }" :label="$t('username')">
+          <TextField :id="id" v-model="selectedRegistry.username" :placeholder="$t('username')" required />
         </InputField>
 
-        <InputField :label="$t('password')">
-          <TextField v-model="selectedRegistry.password" :placeholder="$t('password')" required />
+        <InputField v-slot="{ id }" :label="$t('password')">
+          <TextField :id="id" v-model="selectedRegistry.password" :placeholder="$t('password')" required />
         </InputField>
 
         <div class="flex gap-2">

web/src/components/secrets/SecretEdit.vue

@@ -1,34 +1,36 @@
 <template>
   <div v-if="innerValue" class="space-y-4">
     <form @submit.prevent="save">
-      <InputField :label="$t(i18nPrefix + 'name')">
+      <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'name')">
         <TextField
+          :id="id"
           v-model="innerValue.name"
           :placeholder="$t(i18nPrefix + 'name')"
           required
           :disabled="isEditingSecret"
         />
       </InputField>
 
-      <InputField :label="$t(i18nPrefix + 'value')">
+      <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'value')">
         <TextField
+          :id="id"
           v-model="innerValue.value"
           :placeholder="$t(i18nPrefix + 'value')"
           :lines="5"
           :required="!isEditingSecret"
         />
       </InputField>
 
-      <InputField :label="$t(i18nPrefix + 'images.images')">
+      <InputField v-slot="{ id }" :label="$t(i18nPrefix + 'images.images')">
         <span class="ml-1 mb-2 text-wp-text-alt-100">{{ $t(i18nPrefix + 'images.desc') }}</span>
 
         <div class="flex flex-col gap-2">
           <div v-for="image in innerValue.images" :key="image" class="flex gap-2">
-            <TextField :model-value="image" disabled />
+            <TextField :id="id" :model-value="image" disabled />
             <Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" />
           </div>
           <div class="flex gap-2">
-            <TextField v-model="newImage" @keydown.enter.prevent="addNewImage" />
+            <TextField :id="id" v-model="newImage" @keydown.enter.prevent="addNewImage" />
             <Button type="button" color="gray" start-icon="plus" @click="addNewImage" />
           </div>
         </div>

web/src/components/user/UserGeneralTab.vue

@@ -1,10 +1,11 @@
 <template>
   <Settings :title="$t('user.settings.general.general')">
-    <InputField :label="$t('user.settings.general.language')">
-      <SelectField v-model="selectedLocale" :options="localeOptions" />
+    <InputField v-slot="{ id }" :label="$t('user.settings.general.language')">
+      <SelectField :id="id" v-model="selectedLocale" :options="localeOptions" />
     </InputField>
-    <InputField :label="$t('user.settings.general.theme.theme')">
+    <InputField v-slot="{ id }" :label="$t('user.settings.general.theme.theme')">
       <SelectField
+        :id="id"
         v-model="storeTheme"
         :options="[
           { value: 'auto', text: $t('user.settings.general.theme.auto') },