@mattstuddert
Posted
Great work on this challenge, your solution looks great! 👍
I'd say that your CSS structure looks fine. The fact that you're using Sass and breaking styles out into themed files is perfect. As far as your naming goes, it looks OK to me as well. You might want to check out BEM if you want to see another approach. Or, considering you're using React, you could try building a project using Styled Components to see if you like it. I use a React + Styled Components combo for Frontend Mentor and love it.
As far as a11y goes, there are a couple of improvements that could be made:
- Either add a corresponding
label
for eachinput
(which you can then hide just for screen reader users) or addaria-label
to eachinput
. This is so that screen reader users know what each field is for. - Also, you could add
role="alert"
to each error message to make sure they are announced to screen reader users when they are shown.
One good way to test forms is to turn on a screen reader and then only try and fill it in by using the keyboard (i.e. no cursor).
I hope these tips help! Let me know if you have any questions.
@denizerisen
Posted
@mattstuddert I'll improve the project with these tips thank you! Also these challenges are awesome. I loved working with a styleguide.
@mattstuddert
Posted
@denizerisen you're welcome! Really happy to hear you like the challenges. Looking forward to seeing your next solution.