Improve accessibility in Forms

• Type: Bug
• Status: Verified
• Resolution: Unresolved
• Affects Version/s: 7.2.X, Master
• Fix Version/s: None
• Component/s: Accessibility, Forms
• Labels:
  • ee-ts
• Fix Priority: 2
• Sprint: Forms_7.3_28, Forms_7.3_29
• Git Pull Request: https://github.com/natocesarrego/liferay-portal/pull/720

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

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 the form to a new page.
5. Inspect the DOM (Check expected behavior 2)
6. Check the color contrast of paragraph's field body text with AXE (Chrome extension) or in https://contrastchecker.com/ (Check expected behavior 3)
7. Check the asterisk for text field (Check expected behavior 4)

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.

Actual behavior 5
There is not enough color contrast.