Newsletter signup form: Eleventy webc, UnoCSS

Community feedback

• 

  

  Grace•32,170

  @grace-snowPosted about 2 months ago

  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

  1

  ---

  

  ortiz-antonio•270

  @ortiz-antonioPosted about 1 month ago

  @grace-snow Thanks for your feedback.

  • I changed the dialog to a page, also improving code reusability by using a page for the non-JS version.
  • Fixed the bug where the email was not being read on the success page.
  • I followed the recommendations about JS selectors on fedmentor.

  0
• 

  Itoro (Celine) James•200

  @CelineJamesPosted about 2 months ago

  well done, keep up the work

  0