@joshysmart
Posted
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