MAGETWO-73342: Clicking on area around the label of a toggle element results in the element's state being changed

Author: DianaRusin

app/code/Magento/Catalog/Test/Mftf/Section/AdminProductCustomizableOptionsSection.xml

@@ -14,7 +14,7 @@
         <element name="useDefaultOptionTitle" type="text" selector="[data-index='options'] tr.data-row [data-index='title'] [name^='options_use_default']"/>
         <element name="useDefaultOptionValueTitleByIndex" type="text" selector="[data-index='options'] [data-index='values'] tr[data-repeat-index='{{var1}}'] [name^='options_use_default']" parameterized="true"/>
         <element name="addOptionBtn" type="button" selector="button[data-index='button_add']"/>
-        <element name="fillOptionTitle" type="input" selector="//span[text()='{{var1}}']/parent::div/parent::div/parent::div//span[text()='Option Title']/parent::label/parent::div//input[@class='admin__control-text']" parameterized="true"/>
+        <element name="fillOptionTitle" type="input" selector="//span[text()='{{var1}}']/parent::div/parent::div/parent::div//label[text()='Option Title']/parent::span/parent::div//input[@class='admin__control-text']" parameterized="true"/>
         <element name="checkSelect" type="select" selector="//span[text()='{{var1}}']/parent::div/parent::div/parent::div//span[text()='Option Type']/parent::label/parent::div//div[@data-role='selected-option']" parameterized="true"/>
         <element name="checkDropDown" type="select" selector="//span[text()='{{var1}}']/parent::div/parent::div/parent::div//parent::label/parent::div//li[@class='admin__action-multiselect-menu-inner-item']//label[text()='Drop-down']" parameterized="true"/>
         <element name="clickAddValue" type="button" selector="//span[text()='{{var1}}']/parent::div/parent::div/parent::div//tfoot//button" parameterized="true"/>

app/code/Magento/Catalog/Test/Mftf/Section/AdminProductFormSection.xml

@@ -15,6 +15,8 @@
         <element name="productName" type="input" selector=".admin__field[data-index=name] input"/>
         <element name="productNameUseDefault" type="checkbox" selector="input[name='use_default[name]']"/>
         <element name="productSku" type="input" selector=".admin__field[data-index=sku] input"/>
+        <element name="enableProductAttributeLabel" type="text" selector="//label[text()='Enable Product']"/>
+        <element name="enableProductAttributeLabelWrapper" type="text" selector="//label[text()='Enable Product']/parent::span"/>
         <element name="productStatus" type="checkbox" selector="input[name='product[status]']"/>
         <element name="productStatusUseDefault" type="checkbox" selector="input[name='use_default[status]']"/>
         <element name="productPrice" type="input" selector=".admin__field[data-index=price] input"/>
@@ -31,7 +33,7 @@
         <element name="visibilityUseDefault" type="checkbox" selector="//input[@name='use_default[visibility]']"/>
         <element name="divByDataIndex" type="input" selector="div[data-index='{{var}}']" parameterized="true"/>
         <element name="attributeSetSearchCount" type="text" selector="div[data-index='attribute_set_id'] .admin__action-multiselect-search-count"/>
-        <element name="attributeLabelByText" type="text" selector="//*[@class='admin__field']//span[text()='{{attributeLabel}}']" parameterized="true"/>
+        <element name="attributeLabelByText" type="text" selector="//*[@class='admin__field']//label[text()='{{attributeLabel}}']" parameterized="true"/>
         <element name="addAttributeBtn" type="button" selector="#addAttribute"/>
     </section>
     <section name="ProductInWebsitesSection">

app/code/Magento/Ui/view/base/web/templates/form/field.html

@@ -8,9 +8,9 @@
      visible="visible"
      css="$data.additionalClasses"
      attr="'data-index': index">
-    <label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
-        <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
-    </label>
+    <span class="admin__field-label" if="$data.label" visible="$data.labelVisible">
+        <label translate="label" attr="'data-config-scope': $data.scopeLabel, for: uid"/>
+    </span>
     <div class="admin__field-control"
          css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
         <render args="elementTmpl" ifnot="hasAddons()"/>

app/design/adminhtml/Magento/backend/web/css/source/forms/_fields.less

@@ -183,10 +183,13 @@
 
 .admin__field-label {
     color: @field-label__color;
-    cursor: pointer;
     margin: 0;
     text-align: right;
 
+    label {
+        cursor: pointer;
+    }
+
     + br {
         display: none;
     }
@@ -207,7 +210,7 @@
             overflow: hidden;
         }
 
-        span {
+        label {
             display: inline-block;
             line-height: @field-label__line-height;
             vertical-align: middle;
@@ -512,7 +515,7 @@
                 position: absolute;
                 top: 0;
 
-                span {
+                label {
                     &:before {
                         display: block;
                     }
@@ -527,7 +530,7 @@
         }
 
         & > .admin__field-label {
-            span {
+            label {
                 &:before {
                     display: none;
                 }

dev/tests/functional/tests/app/Magento/Catalog/Test/Block/Adminhtml/Product/ProductForm.php

@@ -28,7 +28,7 @@ class ProductForm extends FormSections
      *
      * @var string
      */
-    protected $attribute = './/*[contains(@class,"label")]/span[text()="%s"]';
+    protected $attribute = './/*[contains(@class,"label")]/label[text()="%s"]';
 
     /**
      * Product new from date field on the product form