@OGShawnLee
Posted
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/
