Skip to content
Submitted almost 3 years ago

Article Preview using html/css and js

Rogerio Bautz•180
@rogeriobautz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I used JavaScript only to watch the click in the button. Position and a tiny animation was made with css. Edit: I removed aria-hidden attribute from font awesome icons using javascript. I tried to set to "false" but it didn't work, probably because of a parent with the same attribute.

Community feedback

  • darryncodes•6,390
    @darryncodesPosted almost 3 years ago

    Hi Rogerio,

    Awesome solution - I really like the animation, nice touch!

    One small bit of feedback is that you shouldn't use aria-hidden="true" on focusable elements. If you remove this it'll clear your accessibility report.

    MDN - aria-hidden

    Marked as helpful
    1
    Rogerio Bautz•180
    @rogeriobautzPosted almost 3 years ago

    @darryncodes Thank you for the feedback. I removed aria-hidden attribute from font awesome icons using javascript. I tried to set to "false" but it didn't work, probably because of a parent with the same attribute. Looks like the acessibility report is generated before running JS scripts. The "axe tools" extension works in the same way. Do you know another way to remove aria-hidden attribute and satisfy the accessibility part?

    0

Please log in to post a comment

Log in with GitHub

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