From 5a7e314f5aa5551d584ee3eefce2cf855862d181 Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Tue, 19 Dec 2023 21:32:35 +0100
Subject: [PATCH] Link labels to input and select (#2974)

---
 .../admin/settings/AdminAgentsTab.vue         | 33 ++++++++++++-------
 .../admin/settings/AdminUsersTab.vue          | 12 +++----
 web/src/components/form/InputField.vue        |  6 ++--
 .../layout/popups/DeployPipelinePopup.vue     | 12 ++++---
 .../layout/popups/ManualPipelinePopup.vue     | 12 ++++---
 web/src/components/layout/scaffold/Header.vue |  1 +
 web/src/components/repo/settings/BadgeTab.vue |  7 ++--
 web/src/components/repo/settings/CronTab.vue  | 19 ++++++++---
 .../components/repo/settings/GeneralTab.vue   | 19 +++++++----
 .../repo/settings/RegistriesTab.vue           | 11 ++++---
 web/src/components/secrets/SecretEdit.vue     | 12 ++++---
 web/src/components/user/UserGeneralTab.vue    |  7 ++--
 12 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/components/admin/settings/AdminAgentsTab.vue
index 016ccfff0..d3aed08eb 100644
--- a/web/src/components/admin/settings/AdminAgentsTab.vue
+++ b/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)
diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/components/admin/settings/AdminUsersTab.vue
index 1aef2cf64..62c35c8e6 100644
--- a/web/src/components/admin/settings/AdminUsersTab.vue
+++ b/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>
 
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 61d852af6..badde060e 100644
--- a/web/src/components/form/InputField.vue
+++ b/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">
diff --git a/web/src/components/layout/popups/DeployPipelinePopup.vue b/web/src/components/layout/popups/DeployPipelinePopup.vue
index 29398a3a1..d19301433 100644
--- a/web/src/components/layout/popups/DeployPipelinePopup.vue
+++ b/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
diff --git a/web/src/components/layout/popups/ManualPipelinePopup.vue b/web/src/components/layout/popups/ManualPipelinePopup.vue
index 16996e862..a1d25aca5 100644
--- a/web/src/components/layout/popups/ManualPipelinePopup.vue
+++ b/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
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 84de5f87a..c31794c66 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/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)"
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index 1339f88a0..74d56f08b 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/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">
diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/components/repo/settings/CronTab.vue
index 1c62f3c95..604a452b2 100644
--- a/web/src/components/repo/settings/CronTab.vue
+++ b/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
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/components/repo/settings/GeneralTab.vue
index 3f12a8cec..3d0dccfbf 100644
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/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>
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
index 3331620fd..445df9037 100644
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@@ -41,9 +41,10 @@
 
     <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
@@ -51,12 +52,12 @@
           />
         </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">
diff --git a/web/src/components/secrets/SecretEdit.vue b/web/src/components/secrets/SecretEdit.vue
index aa52bbb99..199313986 100644
--- a/web/src/components/secrets/SecretEdit.vue
+++ b/web/src/components/secrets/SecretEdit.vue
@@ -1,8 +1,9 @@
 <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
@@ -10,8 +11,9 @@
         />
       </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"
@@ -19,16 +21,16 @@
         />
       </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>
diff --git a/web/src/components/user/UserGeneralTab.vue b/web/src/components/user/UserGeneralTab.vue
index ecacb600e..435f8c231 100644
--- a/web/src/components/user/UserGeneralTab.vue
+++ b/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') },