Hello
I'll give feedback as requested on the html / css in browser, but don't do React so can't really comment there :)
- width: 100vw; is causing a horizontal scrollbar
- I recommend making focus-visible styles more consistent, and much more obvious on button
- no page heading or landmarks so it's not clear what this site/page is, let alone its content
- tab interface is not structured like tabs. I'd expect role tab and tabpanels and buttons to be the triggers not anchor tags. This all means at the moment, content changes are not communicated to assistive technology at all. The anchor tags imply navigation but there is no indication that anything has happened or content changed on click
- error messages are not linked to inputs with aria-describedby on input
- hint/helper text is not linked to it's input with aria-describedby on the input
- error messages are not announced to screenreaders with aria-live on error
- there's no required/aria-required on required inputs
- I am seeing a modal popup that says app ready to work offline, but this is hard to see due to lack of contrast with background/overlay, isn't announced to assistive tech, nor is focus moved/trapped and it auto-dismissed. All of this in combination makes it very confusing
I can't get any further as it's not letting me past signup/login. Lots of console errors (I'm in firefox)
I hope this helps for starters
Marked as helpful
@frontendtony
Posted
@grace-snow This is highly appreciated. Giving myself a face palm 🤦♂️ for not realising some of the things you mentioned, especially on input fields. I'll be fixing all these and be assured I'll make a point to not miss them in my next project/challenge
You can sign up with any random email address though. I just opened this in Firefox but can't reproduce the console errors. Curious to see what those are and get them resolved
@frontendtony I definitely can't get past signup. I just get the app is ready to work offline (on mobile chrome now)
