Building an accordion component with accessibility in mind requires a lot of aria attributes, keyboard events, and more. While you can quickly get a functional accordion up and running, making it truly full-featured requires some more careful planning.

In this video, I'll show you how to create custom accordion with HTML, CSS, and vanilla JavaScript. As you watch and code along, think about how you might do things differently and then leave a comment or make a pull request on the Community Improvements branch to build out something better together in public.

🔗 Key Links 🔗

• Live example: https://codinginpublic.dev/projects/accordion-component/
• GitHub: https://github.com/coding-in-public/accessible-accordion-component/

🔗 Other Links Links 🔗

• Catamaran Font: https://fonts.google.com/specimen/Catamaran
• Shadow Generator: https://www.joshwcomeau.com/shadow-palette/
• Tabler Icons: https://tablericons.com/

📹 Related/Mentioned Videos 📹

• Clamp video: https://www.youtube.com/watch?v=Moely7aPYGE

🌐 Connect With Me 🌐

• Website: https://www.codinginpublic.dev
• Blog: https://www.chrispennington.blog
• Twitter: https://twitter.com/cpenned