Skip to content
Submitted 24 days ago

Article preview component Solution

Alexander Romero•260
@AlexanderTejedor
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I liked it, it's a very interesting challenge because I had to use react states to get the expected results, such as modifying the css values ​​with TailwindCSS just when the onClick event was handled.

Code

Please log in to post a comment

Log in

Community feedback

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on taking the challenge !

    I noticed something that could greatly improve the accessibility of your solution.

    You need to test all your solutions with your keyboard. Currently the share button which is the only element here that need to take focus isn't accessible because it's just and image.

    Button will naturally take focus, you can style it like you want and add your image in it.

    You'll also need to give indication to screen readers about what is going on when that button is clicked. You'll need to move the focus on the share icons.

    You can maybe check the html dialog element for this as it takes the focus when it's opened and has already built in function such as pressing "escape key" to close.

    Your social icons should also have an appropriate HTML element as they are ment to be interactive, not just decorative images.

    Can you think of something better?

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