Skip to content
Submitted 5 months ago

Social links with keyboard navigation logic

P
Dany Hoepfner•70
@DanyHoepfner
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud that I managed to add keyboard events to navigate the links. Next time I'll try to use more descriptive class names and more semantic html.

What challenges did you encounter, and how did you overcome them?

It took me a while to get the links to spread to the width of its container, but then I found out that could just set its width to 100%.

What specific areas of your project would you like help with?

Is the code semantic enough? good readable?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrew A Lee•390
    @drewlee

    The layout looks great and matches the design spec, as well as being responsive. The code looks good and clean. I have a few optional suggestions that could take this feature to the next level, but they're totally up to your discretion.

    1. The navigation links in the HTML can be made more semantic by encapsulating the links with a <nav> element instead of a <section>.
    2. Usage of aria-label on the links is unnecessary in this case, as screen reader users would be notified of the role of the element (link) along with its URL, and text content, providing more than enough context as to their purpose. Hence, stating "Visit <name> profile" explicitly is a bit redundant and noisy.
    3. The padding on the top and bottom of the card is slightly larger on the desktop screen vs. the mobile screen.
    4. Providing link access by arrow navigation is pretty great! To really streamline the UX, it would be ideal to cycle the focus. For example, if the user is on the last link, pressing down would return the user's focus to the first link. If the user is on the first link, pressing up would place the focus on the last link.

Join 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