Scale-text-field - error messages not read by Screen readers

[wgmaik]

Scale Version 3.0.0-beta.117

Framework and version Angular 14

Current Behavior Not possible to set aria-describedby & aria-details attribute on input fields in order to link input to error messages.

Expected Behavior Set aria-describedby & aria-details attribute on input fields in order to link input to error messages. We need this to link custom error messages as displayed in the image to enable display of a bunch of error messages. Currently its only possible to display a single error message. A list would make it more flexible and usable!

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

Desktop (please complete the following information):

• OS: Windows 10
• Browser CHROME
• Version 107.0.5304.107 (Offizieller Build) (64-Bit)

[marvinLaubenstein]

Hi @wgmaik, sorry that I have not answered for so long. The accessibility errors and/or deficits should be fixed in the near future.

[marvinLaubenstein]

I would like to discuss the idea of the list for the helper-text with our team and will get back to you (Therefore the changed label).

[georgwittberger-telekom-mms]

We also have the issue that error messages are not announced by screen readers. It seems like there are multiple things why this is not working.

• scale-helper-text is a sibling of the div having aria-live="polite" (not a child), therefore helper text is not announced when it appears.
• input element has aria-invalid attribute (maybe should have string value "true") but is missing aria-errormessage which should refer to ID of scale-helper-text (see MDN for details)

aria-invalid="true" and aria-errormessage="id-of-helper-text" should only be set on input element if field is rendered with prop invalid. In this case it could be reasonable to omit aria-describedby because it could make screen readers read the helper text twice.