@elidrissidev
Posted
Hey Felipe, great work on this solution!
Here are my suggestions:
- Just in case you don't know, you can build the whole accordion without a single line of JavaScript using
<\details\>and\<summary\>elements. - The way you've built the accordion works perfectly. Here's a good read about creating accessible accordions
Good luck, and keep it up!
Marked as helpful
@flp-pcll
Posted
@elidrissidev Thank you, Mohamed! This link with the Acessibility Guidelines will be very helpful to improve my html markup because this is a point in which i always get confused.
I had read about building the accordion component only with html when i got stuck with the arrow-icon part (i was working with the <svg> so the event.target was a mess between the <svg> and <path>) but i decided to stick with the initial plan to make it work, but i will definetly make use of the <details> tag to see how it works!
@elidrissidev
Posted
@flp-pcll You can use pointer-events: none on the <svg> and it will prevent it from becoming the event.target even when it's clicked! Hope that saves you the headache like It did for me 😉
Marked as helpful
