[Forms/UI] fix for "incorrect use of label for=FORM_ELEMENT" bug

Author: johnriedel

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);
   ```
 

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();

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.

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>

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);

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,10 +93,12 @@ export default {
       date: '',
       hour: 0,
       min: 0,
-      sec: 0
+      sec: 0,
+      dateFieldId: null
     };
   },
   mounted() {
+    this.dateFieldId = this.model.key ? 'form-' + this.model.key : null;
     this.formatDatetime();
   },
   methods: {

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: {

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 = {

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() {

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: {

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() {

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
     };
   }

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'],

src/plugins/displayLayout/DisplayLayoutType.js

@@ -37,27 +37,31 @@ export default function DisplayLayoutType() {
     form: [
       {
         name: 'Horizontal grid (px)',
+        key: 'horizontalGrid',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutGrid', 0],
         required: true
       },
       {
         name: 'Vertical grid (px)',
+        key: 'verticalGrid',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutGrid', 1],
         required: true
       },
       {
         name: 'Horizontal size (px)',
+        key: 'horizontalSize',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutDimensions', 0],
         required: false
       },
       {
         name: 'Vertical size (px)',
+        key: 'verticalSize',
         control: 'numberfield',
         cssClass: 'l-input-sm l-numeric',
         property: ['configuration', 'layoutDimensions', 1],

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']
         },
         {

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: {

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: ''

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