FAQ Accordion – Built with Semantic HTML & Modern CSS (No JavaScript)

What are you most proud of, and what would you do differently next time?

I'm proud of achieving a fully functional and accessible FAQ accordion without using any JavaScript, relying solely on the power of semantic HTML and CSS.
The project scored 100/100 in all Lighthouse categories (Performance, Accessibility, Best Practices, SEO).

What challenges did you encounter, and how did you overcome them?

The main challenge was animating the <details> element’s height, as it doesn’t support smooth transitions by default.
I solved it using block-size transitions combined with the new transition-behavior: allow-discrete; property, guided by a helpful YouTube tutorial.
Another challenge was styling native elements like <summary> while keeping them accessible — handled via pseudo-classes (:is(:focus-visible, :hover)) and removing the default marker with ::marker.

What specific areas of your project would you like help with?

I’d appreciate feedback on the accessibility and responsive design approach, particularly if there are ways to improve the keyboard navigation or visual focus states for users relying on assistive technologies.