Skip to content
Submitted 11 months ago

Frontend Mentor - FAQ accordion solution

Brendan•1,120
@OneManBanned
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have tried to make this accessible for screen readers and also implemented keyboard navigation.

Firefox has only supported the :has selector today - (19/12/2023) - so you may need to update firefox to get the animation to work.

A fun challenge.

Community feedback

  • Grace•31,270
    @grace-snowPosted 11 months ago

    You must never ever put aria-label on headings!! The FAQs is fine as a heading. Do not over engineer or throw aria at code when it is not needed

    Marked as helpful
    1
    Grace•31,270
    @grace-snowPosted 11 months ago

    Other than that code all looks OK except you're not using the font size as defined in the style guide. I wouldn't ever expect to see such round numbers as 0.9 or 0.8rem. Those don't equate to exact pixel values (round numbers) so are not recommended

    This will partly be why your solution looks so much smaller than the original design

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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