From f1ddfd5430c7d304492dc0f11a6bfb286cb6b08d Mon Sep 17 00:00:00 2001
From: "John C. Riedel" <john@datavint.com>
Date: Mon, 13 Jan 2025 22:29:34 +0000
Subject: [PATCH] [Forms/UI] fix for "incorrect use of label for=FORM_ELEMENT"
 bug

---
 e2e/README.md                                        |  2 +-
 e2e/appActions.js                                    |  2 +-
 e2e/tests/functional/forms.e2e.spec.js               |  4 ++--
 src/api/forms/components/FormRow.vue                 |  6 +++++-
 .../forms/components/controls/AutoCompleteField.vue  |  5 ++++-
 src/api/forms/components/controls/DatetimeField.vue  |  7 ++++++-
 src/api/forms/components/controls/FileInput.vue      |  5 +++--
 src/api/forms/components/controls/LocatorField.vue   |  6 ++++++
 src/api/forms/components/controls/NumberField.vue    |  4 +++-
 src/api/forms/components/controls/SelectField.vue    |  4 +++-
 src/api/forms/components/controls/TextAreaField.vue  | 12 ++++--------
 .../forms/components/controls/ToggleSwitchField.vue  |  4 ++--
 src/plugins/charts/scatter/plugin.js                 |  1 -
 src/plugins/displayLayout/DisplayLayoutType.js       |  4 ++++
 src/plugins/gauge/GaugePlugin.js                     |  2 +-
 src/plugins/gauge/components/GaugeFormController.vue |  7 +++++--
 src/ui/components/SearchComponent.vue                |  7 +++++++
 src/ui/layout/MctTree.vue                            |  7 +++++++
 18 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/e2e/README.md b/e2e/README.md
index 881d8d23279..33491b7ebde 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -426,7 +426,7 @@ By adhering to this principle, we can create tests that are both robust and refl
   // Fill the "Notes" section with information about the
   // currently running test and its project.
   const { testNotes } = page;
