faq accordion

Community feedback

• 

  Jade•105

  @jadetruePosted over 2 years ago

  Hey @k-stopczynska,

  I've had a go at this particular challenge myself and it's a really good one to test yourself, so well done for getting this up! 👏

  I don't do a lot of reviewing so I will just give you some visual feedback.

  • I love the little bit of animation you've added on the arrows.

  • The highlighting of the accordions is also a nice touch.

  • The background gradient is not quite the same as the design, it should be lighter on top.

  • Font for the accordions - the Header text could be larger.

  • I don't know if you've tested this on different size screens, but you may want to look at the cube that's meant to sit within the image area - I'm using a MacBook Pro 16" to view your link: https://paste.pics/7e5a38e17954136efd6438f52af32dea

  Hope this is useful!

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  Congratulations on finishing this challenge! 🎉

  Some recommendations from me.

  • I would recommend using the native HTML tags for the accordion, summary and details tags. By default, they are accessible and also have open-and-close functionality. Currently, the screenreader can't represent the accordion properly. Also, I can't access the accordion panels with my keyboard.
  • If you follow my first recommendation then for the JavaScript I recommend creating a function where the users are only allowed to open one accordion panel at a time. Right now, if the users open all the accordion panels there would be an overflow issue.
  • I would recommend making the images (hero-image and box) to be the child elements of the main element. I am sure that it will make it easier to make sure that those images are inside the card. If you see the site on the mobile landscape view (640px * 360px), the images are outside of the card element (main element).

  That's it! Hope you find this useful! Happy coding! 😁

  Marked as helpful

  0