Design comparison
Solution retrospective
This project added a lot of knowledge and allowed me to recap or consolidate a lot of what I had already learned from react to the basics like html and css and new things like working with featch which is a native feature of js since I have always worked with axios. It was a pleasure working on this project.
Community feedback
- @bbsmoothdevPosted 11 months ago
Great work. It looks really nice and functions properly. I have some quick accessibility fixes for you.
The CSS:
button { all: unset; }
Removes the default keyboard focus outline from the button. So you'll need to add it back. Focus outlines are extremely important for keyboard users and are a requirement for accessibility. I would recommend you use the
:focus-visible
pseudo-class to style the button'soutline
property.You've added a
click
event to each team card, but you added it to a non-functionaldiv
, so keyboard users won't be able to click on a card because adiv
doesn't get keyboard focus. Instead, use an accessible card pattern to make the entire card clickable while still being accessible to everyone.Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord