Faq Accordion with React

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  Hi

  I'm afraid this is inaccessible at the moment so needs some changes.

  The whole question must be clickable so that must be inside the button too.

  For disclosures you must use an accessible pattern with

  • an aria-expanded button
  • an accessibile name on that button (in this case the question
  • a unique ID on the answer (preferable)
  • aria-controls on the button pointing to that unique answer ID (preferable)

  I wrote up a disclosure tutorial

  You also should be working mobile first.

  And media queries must be defined in rem or em not px. (There's a post about media queries on the site above too)

  And don't forget html basics like ensuring all content is contained within landmarks!

  Marked as helpful

  1

  ---

  

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  One more thing. I recommend you read this post on common beginner mistakes in react as I notice you're using the index as a key for the loop over faqs. This explains the danger of that habit.

  1

  

  P

  Freddy Santana•190

  @CreixzPosted 8 months ago

  @grace-snow

  I want to thank you very much for the time you take to review my code and in respect to that time you take, I made a new project that I hope this time will be much better and accessible. Thanks for your help, I want to be an excellent frontend developer.

  0

  

  T

  Grace•31,090

  @grace-snowPosted 8 months ago

  @Creixz you don't need to create a new project. Keep the repo you've got and work on that. The beauty of git version control is being able to keep that history and make incremental improvements.

  0
• 

  Korney Chervonenko•960

  @KorneyChervonenkoPosted 8 months ago

  Hello, friend I think you have mixed up with plus\minus icons

  1