Skip to content
Submitted over 1 year ago

Faq Accordion with React

bem, react
P
Freddy Santana•190
@Creixz
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I recently completed fac accordion challenge, and I'm reaching out to the community for feedback. Your expertise and insights would be invaluable in helping me improve and refine my work.

  • Any suggestions on improving the overall design and user experience?
  • Are there areas of my code that could be optimized or written more efficiently?
  • How well does the project perform on different devices and screen sizes?

I'm open to any constructive criticism and appreciate your time and expertise. Thank you in advance for taking the time to review my project.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    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
  • Korney Chervonenko•1,080
    @KorneyChervonenko

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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord