Skip to content
Submitted 9 months ago

FAQ accordion | SCSS, Vite

accessibility, vite, sass/scss
Gwenaël Magnenat•1,540
@gmagnenat
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned about the accordion pattern. It was very rewarding to test the solution with a keyboard and focus on the accessibility parts.

I'm happy to have implemented a no-script behaviour. It works when you disable javaScript and refresh the page.

What challenges did you encounter, and how did you overcome them?

Understanding the accessible disclosure requirement and switching the correct aria attributes based on interaction.

The documentation from APG is a bit complex on the javaScript part.

Grace post about this topic helped a lot - https://fedmentor.dev/posts/disclosure-ui/

What specific areas of your project would you like help with?

How would you add animation to this solution, without changing to much the current code.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Hi. Congrats for doing this. I used animation and keyframes. Using translateX and scale together with opacity. But I noticed now that It works only one time :)) Don't know why

  • xNyfPtx•1,260
    @xNyfPtx

    Doesn't work for me when I disable Javascript on Firefox using uBlock Origin. Maybe adding a transform: translateY(100%) and adding overflow-y: hidden

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