Add id prop to ProjectGroupPicker for labeling

Expose an optional id prop on ProjectGroupPicker and bind it to the internal input. Update usages across dashboard and workspace create/export pages to pass unique ids and restructure markup so labels use for="..." (replacing implicit label-wrapping with explicit labels and container divs). This improves accessibility by ensuring labels are correctly associated with the picker inputs; no functional behavior changes.

Author: shweta2101

components/ProjectGroupPicker.vue

@@ -2,6 +2,7 @@
   <div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
     <input
       v-model="searchText"
+      :id="props.id"
       type="text"
       class="form-select"
       :disabled="props.disabled"
@@ -88,7 +89,7 @@ import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
 import type { TdeiProjectGroupItem } from '~/types/tdei'
 
-const props = withDefaults(defineProps<{ disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
+const props = withDefaults(defineProps<{ id?: string; disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
   disabled: false,
 })
 

pages/dashboard.vue

@@ -4,7 +4,10 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
+        <project-group-picker
+          id="ws_project_group_picker"
+          v-model="currentProjectGroup"
+        />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />

pages/workspace/[id]/export/tdei.vue

@@ -62,13 +62,16 @@
               Dataset Name
               <input v-model.trim="datasetName" class="form-control" />
             </label>
-            <label class="d-block mt-3">
-              Project Group
+            <div class="mt-3">
+              <label class="d-block" for="export_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="export_tdei_project_group"
                 v-model="workspace.tdeiProjectGroupId"
                 :options="eligibleProjectGroups"
               />
-            </label>
+            </div>
             <label class="d-block mt-3">
               Service
               <service-picker

pages/workspace/create/blank.vue

@@ -11,10 +11,15 @@
               <input v-model.trim="workspaceTitle" class="form-control" />
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
-              <project-group-picker v-model="projectGroupId" />
-            </label>
+            <div class="mb-3">
+              <label class="d-block" for="create_blank_project_group">
+                Project Group
+              </label>
+              <project-group-picker
+                id="create_blank_project_group"
+                v-model="projectGroupId"
+              />
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio v-model="datasetType" class="mb-3" />

pages/workspace/create/file.vue

@@ -16,14 +16,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_file_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_file_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio
@@ -109,4 +112,3 @@ async function create() {
   }
 }
 </script>
-

pages/workspace/create/tdei.vue

@@ -20,14 +20,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_tdei_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <label v-if="!$route.query.tdeiRecordId" class="d-block mb-3">
               Dataset