Add unique id and for attributes to status elements

Introduces dynamic id and for attributes to readonly status, dropdown, menu items, and failed remark button for improved accessibility and testability in TaskStatusComponent.vue.

src/pages/09_task-order/TaskStatusComponent.vue

@@ -60,16 +60,25 @@ function inactiveCheck() {
 </script>
 <template>
   <div
+    :id="`readonly-status-${status}`"
+    :for="`readonly-status-${status}`"
     v-if="readonly"
     class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap"
     :style="`color: hsl(var(--${currStatus?.color}-bg))`"
   >
-    <q-icon :name="currStatus?.icon" class="q-pr-xs" size="xs" />
-    {{ $t(`taskOrder.status.${status}`) }}
+    <q-icon
+      :id="`readonly-status-icon-${status}`"
+      :name="currStatus?.icon"
+      class="q-pr-xs"
+      size="xs"
+    />
+    <span :id="`readonly-status-label-${status}`">{{ $t(`taskOrder.status.${status}`) }}</span>
   </div>
 
   <div v-else class="row items-center justify-center no-wrap">
     <q-btn-dropdown
+      :id="`btn-dropdown-status-${status}`"
+      :for="`btn-dropdown-status-${status}`"
       dense
       unelevated
       :label="
@@ -110,6 +119,8 @@ function inactiveCheck() {
     >
       <q-list v-if="!noAction" dense>
         <q-item
+          :for="`menu-item-status-${v.value}`"
+          :id="`menu-item-status-${v.value}`"
           v-for="(v, index) in type === 'order'
             ? {
                 Success: taskStatusOrderToggle.filter(
@@ -147,6 +158,8 @@ function inactiveCheck() {
     </q-btn-dropdown>
 
     <q-btn
+      :id="`btn-failed-remark-${status}`"
+      :for="`btn-failed-remark-${status}`"
       v-if="currStatus?.value === TaskStatus.Failed"
       flat
       dense
@@ -186,9 +199,9 @@ function inactiveCheck() {
 }
 
 :deep(
-    .hide-icon
-      i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
-  ) {
+  .hide-icon
+    i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
+) {
   display: none;
 }
 </style>