I'm cautious about using CSS to do things that feel like actual behaviours.
For example, the modal that appears when you click on the button actually doesn't do things on "clicking" but focusing. This means if you tab over the button it'll load the modal, then tabbing away means the modal is gone. I can't tab into the content in the modal at all. How does that work with accessibility?
Though I generally dislike the idea of saying content isn't there by making it present in the document but invisible.
Edit - Some of the default behaviours are also a bit pants. In chrome, the form validation on a pattern starts working after I hit submit, then angrily shakes at me for every keypress until it's valid. Then, it ignores invalid input as I type more! Please never use this for phone numbers or credit card numbers. Stop requiring an exact format when what people type varies, and stop telling me I'm putting in something wrong when you ask for a phone number and I give you something that'll connect to me if you type into a phone.
Maxlength is not a validation it's just ignores any more letters you type. Quietly ignoring your users input is probably not what you want.
The "Would you prefer a banana or a cherry?" just shouts "Please match the requested format" if I type "a cherry". I know chrome has nothing else to go on other than "the regex wasn't matched" but it's a bad end user experience.
The tabs example is something I need to tab onto then use left and right, I assume because it's a radio box underneath, not a series of links. Are tabs really radio buttons?
The same for the accordion. Which I've found if I add any tabbable content inside them then I'm focused on a hidden item. Great. Tab onto "tab 1", hit tab, focus has disappeared and I'm now potentially going to click on random items I can't see. This is because although you want to pretend the content isn't there just because it's not visible, it's still there! It's in your document.
Sure, you might not need javascript. But maybe you should still use it.