FAQ accordion (HTML | CSS | Vue JS Composition API + Vite )
Solution retrospective
...made with a lot of love 🤘🏻🙂
Please log in to post a comment
Log in with GitHubCommunity feedback
- @piushbhandari
had a quick look at your markup:
- i would change .faqs-header to a button instead of a div for semantic/accessibility reasons. additionally you can look into adding attributes aria-hidden for accordion content and aria-expanded for accordion buttons so screen readers will announce these.
- h3 to h2 since you have h3 right after h1
- because the accordion buttons are not actual <button> elements, your component is not accessible for keyboard users. hope this helps
Marked as helpful - @Shubham-kpl
Loved it man!! Just wow! Keep it up
- @rimar-basaa
Hola @Cheosphere, excelentes soluciones felicitaciones..
- @ZUHRIDDIN-SHARIPOV
Wow, that's great.
- @zainy2401
Such a good solution, I'm jealous! I love how you've used Vue.js to build this and I'm hoping I can learn to do this soon with a JS library like this or maybe React!
- @theYuun
Awesome! I didn't even think to reduce input count by removing the enter/space key to expand/collapse the answer. Also cool that the Tab key does not cross onto the page at all, but I left that in in case accessibility controllers use the key to navigate.
- @LoopyOratory
just wow
- @wagnnermorais
i'd add a transition when a question get open, besides that, nice job.
- @ousey-ousey
cool man ! you may add feature on click again on "-" it disappear
- P@Deanogit
Dude! This is amazing! 🥹
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