-  const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
+  const notesInput = page.locator('form[name="mctForm"] #form-notes');
   await notesInput.fill(testNotes);
   ```
 
diff --git a/e2e/appActions.js b/e2e/appActions.js
index 7bb82726f20..89e617d71b5 100644
--- a/e2e/appActions.js
+++ b/e2e/appActions.js
@@ -93,7 +93,7 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     // Fill the "Notes" section with information about the
     // currently running test and its project.
     // eslint-disable-next-line playwright/no-raw-locators
-    await page.locator('#notes-textarea').fill(page.testNotes);
+    await page.locator('#form-notes').fill(page.testNotes);
   }
 
   await page.getByRole('button', { name: 'Save' }).click();
diff --git a/e2e/tests/functional/forms.e2e.spec.js b/e2e/tests/functional/forms.e2e.spec.js
index bda12a48944..6523496eba3 100644
--- a/e2e/tests/functional/forms.e2e.spec.js
+++ b/e2e/tests/functional/forms.e2e.spec.js
@@ -223,8 +223,8 @@ test.describe('Persistence operations @couchdb @network', () => {
     // Both pages: Fill the "Notes" section with information about the
     // currently running test and its project.
     const testNotes = page.testNotes;
-    const notesInput = page.locator('form[name="mctForm"] #notes-textarea');
-    const notesInput2 = page2.locator('form[name="mctForm"] #notes-textarea');
+    const notesInput = page.locator('form[name="mctForm"] #form-notes');
+    const notesInput2 = page2.locator('form[name="mctForm"] #form-notes');
     await Promise.all([notesInput.fill(testNotes), notesInput2.fill(testNotes)]);
 
     // Page 2: Click "OK" to create the domain object and wait for navigation.
diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue
index ce1c88e403d..a940de144c0 100644
--- a/src/api/forms/components/FormRow.vue
+++ b/src/api/forms/components/FormRow.vue
@@ -22,7 +22,11 @@
 
 <template>
   <div class="form-row c-form__row" :class="[{ first: first }, cssClass]" @on-change="onChange">
-    <label class="c-form-row__label" :title="row.description" :for="`form-${row.key}`">
+    <label
+      class="c-form-row__label"
+      :title="row.description"
+      :for="row.key ? `form-${row.key}` : null"
+    >
       {{ row.name }}
     </label>
     <div class="c-form-row__state-indicator" :class="reqClass"></div>
diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
index 12224a8792c..7d59ccf2f63 100644
--- a/src/api/forms/components/controls/AutoCompleteField.vue
+++ b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -23,6 +23,7 @@
   <div ref="autoCompleteForm" class="form-control c-input--autocomplete js-autocomplete">
     <div class="c-input--autocomplete__wrapper">
       <input
+        :id="fieldId"
         ref="autoCompleteInput"
         v-model="field"
         class="c-input--autocomplete__input js-autocomplete__input"
@@ -94,7 +95,8 @@ export default {
       hideOptions: true,
       showFilteredOptions: false,
       optionIndex: 0,
-      field: this.model.value
+      field: this.model.value,
+      fieldId: null
     };
   },
   computed: {
@@ -166,6 +168,7 @@ export default {
     } else {
       this.options = this.model.options;
     }
+    this.fieldId = this.model.key ? 'form-' + this.model.key : null;
   },
   unmounted() {
     document.body.removeEventListener('click', this.handleOutsideClick);
diff --git a/src/api/forms/components/controls/DatetimeField.vue b/src/api/forms/components/controls/DatetimeField.vue
index 1be6ed352b5..9a6a409fd7e 100644
--- a/src/api/forms/components/controls/DatetimeField.vue
+++ b/src/api/forms/components/controls/DatetimeField.vue
@@ -29,6 +29,7 @@
     <div class="hint timezone">Timezone</div>
     <form ref="dateTimeForm" prevent class="u-contents">
       <input
+        :id="dateFieldId"
         v-model="date"
         class="field control date"
         :pattern="/\d{4}-\d{2}-\d{2}/"
@@ -92,11 +93,15 @@ export default {
       date: '',
       hour: 0,
       min: 0,
-      sec: 0
+      sec: 0,
+      dateFieldId: null
     };
   },
   mounted() {
     this.formatDatetime();
+    if (this.model.key) {
+      this.dateFieldId = 'form-' + this.model.key;
+    }
   },
   methods: {
     convertToDatetime(timestamp) {
diff --git a/src/api/forms/components/controls/FileInput.vue b/src/api/forms/components/controls/FileInput.vue
index dd27d6ea3a5..bef8be8d7db 100644
--- a/src/api/forms/components/controls/FileInput.vue
+++ b/src/api/forms/components/controls/FileInput.vue
@@ -31,7 +31,7 @@
         style="display: none"
         aria-labelledby="fileSelect"
       />
-      <button id="fileSelect" class="c-button" @click="selectFile">
+      <button :id="fileButtonId" class="c-button" @click="selectFile">
         {{ name }}
       </button>
       <button
@@ -56,7 +56,8 @@ export default {
   emits: ['on-change'],
   data() {
     return {
-      fileInfo: undefined
+      fileInfo: undefined,
+      fileButtonId: this.model.key ? 'form-' + this.model.key : null
     };
   },
   computed: {
diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
index 7dc159a6dc2..53939436d36 100644
--- a/src/api/forms/components/controls/LocatorField.vue
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -22,6 +22,7 @@
 
 <template>
   <MctTree
+    :form-key="formKey"
     :is-selector-tree="true"
     :initial-selection="model.parent"
     @tree-item-selection="handleItemSelection"
@@ -43,6 +44,11 @@ export default {
     }
   },
   emits: ['on-change'],
+  data() {
+    return {
+      formKey: this.model.key ? 'form-' + this.model.key : null
+    };
+  },
   methods: {
     handleItemSelection(item) {
       const data = {
diff --git a/src/api/forms/components/controls/NumberField.vue b/src/api/forms/components/controls/NumberField.vue
index 187266fceda..99f75a94b73 100644
--- a/src/api/forms/components/controls/NumberField.vue
+++ b/src/api/forms/components/controls/NumberField.vue
@@ -24,6 +24,7 @@
   <span class="form-control shell">
     <span class="field control" :class="model.cssClass">
       <input
+        :id="fieldId"
         v-model="field"
         :aria-label="model.name"
         type="number"
@@ -49,7 +50,8 @@ export default {
   emits: ['on-change'],
   data() {
     return {
-      field: this.model.value
+      field: this.model.value,
+      fieldId: this.model.key ? 'form-' + this.model.key : null
     };
   },
   mounted() {
diff --git a/src/api/forms/components/controls/SelectField.vue b/src/api/forms/components/controls/SelectField.vue
index 38c5f18fda8..ba117ea70bf 100644
--- a/src/api/forms/components/controls/SelectField.vue
+++ b/src/api/forms/components/controls/SelectField.vue
@@ -23,6 +23,7 @@
 <template>
   <div class="form-control select-field">
     <select
+      :id="fieldId"
       v-model="selected"
       required="model.required"
       name="mctControl"
@@ -47,7 +48,8 @@ export default {
   emits: ['on-change'],
   data() {
     return {
-      selected: this.model.value
+      selected: this.model.value,
+      fieldId: this.model.key ? 'form-' + this.model.key : null
     };
   },
   methods: {
diff --git a/src/api/forms/components/controls/TextAreaField.vue b/src/api/forms/components/controls/TextAreaField.vue
index 98c93b9a5a7..dcaea5b5a3e 100644
--- a/src/api/forms/components/controls/TextAreaField.vue
+++ b/src/api/forms/components/controls/TextAreaField.vue
@@ -23,13 +23,7 @@
 <template>
   <span class="form-control shell">
     <span class="field control" :class="model.cssClass">
-      <textarea
-        :id="`${model.key}-textarea`"
-        v-model="field"
-        type="text"
-        :size="model.size"
-        @input="updateText()"
-      >
+      <textarea :id="fieldId" v-model="field" type="text" :size="model.size" @input="updateText()">
       </textarea>
     </span>
   </span>
@@ -48,11 +42,13 @@ export default {
   emits: ['on-change'],
   data() {
     return {
-      field: this.model.value
+      field: this.model.value,
+      fieldId: null
     };
   },
   mounted() {
     this.updateText = throttle(this.updateText.bind(this), 500);
+    this.fieldId = this.model.key ? 'form-' + this.model.key : null;
   },
   methods: {
     updateText() {
diff --git a/src/api/forms/components/controls/ToggleSwitchField.vue b/src/api/forms/components/controls/ToggleSwitchField.vue
index 4ca3e9a64fe..6bcc974cbcc 100644
--- a/src/api/forms/components/controls/ToggleSwitchField.vue
+++ b/src/api/forms/components/controls/ToggleSwitchField.vue
@@ -24,7 +24,7 @@
   <span class="form-control shell">
     <span class="field control" :class="model.cssClass">
       <ToggleSwitch
-        id="switchId"
+        :id="switchId"
         :checked="isChecked"
         :name="model.name"
         @change="toggleCheckBox"
@@ -53,7 +53,7 @@ export default {
   },
   data() {
     return {
-      switchId: `toggleSwitch-${uuid}`,
+      switchId: this.model.key ? 'form-' + this.model.key : `toggleSwitch-${uuid}`,
       isChecked: this.model.value
     };
   }
diff --git a/src/plugins/charts/scatter/plugin.js b/src/plugins/charts/scatter/plugin.js
index 16198a250f1..d261075835b 100644
--- a/src/plugins/charts/scatter/plugin.js
+++ b/src/plugins/charts/scatter/plugin.js
@@ -63,7 +63,6 @@ export default function () {
           name: 'Underlay ranges',
           control: 'scatter-plot-form-control',
           cssClass: 'l-input',
-          key: 'scatterPlotForm',
           required: false,
           hideFromInspector: false,
           property: ['configuration', 'ranges'],
diff --git a/src/plugins/displayLayout/DisplayLayoutType.js b/src/plugins/displayLayout/DisplayLayoutType.js
index b0d28126bd0..7f0f85c0c95 100644
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@@ -37,6 +37,7 @@ export default function DisplayLayoutType() {
     form: [
       {
         name: 'Horizontal grid (px)',
+        key: 'horizontalGrid',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutGrid', 0],
@@ -44,6 +45,7 @@ export default function DisplayLayoutType() {
       },
       {
         name: 'Vertical grid (px)',
+        key: 'verticalGrid',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutGrid', 1],
@@ -51,6 +53,7 @@ export default function DisplayLayoutType() {
       },
       {
         name: 'Horizontal size (px)',
+        key: 'horizontalSize',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutDimensions', 0],
@@ -58,6 +61,7 @@ export default function DisplayLayoutType() {
       },
       {
         name: 'Vertical size (px)',
+        key: 'verticalSize',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutDimensions', 1],
diff --git a/src/plugins/gauge/GaugePlugin.js b/src/plugins/gauge/GaugePlugin.js
index 23fab150038..92666c4f663 100644
--- a/src/plugins/gauge/GaugePlugin.js
+++ b/src/plugins/gauge/GaugePlugin.js
@@ -73,7 +73,7 @@ export default function () {
           }),
           control: 'select',
           cssClass: 'l-input-sm',
-          key: 'gaugeController',
+          key: 'gaugeType',
           property: ['configuration', 'gaugeController', 'gaugeType']
         },
         {
diff --git a/src/plugins/gauge/components/GaugeFormController.vue b/src/plugins/gauge/components/GaugeFormController.vue
index 1fa205cb12a..5af1f10bb93 100644
--- a/src/plugins/gauge/components/GaugeFormController.vue
+++ b/src/plugins/gauge/components/GaugeFormController.vue
@@ -24,7 +24,7 @@
   <span class="form-control">
     <span class="field control" :class="model.cssClass">
       <ToggleSwitch
-        :id="'gaugeToggle'"
+        :id="fieldId"
         :checked="isUseTelemetryLimits"
         label="Use telemetry limits for minimum and maximum ranges"
         @change="toggleUseTelemetryLimits"
@@ -84,6 +84,8 @@
 </template>
 
 <script>
+import { v4 as uuid } from 'uuid';
+
 import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
 
 export default {
@@ -106,7 +108,8 @@ export default {
       limitHigh: this.model.value.limitHigh,
       limitLow: this.model.value.limitLow,
       max: this.model.value.max,
-      min: this.model.value.min
+      min: this.model.value.min,
+      fieldId: this.model.key ? 'form-' + this.model.key : 'gaugeToggle-' + uuid()
     };
   },
   methods: {
diff --git a/src/ui/components/SearchComponent.vue b/src/ui/components/SearchComponent.vue
index 0dee40984ad..4e92e57757c 100644
--- a/src/ui/components/SearchComponent.vue
+++ b/src/ui/components/SearchComponent.vue
@@ -22,6 +22,7 @@
 <template>
   <div class="c-search" v-bind="$attrs" :class="{ 'is-active': active }">
     <input
+      :id="formKey"
       class="c-search__input"
       aria-label="Search Input"
       tabindex="0"
@@ -40,6 +41,12 @@
 export default {
   inheritAttrs: false,
   props: {
+    formKey: {
+      type: String,
+      default() {
+        return null;
+      }
+    },
     value: {
       type: String,
       default: ''
diff --git a/src/ui/layout/MctTree.vue b/src/ui/layout/MctTree.vue
index 3e88d0c0497..a53749d9e68 100644
--- a/src/ui/layout/MctTree.vue
+++ b/src/ui/layout/MctTree.vue
@@ -31,6 +31,7 @@
       <Search
         v-show="isSelectorTree"
         ref="shell-search"
+        :form-key="formKey"
         class="c-search"
         :value="searchValue"
         @input="searchTree"
@@ -150,6 +151,12 @@ export default {
         return {};
       }
     },
+    formKey: {
+      type: String,
+      default() {
+        return null;
+      }
+    },
     syncTreeNavigation: {
       type: Boolean,
       required: false