search

colinaut / alpinejs-plugin-simple-validate

Simple Alpine form validation plugin
97 stars 4 forks source link

Feature request: ARIA error roles #2

Closed Rocketpilot closed 2 years ago

Rocketpilot commented 2 years ago

Per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage, I wonder if it would be possible to add ARIA roles to invalid inputs.

Caveat: The specific way the error is inserted into the page with this tool might make it tricky (the approach described in the link is to insert a span tag containing the error message that's linked via an ID to an aria attribute on the invalid input).

colinaut commented 2 years ago

Yeah proper Aria would be great to add! Shouldn't be too hard to do. I'll take a look at implementing it

colinaut commented 2 years ago

@Rocketpilot I just pushed version 1.6 which includes aria-invalid and aria-errormessage attributes. I changed the way that error messages are displayed in that it now automatically adds a span.error-msg element linked by id with the aria-errormessage attribute. You will have to your css for the error messages but otherwise it is backwards compatible! Read the README for more.

Rocketpilot commented 2 years ago

That's amazing, thanks once again. Okay I think I have one more and then I'll be out of your hair haha.

Rocketpilot commented 2 years ago

Sorry - one more thing on this - the invalid state no longer seems to clear once the input is updated with text.

colinaut commented 2 years ago

Huh. I'll check that today

colinaut commented 2 years ago

@Rocketpilot fixed! I introduced a bug right in that last release, but I caught it and now it's fixed in 1.6.1. I really need to set up some tests, other than just general linting.

colinaut commented 2 years ago

Make that 1.6.2. Pushed another update as I failed to turn off console.log tests in 1.6.1. That'll teach me to push an update fast in the morning.

Rocketpilot commented 2 years ago

You know what they say, git push in haste, git revert at leisure. Thanks again!