[TASK] Add "for" attribute to form editor label tags 98/56698/4
authorRalf Zimmermann <ralf.zimmermann@tritum.de>
Tue, 17 Apr 2018 07:49:13 +0000 (09:49 +0200)
committerGeorg Ringer <georg.ringer@gmail.com>
Tue, 17 Apr 2018 14:31:55 +0000 (16:31 +0200)
Add for attribute to form editor label tags within the inspector area.

Resolves: #79609
Releases: master
Change-Id: Ib10ce8317d018fd8c00a49c6b1d6e84087ca1626
Reviewed-on: https://review.typo3.org/56698
Reviewed-by: Björn Jacob <bjoern.jacob@tritum.de>
Tested-by: Björn Jacob <bjoern.jacob@tritum.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
13 files changed:
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/CheckboxEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/GridColumnViewPortConfigurationEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/MultiSelectEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/PropertyGridEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/RequiredValidatorEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/SingleSelectEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/TextEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/TextareaEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/Typo3WinBrowserEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidationErrorMessageEditor.html
typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js

index 314ab3a..f3b2eed 100644 (file)
@@ -1,10 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group">
-               <label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
                        <span data-template-property="label" />
                        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                               <input type="checkbox" />
+                               <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
                        </div>
                </label>
        </div>
index e612485..f7cacec 100644 (file)
@@ -1,8 +1,8 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-       <h3><span data-template-property="label" /></h3>
+       <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><h3><span data-template-property="label" /></h3></label>
        <div id="t3-form-add-finisher" class="t3-form-add-collection-element">
-               <select data-template-property="selectOptions" class="form-control" />
+               <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control" />
        </div>
 </div>
 <div id="t3-form-inspector-finishers" class="t3-form-collection-container" data-identifier="inspectorFinishers">
index a7325c9..c04a723 100644 (file)
@@ -1,15 +1,15 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group" data-identifier="editorWrapper">
-               <label><span data-template-property="label" /></label><br>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label><br>
                <div class="t3-form-controls btn-group" data-identifier="inspectorEditorControlsWrapper">
                        <button type="button" class="btn btn-default" data-identifier="viewportButton"></button>
                </div>
        </div>
        <div class="t3-form-control-group form-group" data-template-property="numbersOfColumnsToUse">
-               <label><span data-template-property="numbersOfColumnsToUse-label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="numbersOfColumnsToUse-label" /></label>
                <div class="t3-form-controls" data-identifier="numbersOfColumnsToUse-inspectorEditorControlsWrapper">
-                       <input type="number" value="" data-template-property="numbersOfColumnsToUse-propertyPath" class="form-control">
+                       <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="number" value="" data-template-property="numbersOfColumnsToUse-propertyPath" class="form-control">
                </div>
                <span data-template-property="numbersOfColumnsToUse-fieldExplanationText" />
        </div>
index 4c3150a..a82e44c 100644 (file)
@@ -1,8 +1,8 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="t3-form-control-group form-group">
-       <label><span data-template-property="label" /></label>
+       <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-               <select data-template-property="selectOptions" class="form-control" multiple="multiple" />
+               <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control" multiple="multiple" />
        </div>
 </div>
 </html>
index 20e3d99..064ab17 100644 (file)
@@ -1,7 +1,7 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group property-grid">
-               <label><span data-template-property="label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
                <div data-editor="new-property-grid" data-template-property="newPropertyPath">
                        <table class="table table-hover" data-identifier="propertyGridContainer">
                                <thead>
@@ -28,7 +28,7 @@
                                        <tr data-identifier="addRowItem">
                                                <td>
                                                        <div class="btn-group btn-group-sm" role="group">
-                                                               <button class="btn btn-default" title="Add a new row" data-identifier="addRow"><core:icon identifier="actions-add" /></button>
+                                                               <button data-random-id data-random-id-attribute="id" data-random-id-number="1" class="btn btn-default" title="Add a new row" data-identifier="addRow"><core:icon identifier="actions-add" /></button>
                                                        </div>
                                                </td>
                                                <td></td>
index 96ddf44..6b148ef 100644 (file)
@@ -1,17 +1,17 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group" data-identifier="editorWrapper">
-               <label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1">
                        <span data-template-property="label" />
                        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                               <input type="checkbox" />
+                               <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="checkbox" />
                        </div>
                </label>
        </div>
        <div class="t3-form-control-group form-group" data-template-property="validationErrorMessage">
-               <label><span data-template-property="validationErrorMessage-label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="2"><span data-template-property="validationErrorMessage-label" /></label>
                <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                       <input type="text" value="" data-template-property="validationErrorMessage-propertyPath" class="form-control">
+                       <input data-random-id data-random-id-attribute="id" data-random-id-number="2" type="text" value="" data-template-property="validationErrorMessage-propertyPath" class="form-control">
                </div>
                <span data-template-property="validationErrorMessage-fieldExplanationText" />
        </div>
index 2cc03cf..9e18791 100644 (file)
@@ -1,8 +1,8 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="t3-form-control-group form-group">
-       <label><span data-template-property="label" /></label>
+       <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-               <select data-template-property="selectOptions" class="form-control" />
+               <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control" />
        </div>
 </div>
 </html>
