Incorrect use of <label for=FORM_ELEMENT>

[johnriedel]

Summary

Every form row created via the Forms API is given a label element with a "for" attribute (src/api/forms/components/FormRow.vue:25). However, this attribute is ineffective since the form controls created via the FormController don't implement a matching ID. This causes the following error:

Expected vs Current Behavior

The expected behavior when the "for" attribute is used in a label element is to bring focus to the associated form control when the label is clicked.

Actual behavior: nothing happens when the label is clicked.

Steps to Reproduce

1. Click "+Create" in the upper left corner.
2. Click "Clock"
3. Click on the "Notes" label
4. Notice the focus isn't put on the textarea field. This is because the ID specified in the label's "for" attribute differs from the form control's ID.

Environment

• Open MCT Version: 4.1.0-next
• Deployment Type:
• OS:
• Browser:

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

[johnriedel]

Code update complete. Opening PR shortly......

[johnriedel]

Associated PR: #7982