Add aria-errormessage to form controls when inline_form_errors is enabled

Problem/Motivation

When the inline form error module is enabled, there is not an aria-errormessage attribute available in the form element. Therefore, the screen reader does not properly or accurately read out the form element's error message.

Currently, the form element has an aria-describedby attribute which the screen reader will read out as an error message. The aria-describedby points to text that describes the form element, but it is not an error message.

Steps to reproduce

1. Clone drupal core and switch to this issue fork
2. Add $settings["extension_discovery_scan_tests"] = TRUE; to web/sites/default/settings.php
3. Install the "Inline Form Errors"/inline_form_errors module and the "FormAPI Test"/form_test module (i.e.: from core/modules/system/tests/modules/form_test)
4. Go to /form-test/form-test-machine-name-validation
5. Without changing any form values, click the Save button
   • Expected behavior:
     1. I see the Error message "3 errors have been found" at the top, linking to each control.
     2. I see the error message "Name field is required." under the Name field. When I view the HTML, the HTML input tag for the Name field has an aria-errormessage attribute pointing to the error message, which has a unique HTML ID.
     3. I see the error message "A unique machine-readable name. Can only contain lowercase letters, numbers, and underscores." under the Machine-readable name field. When I view the HTML, the HTML input tag for the Machine-readable name field has an aria-errormessage attribute pointing to the error message, which has a unique HTML ID.
     4. I see the error message "Select a snack field is required" under the Snack field. When I view the HTML, the HTML select tag for the Select a snack field has an aria-errormessage attribute pointing to the error message, which has a unique HTML ID.
   • Actual behavior:
     1. I see the Error message "3 errors have been found" at the top, linking to each control.
     2. I see the error message "Name field is required." under the Name field. When I view the HTML, the HTML input tag for the Name field has no aria-errormessage attribute pointing to the error message. The error message itself has no ID attribute.
     3. I see the error message "A unique machine-readable name. Can only contain lowercase letters, numbers, and underscores." under the Machine-readable name field. When I view the HTML, the HTML input tag for the Machine-readable name field has no aria-errormessage attribute pointing to the error message. The error message itself has no ID attribute.
     4. I see the error message "Select a snack field is required" under the Snack field. When I view the HTML, the HTML select tag for the Snack field has no aria-errormessage attribute pointing to the error message. The error message itself has no ID attribute.

Proposed resolution

1. Wrap the error message in a div with an ID attribute:
   <div class="form-item__error-message"><div id="title_error">Title field is required.</div></div>
2. Add the aria-errormessage attribute to the form element which references the ID attribute of the corresponding error message.
   <input aria-errormessage="title_error"/>

We're intentionally scoping this work to the inline form errors module otherwise this would be a change to the Form API and a bunch of Twig templates in Drupal Core's modules and themes, in addtion affecting contributed themes.

Remaining tasks

• Add a merge request - merge request !15815
• Review
• Address maintainer feedback
• Backport to Drupal 11?
• Backport to Drupal 10?

User interface changes

When the inline form error module is enabled, the form control will get an aria-errormessage attribute when the form element has an error. The aria attribute will point to the error message.

Introduced terminology

To be determined (probably none)

API changes

None

Data model changes

None

Release notes snippet

To be determined