Help center: Error message not announced for the screen reader users.

Issue Summary

For the date input field in the form fields, the error message is not announced for the screen reader users.

Note: This issue is applicable for all the error messages provided for mandatory fields.

Steps to Reproduce

1. With screen reader turned on navigate to the Help portal,
2. Select any request such as an "Upgrade or change a managed system."
3. Navigate to the date input field such as Change start date (optional) or Change completion date (optional), input any invalid data.
4. Activate "create" button & observe that error message is displayed but not communicated by screen reader to their users.

Actual Results

While navigating with screen reader, when user provide any invalid data inside "Change start date" input field & activate "Create" button, an error message "Invalid date format. Please enter the date in the format "dd/MMM/yy h:mm a" displayed on the page but the screen reader doesn’t announce it for their users.

Similar issue observed for the error messages which is displayed when user does not provide input for the mandatory fields such as "Summary", "Description", etc. 

The focus is not shifted to input field with errors & the error messages are not associated with their input fields programmatically.

This makes screen reader users difficult to understand the occurrence of the error messages.

Expected Results

When error messages are displayed on the page, the screen reader should announce them to their users appropriately & should help users to understand the error message effectively.

Apply the following changes in the source code

• As soon as the form is submitted, set focus on the first input field with an error using the JavaScript .focus() method.
• Associate the error messages with their respective input fields programmatically.
  • Provide the "aria-describedby" attribute to the input field and value should match with the “id” attribute of the error message element.
• Add the aria-invalid="false" value to the search input field element and should be aria-invalid="true" when any invalid input is entered in case of a requirement, along with adding the attribute aria-required="true".

Screenshot

Screen recording

Screen Recording 2023-01-04 at 9.53.45 AM.mov

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available