Post

you can use CSS to detect not only when a form is :valid but also when it's been interacted with s/:valid/:user-valid 🤙 .group:has(:user-invalid) { --color: var(--invalid); } input:user-invalid + .error { display: block; }

and a warning for anyone going down this path on their production application, make sure to give this article a solid read, and test these interactions with screen readers. adrianroselli.com/2023/04/expo...

good reference but also still leaves people thinking "right, so what do I do?" arguably - using CSS for purely visual aesthetic poses no issues. we shouldn't rely on color anyway updating aria-invalid on submit would be a "take away" here and that there isn't a clear route on where to put messages

Oh I agree. It's one of the most frustrating part of these things. "Okay...so what is the right answer" "There is none. You need user testing, and manual testing" Isn't exactly a fun answer to get :/ And then each browser behaving differently provides some extra 🪄 razzle dazzle 🪄