FAQ accordion card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Patrice Bitonga! 👋

  Congratulations on completing this challenge! 🎉

  Some suggestions from me.

  • Currently, I have to click the arrow icon to toggle the accordion panel. As a user, I would expect that I should be able to toggle it by clicking the text too (not just the arrow icon). Also, there's no way for screenreader to know whether or not it is currently expanded or not. The easiest way to fix these issues is to use the native HTML elements, summary and details.
  • I don't recommend using event handler property (e.g. onsubmit, onclick, etc). You can read https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#other_event_listener_mechanisms for the reasons. In this case, it might be okay to use it but I would recommend addEventListener() (the best way to register an event).
  • The arrow icons are decorative images. So, I recommend leaving the alt="" empty to prevent those icons from being pronounced by the screenreaders.

  That's it! Hope this helps. 😊

  1

  ---

  

  Anna Lemonade🍋•290

  @pbitonga17Posted over 2 years ago

  @vanzasetia Hello! Thank you so much for your suggestions, I will review it and hopefully I can utilize it on my next challenge. I'm new and currently learning the JS fundamentals and I'm still not familiar in some DOM.

  may i know what is the difference of event handler property to addEventListener()?

  Again, thank you :) <3

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @pbitonga17 You're welcome! 👍

  I would recommend implementing the changes on this solution especially for using the details and summary tags. Fixing bugs or improving your code is one of the skills of a web developer. 🙂

  For your question, have you read the MDN documentation that I gave you before? In that documentation, you will know the answer to your question.

  1