Provide accessible error messages for AT users

[dmstern]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

In order to providy more accessibility to our screen reaser users, we would like to add an aria-describedby-attribute to input fields that reference the inline error message (e.g. "is a required property") with an id of this error meesage when validating the form. This would cause the AT to read out the error message under the input field when the user tabs through the form elements.

Is there a way to configure aria-describedby-attributes and to enable ids to error messages?

Any other ideas to solve this problem are appreciated. :)

For example, instead of this markup from the live playground

<div class="form-group field field-string field-error has-error has-danger">
  <label class="control-label" for="root_lastName">Last name*</label>
  <div></div>
  <input type="text" 
     class="form-control" 
     value="" 
     id="root_lastName" 
     label="Last name" 
     required="" 
     placeholder="">
  <div>
    <p></p>
    <ul class="error-detail bs-callout bs-callout-info">
      <li class="text-danger">is a required property</li>
    </ul>
  </div>
  <div></div>
</div>

it should look like this:

<div class="form-group field field-string field-error has-error has-danger">
  <label class="control-label" for="root_lastName">Last name*</label>
  <div></div>
  <input type="text" 
     class="form-control" 
     value="" 
     id="root_lastName" 
     label="Last name" 
     required="" 
     placeholder="" 
<!-- CHANGE -->
     aria-describedby="error-message-123456789" 
<!-- /CHANGE -->
     >
  <div>
    <p></p>
    <ul class="error-detail bs-callout bs-callout-info">
      <li class="text-danger" 
<!-- CHANGE -->
          id="error-message-123456789"
<!-- /CHANGE -->
          >is a required property</li>
    </ul>
  </div>
  <div></div>
</div>

Steps to Reproduce

1. Install a screen reader like NVDA
2. Launch the screen reader
3. Open the live playground in your browser (The first input field ('First Name') should be focused)
4. Use the TAB key to navigate to the required 'Last Name'-input-field.
5. Delete the value --> The field gets red and a message appears below the input field ('is a required property')
6. Listen to the screen reader.

Expected behavior

The screen reader should read out also the message that is configured here ("is a required property").

Actual behavior

The screen reader tells you that this field is required and should be filled, since it recognizes the HTML5 validation functionality of the browser. But the message is not being read out.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

[epicfaace]

This is important, we should do this