FAQ accordion card ft. 11ty, CUBE CSS, PostCSS, and Vanilla JS

For this challenge, I used the same tooling as my previous solution so I was able to put more attention on refining my workflow.

Initially, I considered using the details and summary elements to implement the accordions, since they are natively interactive. However, there are some issues and inconsistencies on how browsers and assistive tech implement these features, so I decided to implement an alternative yet common accessible accordion pattern instead.

I used vanilla JS to make the accordions interactive, but the accordions will be expanded if JavaScript does not load or if the user disables it, so they can still consume the content.

I tried to practice a little bit of axiomatic CSS, a concept advocated by Heydon Pickering. Lovely stuff.

Finally, I think I spent too much time figuring out how to place the floating box just outside the left edge of the card. But it gave me a much deeper understanding of how some CSS properties work, specifically overflow: hidden and position: absolute.

Let me know if you have any feedback!