@ApplePieGiraffe
Posted
HAHAHAHAHA! 😂
I love the easter egg you added! 😆 It adds a very whimsical touch to your solution! The rest of your solution looks great, as well! 👏
I think the best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements). They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the dl, dt, and dd elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.
MDN's reference is a great place to start learning about the details and summary elements if you are interested. 😉
In addition to that, it would be good to add cursor: pointer to the accordion elements to let users know that those elements are clickable.
And you don't have to worry about closing open accordion elements when another one is clicked. While this behavior is common, it is sometimes discouraged because users may want to have multiple accordion elements open at the same time and closing an accordion automatically may be unexpected/unwanted. 🙂
Hope you find this helpful. 😊
Of course, keep coding (and happy coding, too)! 😁
Marked as helpful
@correlucas
Posted
@ApplePieGiraffe Thank you for the feedback! I appreciate that.
Indeed I had problems with the dl, dt because when I placed another tag to add the lines between every block this gaves me a accessibility problem because I've used an element different than the dl/dt/dd inside of it. Next time I'll try to use a summary like you said, I didn't knew that you could access it using keyboards (nice info).
About the accordion closing, was only a way practice my JS skills, but it didn't worked. I was able to make it close when one block is open, but was unable to make the block close clicking in the same block to close everything.
Thank you!
