Proposal: Add/remove `aria-invalid` attributes as part of form validation

I noticed we're doing a fair bit of ARIA work within the validation package but we're not setting aria-invalid on invalid forms.

It seems like a relatively safe thing to add. We are already adding error text as an announceable string via aria-describedby, but aria-invalid is a bit more programmatic, and will (at least in Voiceover) be announced more immediately than the description.

Screenshot of Voiceover readout: 'Your email address, invalid data, edit text'

I've updated the validation JS and the tests to add and remove this attribute during the validation process. I've deliberately not added it to our code that handles fieldsets due to the recommendation at https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups:

As previously mentioned, setting aria-invalid on each control will lead to a confusing user experience. So we chose to forgo using this ARIA state on the control groups.

Clear content hint and error texts should be more than sufficient to notify the user that the group is not valid.

I noticed the packages/foundations-forms/src/validation/utils/aria.mjs ARIA-specific file, but as this change was a simple toggling of an HTML attribute I didn't think it warranted being moved into a helper function within aria.mjs. Happy to rearrange this if anyone isn't sure about this though :)

Annoyingly, after pushing these changes I noticed that VSCode/Prettier made some formatting changes when I saved the file. I can undo these in a follow-up commit (for consistency), or we could ignore those changes as anyone else who commits with 'auto-format on save' turned on is likely to run into the same issue again eventually. To avoid other people having this issue we could add a Prettier config file to the repo with a line-length setting long enough to avoid the formatting changes introduced in this PR.

coopdigital / coop-frontend

Proposal: Add/remove `aria-invalid` attributes as part of form validation #448