Developer Portfolio Using Remix, Tailwind, Typescript and Sendgrid

Community feedback

• 

  Joshysmart•840

  @joshysmartPosted almost 2 years ago

  Thank you for taking the time to provide feedback on my solution. Let me address some of the issues you raised

  1. Looks like there may be some issues here from looking at the design comparison above. It looks good on my phone though I changed the design in my solution and moved the project section into a new page that is why there is a discrepancy between my front page and the generated screenshot

  2. That said, you definitely have some issues with accessibility and html structure here. I’ve only looked at the contact component but noticed i. there’s no form element There is a form element. I am handling the form using remix.run

  ii. the button is missing a type attribute I have now added a type attribute

  iii. no inputs are labelled (it’s not enough to wrap in a label tag, they need content) I have added a for attribute to the input if that isn't what you mean please help me clarify

  iv. errors are not programmatically linked to their inputs the form validation and errors are handled at the backend I have modified the solution to maintain the form position after submission so any error is visible to the user.

  v. errors have no aria-live attributes I have added the attribute to the error elements. This is new to me thanks for pointing that out

  vi. there’s no form validation, even the basic html kind I have added basic HTML validation I initially left out but there is still validation for the inputs in the backend

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  Looks like there may be some issues here from looking at the design comparison above. It looks good on my phone though

  That said, you definitely have some issues with accessibility and html structure here. I’ve only looked at the contact component but notice

  • there’s no form element
  • the button is missing a type attribute
  • no inputs are labelled (it’s not enough to wrap in a label tag, they need content)
  • errors are not programmatically linked to their inputs
  • errors have no aria-live attributes
  • there’s no form validation, even the basic html kind

  This signals that there is likely to be other issues so make sure you check your code carefully, especially html structure. It may help to run through an automated accessibility checker, run it through W3Cs validation tool, and to do a keyboard and screenreader test yourself

  Good luck with it

  0