interactive-card & added blur feature

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 7 months ago

  I'm afraid this is missing some foundational code practices like:

  • using a form
  • programmatically linked error messages that are also announced to screen readers. Usually the error element is empty, has an aria-live and is linked to the input with aria-desciribedby.
  • autocomplete attributes with the correct values on inputs.
  • a fieldset and legend pattern for the group of fields for expiry date. You will need some visually-hidden (sr-only) labels on those inputs.
  • required attributes are missing.
  • using onclicks and oninputs is not a robust way to work. All this should have is a submit listener on the form that runs the validation. Alternatively or in addition you could have blur event listeners to run validation checks on specific fields.
  • img elements must always have alt attributes even if left blank for decorative images.
  • I'd expect an aria-live region wrapping the thank you content and I'd expect the visual cards display content to be aria-hidden.

  12

  Marked as helpful