[!!!][TASK] Connect label with element in FormEngine

[TYPO3IncTeam]

:information_source: View this commit on Github :busts_in_silhouette: Authored by Christian Kuhn lolli@schwarzbu.ch :heavy_check_mark: Merged by Christian Kuhn lolli@schwarzbu.ch

Commit message

[!!!][TASK] Connect label with element in FormEngine

A single FormEngine element (created by "element" classes that typically extend AbstractFormElement) takes care of the "inner" HTML of an element.

The surrounding "outer" HTML like embedding elements in palettes is created by "container" classes. Also,

tags for single elements are created by container classes, namely PaletteAndSingleContainer and FlexFormElementContainer. The situation having done by a container and the inner HTML done by elements has drawbacks: First, "label" tags should have a "for" attribute, to connect it with input fields having "id" attribute. This is one of the accessibility "must haves". Separating label and fields in different classes does not allow doing this. Secondly, not all elements have such input or select tags at all. In those cases, the label is not a label, but should be a legend embedded in a fieldset. The patch moves the existing label tag generation from container classes to element classes: Only elements know if, how and where label and legend tags should be placed. The patch adds two helper methods to AbstractFormElement to simplify this, and connects the label tag with the input field in all elements or adds a fieldset with a legend. The v12 version of the patch needs to jump through some additional loops: When elements take care of label or legend, they signal this by setting the flag labelHasBeenHandled in the result array. The container then skips label creation to not have them twice. This is a b/w compat layer for not yet adapted custom elements in v12. The v13 version of the patch does not come with this fallback layer and documents needed custom element changes in a ReST file. Resolves: #97330 Releases: main, 12.4 Change-Id: Ia110eef5ec17aa4b7c731c3f82262b932d86958f Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/79492 Tested-by: core-ci Tested-by: Christian Kuhn Reviewed-by: Christian Kuhn ## :heavy_plus_sign: Added files

13.0/Breaking-97330-FormEngineElementClassesMustCreateLabelOrLegend.rst

```rst .. include:: /Includes.rst.txt .. _breaking-97330-1687870738: ========================================================================= Breaking: #97330 - FormEngine element classes must create label or legend ========================================================================= See :issue:`97330` Description =========== When editing records in the Backend, the "FormEngine" class structure located within :file:`EXT:backend/Classes/Form` handles generation of the editing view. A change has been applied related to the rendering of single field labels, which is no longer done automatically by "container" classes: Single elements have to create the label themselves. Extension that add own elements to FormEngine must be adapted, otherwise the element label is no longer rendered. Impact ====== When the required changes are not applied to custom FormEngine element classes, the value of the TCA "label" property is not rendered. Affected installations ====================== Instances with custom FormEngine elements are affected. Custom elements need to be registered to the FormEngine :php:`NodeFactory`, candidates are found by looking at the :php:`$GLOBALS['TYPO3_CONF_VARS']['SYS']['formEngine']` array (for instance using the :php:`EXT:lowlevel` "Configuration" module). Classes registered using the sub keys keys :php:`nodeRegistry` and :php:`nodeResolver` may be affected. The extension scanner does not find affected classes. Migration ========= Custom elements must create take care of creating a :html:`` or :html:`

` tag on their own: If the element creates a :html:`input`, or :html:`select` tag, the :html:`` should have a :html:`for` attribute that points to a field having an :html:`id` attribute. This is important especially for accessibility. When no such target element exists, a :html:`

` embedded in a :html:`

` can be used. There are two helper methods in :php:`AbstractFormElement` to help with this: :php:`renderLabel()` and :php:`wrapWithFieldsetAndLegend()`. In practice, an element having a :html:`input`, or :html:`select` field should essentially look like this: .. code-block:: php $resultArray = $this->initializeResultArray(); // Next line is only needed for extensions that need to keep TYPO3 v12 compatibility $resultArray['labelHasBeenHandled'] = true; $fieldId = StringUtility::getUniqueId('formengine-input-'); $html = []; $html[] = $this->renderLabel($fieldId); $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = ''; $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = '

'; $resultArray['html'] = implode(LF, $html); return $resultArray; The :php:`renderLabel()` is a helper method to generate a :html:`label` tag with a :html:`for` attribute, and the same fieldId is used as :html:`id` attribute in the :html:`input` field to connect :html:`label` and :html:`input` with each other. If there is no such field, a :html:`legend` tag should be used: $resultArray = $this->initializeResultArray(); // Next line is only needed for extensions that need to keep TYPO3 v12 compatibility $resultArray['labelHasBeenHandled'] = true; $html = []; $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = Some custom element html $html[] = '

'; $html[] = '

'; $html[] = '

'; $html[] = '

'; $resultArray['html'] = $this->wrapWithFieldsetAndLegend(implode(LF, $html)); return $resultArray; .. index:: Backend, NotScanned, ext:backend ```

[brotkrueml]

See: https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/User/Index.html#examples