FAQ card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Herson! 👋

  Good effort on this challenge! I love the functionality where it automatically closes the opened accordion panel when the user opens another accordion panel. The landmark elements are used to wrap the correct content, which is great! 😄

  About the absolute positioning, I also positioned the illustration that way. Your solution looks similar compared to the design, which is already a good thing. The alternative way that I would suggest is to use background properties to handle some of the images that are not overflowing. By doing that, you also could clean up your HTML a bit. 😉

  Anyway, some feedback on this solution:

  • When I try to scroll the page on mobile view, I notice the illustrations are in a fixed position. I would recommend trying to use either absolute positioning or background properties instead.
  • Use native HTML elements for the accordion elements, details and summary, they are already accessible. Right now, I can't access the accordion panels using the keyboard and the screen reader pronounce it as just normal text.

  Overall, great work. I really like the idea of only allowing the user to open one accordion panel at a time. Not only, I think that could create a nice user experience but also, prevent the card from having too much height. Also, if you could fix the issue on the mobile view and make the accordion accessible, I think this would make increase the quality of your solution.

  That's it! Hope this helps. 😊

  Marked as helpful

  1

  ---

  

  Herson•220

  @HersonmeiPosted over 2 years ago

  I didn't know details and summary, great tip!

  It helped a lot, thanks for the contributions @vanzasetia !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Hersonmei You're welcome! 😄

  0