Submitted almost 3 years ago

The ULTIMATE PATIENCE tester 5000! Using JS to hurt myself today...

Gareth•410

@Gareth-Moore

A solution to the FAQ accordion card challenge

Preview Code

Solution retrospective

Hello there,

I restarted the project 2 times as I didn't really get a solid grasp of what the html layout should be. I finally settle with what I have now and it's working well.

I had particular difficulty getting the list items to align properly.

Any feedback is highly appreciated. In fact I'll use voodoo to protect you from ghosts if you help me! Great deal I'd say!

P.S If you DM me I'll send you my discord, I'm putting together a little community of active front end developers who are looking to improve their skills. So if you'd like to join feel free.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Shawn Lee•580
@OGShawnLee
Posted almost 3 years ago
Hey. Shawn here. I am glad you managed to make it work! My solution took a lot of time and no time at the same time.

Here is some feedback for you:

An Accordion is a widget that should follow a pattern documented in the ARIA Authoring Practices Guide. Which would be something like this:

An Accordion has a structure similar to this.
```
<Accordion> -> div
  <AccordionItem> -> div
    <AccordionHeader> -> (h1-h6) or element with aria-role="heading" and aria-level={1-6}
      <AccordionButton> -> button
          This toggles the Panel
      </AccordionButton>
    </AccordionHeader>
    <AccordionPanel> -> div
        This is the content of your Accordion Item.
    </AccordionPanel>
 </AccordionItem>
</Accordion>
```
The Button must have aria-controls set to the id of the Panel it controls, when it is visible. It also should have aria-expanded set to either true or false. Should be the only child of the Header.

The Panel should have aria-labelledby set to the id of the Button, and might have aria-role set to region.

And optionally, the user should be able to move focus around the Buttons using the Arrow Keys from the keyboard (ArrowUp - ArrowDown).

This challange was easy for me because I had already built an Accordion component for my headless component library for Svelte. All I had to do was install, import and style. If you havent tried Svelte you should try as it is really beginner friendly and easy to use, and maybe you could check out my library xd. I am working on version 0.9.0 which will have a massive refactor and a new component.

I hope this is useful for you and best wishes. Have a great day mate!

ps: I think you should upload your projects in an individual repo so that it is easier to check them and quickly know what languages or frameworks you used.

ps2: here is the link of the Accordion pattern! https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
Gareth•410
@Gareth-Moore
Posted almost 3 years ago
Also the preview is bugged. If you visit the live server it looks nothing like the preview image. Unfortunate but hey who can argue with computers...

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