Responsive & Accessible Contact Form with Tailwind CSS v4 & Vanilla JS

What are you most proud of, and what would you do differently next time?

I am most proud of implementing robust accessibility features (like aria-describedby, custom focus states, and a screen-reader-friendly success toast) while avoiding default browser validation popups in favor of a custom JavaScript validation setup. Next time, I would set up a modular component structure from the beginning to make styling repetitive form groups even cleaner.

What challenges did you encounter, and how did you overcome them?

The main challenge was styling the custom radio button wrappers dynamically based on whether they were selected. I overcame this by leveraging Tailwind's modern has-[:checked] pseudo-class modifier, which allowed the parent container to automatically change its border and background colors without needing extra JavaScript event listeners.

What specific areas of your project would you like help with?

I'd love feedback on my JavaScript validation logic. Is my approach to handling errors and toggling aria-invalid states clean and scalable for larger enterprise forms, or are there cleaner patterns I should adopt?