index 350053f..7522f2c 100644 (file)
@@ -1,10 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group">
-               <label><span data-template-property="label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
                <div class="input-group" data-identifier="inspectorEditorControlsGroup">
                        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                               <input type="text" value="" data-template-property="propertyPath" class="form-control">
+                               <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="text" value="" data-template-property="propertyPath" class="form-control">
                        </div>
                        <span class="input-group-btn" role="group" data-identifier="inspectorEditorFormElementSelectorControlsWrapper">
                                <span class="btn-group t3-form-dropdown-buttons" data-identifier="inspectorEditorFormElementSelectorSplitButtonContainer">
index ab96bbc..3e7656b 100644 (file)
@@ -1,9 +1,9 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group">
-               <label><span data-template-property="label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
                <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                       <textarea data-template-property="propertyPath" class="form-control" />
+                       <textarea data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="propertyPath" class="form-control" />
                </div>
                <span data-template-property="fieldExplanationText" />
        </div>
index 5d52590..071d501 100644 (file)
@@ -1,9 +1,9 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group">
-               <label><span data-template-property="label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
                <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                       <input type="text" value="" data-template-property="propertyPath" class="form-control" data-insert-target="">
+                       <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="text" value="" data-template-property="propertyPath" class="form-control" data-insert-target="">
                        <div class="help-block">
                                <a href="#" data-template-property="onclick" class="btn btn-default">
                                        <span class="t3js-icon icon icon-size-small icon-state-default icon-mimetypes-x-content-text" data-identifier="mimetypes-x-content-text">
index 1eb903b..caea726 100644 (file)
@@ -1,10 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
        <div class="t3-form-control-group form-group">
-               <label><span data-template-property="label" /></label>
+               <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label" /></label>
                <div data-identifier="inspectorEditorControlsGroup">
                        <div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
-                               <input type="text" value="" data-template-property="propertyPath" class="form-control">
+                               <input data-random-id data-random-id-attribute="id" data-random-id-number="1" type="text" value="" data-template-property="propertyPath" class="form-control">
                        </div>
                </div>
                <span data-template-property="fieldExplanationText" />
index 0ff8c72..6f96fcd 100644 (file)
@@ -1,8 +1,8 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="form-editor">
-       <h3><span data-template-property="label" /></h3>
+       <label data-random-id data-random-id-attribute="for" data-random-id-number="1"><h3><span data-template-property="label" /></h3></label>
        <div id="t3-form-add-validator" class="t3-form-add-collection-element" data-template-property="selectOptionsContainer">
-               <select data-template-property="selectOptions" class="form-control" />
+               <select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control" />
        </div>
 </div>
 <div id="t3-form-inspector-validators" class="t3-form-collection-container" data-identifier="inspectorValidators">
index 13d0b0c..541f0c4 100644 (file)
@@ -56,7 +56,10 @@ define(['jquery',
       domElementDataAttributeNames: {
         contentElementSelectorTarget: 'data-insert-target',
         finisher: 'data-finisher-identifier',
-        validator: 'data-validator-identifier'
+        validator: 'data-validator-identifier',
+        randomId: 'data-random-id',
+        randomIdTarget: 'data-random-id-attribute',
+        randomIdIndex: 'data-random-id-number'
       },
       domElementDataAttributeValues: {
         collapse: 'actions-view-table-expand',
@@ -700,6 +703,40 @@ define(['jquery',
       return propertyData;
     };
 
+    /**
+     * @private
+     *
+     * @param object
+     * @throws 1523904699
+     */
+    function _setRandomIds(html) {
+      assert(
+        'object' === $.type(html),
+        'Invalid input "html"',
+        1523904699
+      );
+
+      $(getHelper().getDomElementClassName('inspectorEditor', true)).each(function(e) {
+        var $parent = $(this),
+            idReplacements = {};
+
+        $(getHelper().getDomElementDataAttribute('randomId', 'bracesWithKey'), $parent).each(function(e) {
+            var $element = $(this),
+                targetAttribute = $element.attr(getHelper().getDomElementDataAttribute('randomIdTarget')),
+                randomIdIndex = $element.attr(getHelper().getDomElementDataAttribute('randomIdIndex'));
+
+            if ($element.is('[' + targetAttribute + ']')) {
+                return true;
+            }
+
+            if (!idReplacements.hasOwnProperty(randomIdIndex)) {
+              idReplacements[randomIdIndex] = 'fe' + Math.floor(Math.random() * 42) + Date.now();
+            }
+            $element.attr(targetAttribute, idReplacements[randomIdIndex]);
+        });
+      });
+    };
+
     /* *************************************************************
      * Public Methodes
      * ************************************************************/
@@ -809,6 +846,7 @@ define(['jquery',
           .addClass(getHelper().getDomElementClassName('inspectorEditor'));
         getInspectorDomElement().append($(html));
 
+        _setRandomIds(html);
         _renderEditorDispatcher(formElementTypeDefinition['editors'][i], html);
       }
 
@@ -909,6 +947,7 @@ define(['jquery',
           getCollectionElementDomElement(collectionName, collectionElementIdentifier).append(html);
         }
 
+        _setRandomIds(html);
         _renderEditorDispatcher(
           collectionElementConfiguration['editors'][i],
           html,