Newsletter signup form: Eleventy webc, UnoCSS

Solution retrospective
I plan to break down my components further to improve reusability. I'm not entirely comfortable maintaining separate components for the success dialog and confirmation page rather than reusing a single component.
What challenges did you encounter, and how did you overcome them?In this project, I'm experimenting with UnoCSS and design tokens while implementing a progressive enhancement approach for form validation. This involves starting with HTML5 native validation and extending functionality with JavaScript
What specific areas of your project would you like help with?Any recommendations or suggestions would be greatly appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hey, there are a few problems in this (mostly accessibility).
- Remember fields that collect personal data must include the
autocomplete
attribute with an appropriate value. - The error is currently announced to screen readers all the time, even when not present. This is because you are not dynamically populating the text inside the linked error element. It should be empty by default and only have text inside when the error is shown visibly. OR, you can place the inside an extra inner element (e.g.
span
) that's set to display: none and unhide it when the error is shown visibly. - Personally I find it a poor experience for the input to be styled as if it has an error as soon as it is focused. Really validation shouldn't run until an onblur event occurs or even better an attempted submission.
- After submission, it is not the email that I entered that's being shown on the thank you screen. That's a critical bug.
- Nothing in the dialog is announced to screen readers. This content should either be within an aria-live OR focus should move to the dialog heading. Personally, I'm not sure I'dconsider this a dialog at all, as it is changing all screen content, not a modal dialog overlaying the screen.
- On dismiss of the thank you screen, focus should move back to the start of the initial screen and the form be reset to its original state.
Marked as helpful - Remember fields that collect personal data must include the
- @CelineJames
well done, keep up the work
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord