Skip to content
Submitted 7 months ago

Astro JavaScript Responsive

astro
Slideur•180
@Slideur
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 managed to use JavaScript to make the FAQ work. But next time, I'd like to create a function to activate it and make the code shorter.

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

Create a JavaScript program to run the FAQ. I had to do some research to find a solution. The one I did the first time didn't work

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

I'd like to improve my JavaScript skills. I'm having a lot of trouble writing programmes at the moment.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grace•32,130
    @grace-snow

    I'm afraid this is inaccessible at the moment. It is essential to get the right markup with this. Disclosures / accordions need to be triggered with aria-expanded buttons.

    Also note the images including icons should be treated as decorative.

    Links to help you:

    Marked as helpful
  • Grace•32,130
    @grace-snow

    I know you made changes but maybe my explanations weren't clear enough as some of this still doesn't look as expected (yet). It doesn't look like you've followed the pattern here https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

    For example:

    • aria-selected isn't the right one for this interface.
    • images should be decorative
    • a cursor has been added to everything that's implying everything is interactive, when only a few bits are.

    As a general rule, try to avoid setting inline styles with javaScript. Styling should be a CSS concern. Change the aria, and optionally a class using JSm then use that as the style hook.

    I wrote a blog about this same pattern that encourages people to use the aria-expanded value as the CSS selector to control visibility of everything else https://fedmentor.dev/posts/disclosure-ui/. You may find it helpful instead or in addition to the ARIA link I shared.

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