Clarity: Input component has aria-describedby pointing to id that does not exist on the page

[immihaylova]

Describe the bug

An input field that is required but does not have a helper text has an ‘aria-describedby’ that references an element with id ‘input-id-helper’ but there is no such element.
When the input is correctly filled in, the ‘aria-describedby’ changes to reference an element with id ‘input-id-success’, and again there is no such element.

How to reproduce

https://stackblitz.com/edit/clarity-v4-light-theme-piuacx?file=src/app/app.component.html

Steps to reproduce the behavior:

1. Inspect the input element's aria-describedby attribute before filling in anything in the input
2. Fill in the input, so it will not report an error
3. Inspect its aria-describedby attribute again

Expected behavior

'aria-describedby' should reference an element existing on the page.

Versions

App

• Angular: [10]
• Clarity: [4]

Device:

• Type: [Desktop]
• OS: [Win10]
• Browser [chrome]
• Version [87]

Additional notes

[coryrylan]

Thank you for filing an issue with a reproducible stackblitz, I am seeing the same as well. 👍

[bdryanovski]

This issue can be reproduced for almost all form-controls (they all share a single service to handle this) - at the same time, we have an issue for not setting the correct describeby for radio and checkboxes.

I spend some time investigating it and will require a lot of reworking on how the service work and a lot of monitoring the DOM for changes.