Accordion FAQ card with JS and Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Danilo!

  🎉 Congratulations on finishing your first JavaScript challenge! I have some feedback on this solution:

  • Accessibility
    • Currently, the accordions are not accessible with keyboard and screen reader. I would recommend using details and summary tags instead of div.
    • Keep in mind that, any elements that have :hover or :active states are commonly interactive elements (button, details, input, a, etc).
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • JavaScript
    • I would recommend using forEach instead of for loop. forEach will make you write less code since with querySelectorAll(), you can directly use forEach without making it as an array.

  const questions = document.querySelectorAll(".FAQ-accordion__question");
  
  const doSomething = (e) => {
    // some code
  }
  
  questions.forEach(question => question.addEventListener("click", doSomething))
  

  • Also, separate the function from the addEventListener. It's going to make your code much easier to understand.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  2

  ---

  

  Danilo Blas•6,300

  @Sdann26Posted almost 3 years ago

  @vanzasetia, interesting!!! Thank you very much for your recommendations, I will keep them in mind from now on. :D

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted almost 3 years ago

  Update solution :D!!!

  0