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.
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.
Got a bit confused here and moved things to draft, left a comment, realised my mistake, moved it out of draft and then deleted the comment. Apologies for any email spam as a result of my flurry of edits!
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
, butaria-invalid
is a bit more programmatic, and will (at least in Voiceover) be announced more immediately than the description.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:
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 withinaria.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.