Improve accessibility in Forms

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.1.X, 7.2.X, Master
• Fix Version/s: 7.2.10 DXP FP10, 7.2.10.4 DXP SP4, 7.2.X, 7.3.5 CE GA6, 7.3.10 DXP GA1, 7.3.10 DXP FP1, 7.3.10.1 DXP SP1, 7.3.6 CE GA7, 7.3.X, Master
• Component/s: Accessibility, Forms
• Labels:
  • backend_test
  • ee-ts
  • liferay-dxp-72-sp4
  • liferay-dxp-73-sp1
  • liferay-fixpack-dxp-1-7310
  • liferay-fixpack-dxp-10-7210
• Branch Version/s:
  7.3.x, 7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 2
• Sprint: Forms_7.3_28, Forms_7.3_29
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/95182

There are some issues in forms related to accessibility:

1. There are wrong translations into Spanish;
2. Labels and inputs are not related;
3. Contrast color is insufficient in paragraph field;
4. Asterisk for required fields is not accessible;
5. Single Selection, Multiple Selection and Grid fields should be using legend instead of label.

Steps to reproduce

1. Start Liferay and change language to Spanish;
2. Create a new Form adding a field of type paragraph (Check expected behavior 1);
3. Also add a field of type Text and make it required;
4. Add these fields as well: Single Selection, Multiple Selection and Grid;
5. Add the form to a new page;
6. Inspect the DOM (Check expected behavior 2);
7. Check the color contrast of paragraph's field body text with AXE (Chrome extension) or in https://contrastchecker.com/ (Check expected behavior 3);
8. Check the asterisk for text field (Check expected behavior 4);
9. Check if the labels on the Single Selection, Multiple Selection and Grid fields use label elements (Check expected behavior 5).

Expected behavior 1
Translation for 'Body text' is 'Cuerpo del texto'

Actual behavior 1
Translation for 'Body text' is 'Cuero del texto'

Expected behavior 2
Labels are related to the inputs they are labelling

Actual behavior 2
There is no relation between labels and inputs.

Expected behavior 3
There is enough color constrast between the color of the text and the background

Actual behavior 3
There is not enough color contrast.

Expected behavior 4
There should be some information, specially thinking about screen readers, saying that field is required

Actual behavior 4
There is no information about that field being required.

Expected behavior 5
Fields that use radio buttons and checkboxes should be using the legend element.

Actual behavior 5
Fields that use radio buttons and checkboxes are using the label element.

Edit 1: behavior 3 was handled by LPS-119223 and behavior 2 and 4 were handled by LPS-118306.
Edit 2: behavior 5 was added because it got fixed in the pull request but wasn't documented here.