Errors Accessibility forms 7.1.x

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.1.X
• Fix Version/s: 7.1.10 DXP FP23, 7.1.10.6 SP6, 7.1.X
• Component/s: Accessibility, Dynamic Data Lists > Form, Dynamic Data Mapping > Form Builder, Forms
• Labels:
  • backend_test
  • ee-ts
  • liferay-dxp-71-sp6
  • liferay-fixpack-dxp-23-7110
• Branch Version/s:
  7.1.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-forms/liferay-portal-ee/pull/63

Description:
In the list of errors we are going to put the error code (H71, H44, H65, H51, H48) whose definition is explained on this page

The errors are as follows.
1.-PRESENCE OF EMPTY LISTS (1.3.1-Information and relationships - Structure and semantics) H48 
In all the pages that contain a form, a container with class "tabbable" is created. This container has a <div class="tabbable-content"> and inside it contains an empty list (<ul class="nav nav- tabs" role ="tablist"></ul>) and an empty container as well (<div class ="tab-content"></div>)

2.- EMPTY HEADINGS, WITHOUT TEXT INSIDE (1.3.1-Information and relationships - Structure and semantics) H51
All forms have a mandatory title within an <h1> and followed by a subtitle <h5> not mandatory. The accessibility error here is that there cannot be 2 titles in a row without content between them, it means that you have to put something after the <h1> and <h5>, in addition to that they must have content within the titles (can not be empty), and in the case of no description as is not mandatory, if it is left empty, the <h5> remains empty (doesn't affect the branch 7.1.x, only FP19). In master the subtitle element <h5> is a p paragraph element.

3.- UN-LABELED FORM CONTROLS (1.1.1-Non-textual content -Forms) H44, H65
In all forms that contain a MANDATORY field, a <label> is created at the beginning of the form with a description text, which, as it does not belong to the form itself and is not part of the set of fields to be filled in by the user, gives us an unlabeled form element error. This means that it should have at least one for = "id of its input" attribute that references it with its field, but being a simple text it does not carry anything. In master this is displayed as p paragraph and not label. 

4.-SELECTION CONTROLS WITHOUT GROUPING (1.3.1.-Information and relationships-Forms) H71
In forms that contain selectors such as radio or checkbox, the labels are not included as a selection set and TAW asks us to include these fields within at least inside one <fieldset>, in master field types  "checkbox_multiple","grid","paragraph" and "radio" are surrounded by fieldset and instead of label have a legend element 

Solution provided on branch 7.2.x on FieldBase.soy  

Steps to reproduce:
1. Go to Site menu -> Content & Data -> Forms -> button Add New form 
2. Add a title to the form and a form description save and delete the form description leaving it empty save again, this to reproduce error number 2 (the <h5> remains empty)
3. Add a multiselection field with at least two options and make it required 
4. Add a new widget page and select form widget and select to display the new created form 
5. Inspect the html code on the page and see the presence of each error described above

Actual: No empty lists or elements on the page, also correct each accessibility errors described above as it is fixed in master. 

Expected: Empty lists exist on the page when a form is displayed, also some elements on the page are not respecting accessibility rules as explaining above.

Checked with DXP 7.1 FP19 and branch 7.1.x 636f7a8f0d58eef61063f39910f527665b583431