♿ a11y(bal-field): wrong error message linked to inputs by aria-describedby

[zsofia-oroszi-ibmix]

Description of this issue

When an error message is present, the same message is linked to each field (via aria-describedby). Therefore the screen reader announces an error message for each field.

How to fix it

The aria-describedby attribute should reference the ID of the related bal-field-message, if one is present.

Code Reproduction URL

https://dev.author.baloise.magnolia-platform.io/webstyleguide-baloise-com/de/home/components/Form.html

Additional Information

To reproduce, please submit the form without any input, then navigate through the form by Tab with VO on, or inspect the aria-describedby values on each input.

Code of Conduct

• I agree to follow this project's Code of Conduct

[m4rc0z]

Could you provide a stackblitz or something we can access about this? Its somehow not reproduceable for me.

[zsofia-oroszi-ibmix]

Hi @m4rc0z, the issue can be reproduced in Storybook too: https://design.baloise.dev/?path=/story/components-form-form--autocomplete&globals=framework:html
The inputs for "Street" and "City" have wrong message ids as aria-describedby values, therefore VO announces a message even though it's not present for these fields.

[GinaBiondo-aperto]

See comment above :)