FREM Challenge #6: FAQ Accordion Card

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Al Mondragón! 👋

  Well done on this challenge! Your solution responds well. I don't know either React and TailwindCSS so I won't help much but here's my suggestions:

  • After I open all accordions at once, they're overflowing your container.
  • Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element ::before on your accordion head element. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url('image.svg').
  • I like that I can use my keyboard to navigate. Maybe add :focus pseudo class to these buttons. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default :focus pseudo class with outline property. These default styles are subtle and hardly visible tho. Furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. Read more about why we should change focus styles.

  Good luck with that, have fun coding! 💪

  1

  ---

  

  Al Mondragón•165

  @AlMonPosted over 3 years ago

  Hi tediko!

  Thank you so much for your suggestions, I'll keep them in mind going forward. I specifically would like for you to elaborate on the SVG for the arrow being repeated as opposed to doing it with a class, are you thinking that it's best to keep things "DRY" or is there an alternative reason?

  Thanks! Al

  0

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @AlMon Just to be clear, I'm not saying what you did is wrong. I believe it will be better for transparency in your HTML code if you don't repeat same code within five accordions. Furthermore, if You ever want replace this arrows (maybe not best example in this case, but..) the only thing to change will be one line of code in CSS.

  1

  

  Al Mondragón•165

  @AlMonPosted over 3 years ago

  @tediko You were perfectly clear and I really am thankful for your feedback, it's the only way I can possibly improve!

  I shared your concern about being repetitive, which is why I am glad to let you know that -through React- I only have the icon in one part of my HTML. It's just repeated according to each Question and Answer that I provide. The benefit being that the code is only kept in one line, which was the goal of your original comment I believe.

  Please keep your awesome comments coming, I really dig your feedback style and I think you'll see me around these parts quite often.

  1