In forms, screen readers skip important information and errors are not accessible

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.2.X, 7.3.X, Master
• Fix Version/s: 7.2.10 DXP FP11, 7.2.10.3 DXP SP4, 7.2.X, 7.3.X, 7.3.10 DXP FP1, 7.3.10.1 DXP SP1, 7.3.6 CE GA7, Master
• Component/s: Forms
• Labels:
  • ee-ts
  • liferay-dxp-72-sp4
  • liferay-dxp-73-sp1
  • liferay-fixpack-dxp-1-7310
  • liferay-fixpack-dxp-11-7210
• Branch Version/s:
  7.3.x, 7.2.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/liferay-forms/liferay-portal/pull/101

Steps to reproduce
1.- Start Liferay
2.- Create a new form with 3 required fields
3.- Set that form in your welcome page
4.- Access to your home page and enable Screen Reader

---

Error 1: Screen readers don't read important information

5.- Listening to the screen reader, navigate to the label of any of the required fields.

Expected behavior
Screen reader notifies you the field is required.

Actual behavior
Screen reader is not saying anything about the field being required.

Additional notes
This issue is not happening with Screen Reader extension for Chrome (AKA ChromeVox) but it is with most of the screen readers, like NVDA or macOS native screen reader.

This issue is due to the hidden attribute added to this span what makes it hidden as well for most of the screen readers:

{fieldDetails && (
    <span
        aria-hidden="false"
        dangerouslySetInnerHTML={{
            __html: fieldDetails,
        }}
        hidden
        id={fieldDetailsId}
    />
)}

---

Error 2: Errors are not accessible

5.- Submit the form

Expected behavior
You are somehow notified about the errors. For example, moving the focus to the first input with an error.

Actual behavior
(For an user who can't see the screen) Nothing happens

---