.. include:: /Includes.rst.txt

.. _feature-94868:

===========================================================================
Feature: #94868 - Introduce Bootstrap 5 compatible and accessible templates
===========================================================================

See :issue:`94868`

Description
===========

Until now, CSS classes of the frontend templates and partials of the Form
Framework were not consistently included in the form configuration. So far
some classes were present in the form configuration, others were hardcoded
only in the Fluid templates.

This situation has now been fixed for the Bootstrap 5 compatible template
variants stored in :file:`EXT:form/Resources/Private/Frontend/Version2`.
All CSS classes are consistently defined in the form configuration.

This simplifies the integration of the frontend. The change makes it easier for
integrators to make upgrades of the frontend framework. In most cases, it is
now no longer necessary to override a Fluid template for changes to classes.
Instead, it is only necessary to add the appropriate CSS classes to the
form configuration.

In order not to be breaking, by default the templates are still rendered
as they used to be.

To use the new Bootstrap 5 compatible templates the form rendering option
:yaml:`templateVariant` must be set from :yaml:`version1` to :yaml:`version2` in your form setup:

.. code-block:: yaml

    TYPO3:
      CMS:
        Form:
          prototypes:
            standard:
              formElementsDefinition:
                Form:
                  renderingOptions:
                    templateVariant: version2

The CSS classes for the Bootstrap 5 compatible templates are defined
in the variant with the name :yaml:`template-variant` for each form element.
This is an example of the text element:

.. code-block:: yaml

    TYPO3:
      CMS:
        Form:
          prototypes:
            standard:
              formElementsDefinition:
                Text:
                  variants:
                    -
                      identifier: template-variant
                      condition: 'getRootFormProperty("renderingOptions.templateVariant") == "version2"'
                      properties:
                        containerClassAttribute: 'form-element form-element-text mb-3'
                        elementClassAttribute: form-control
                        labelClassAttribute: form-label

To be able to access the configuration of the root element (type "Form")
in conditions, a new function :php:`getRootFormProperty()` has been introduced,
which can be used to access the properties of the "Form" element.
In the context of the "template-variant" variants this is used to determine
the template variant defined on the "Form" element in order to change the
CSS configuration properties or to add new ones.

In the course of Bootstrap 5 compatibility two new breakpoints "xl" and
"xxl" were added to the grid configuration which are also available in the
form editor.

.. index:: Frontend, ext:form
