Missing aria-live and aria-errormessage attributes in form field components

Background Information

Package Version(s):

• ui-form-field v10.14.0
• ui-select v10.14.0
• ui-simple-select v10.14.0
• ui-text-input v10.14.0

Browser: Chrome (observed), potentially all

Screen Reader: Mac VoiceOver (tested), potentially all

Component: FormFieldLayout, Select, SimpleSelect, TextInput

Describe the Issue

Accessibility issues in form field components:

1. Error messages are not automatically announced by screen readers due to missing aria-live and role="alert" attributes

2. The aria-errormessage attribute is not being propagated from FormFieldLayout down to input elements

3. The aria-errormessage attribute does not match the ID of the error message container

Steps To Reproduce

1. Render a Select or SimpleSelect with error messages
2. Verify that input elements have aria-invalid but are missing aria-errormessage
3. Trigger form validation errors
4. Error messages are not automatically announced (unless focus is on the invalid input)

Expected Behavior

1. Error message container should:

   • Have aria-live="assertive" and role="alert" for error messages
   • Be persistently in the DOM

2. Input elements should have both aria-invalid="true" and aria-errormessage pointing to message container ID

3. Error message container should have an ID matching aria-errormessage

Additional Information

Current Workaround(s): At the moment we are duplicating error messages in a ScreenReaderContent with aria-live="assertive" and role="alert" to ensure they are announced

Products Affected: All form field components

Are you willing to submit a PR to fix?

• Yes, I'm willing to submit a PR
• (I may have a speculative fix...)

WCAG Guidelines

• 1.3.1 Info and Relationships (Level A)
• 4.1.2 Name, Role, Value (Level A)
• 3.3.1 Error Identification (Level A)
• 4.1.3 Status Messages (Level AA)