Styling <summary> so it looks more like an interactive element

[vavroom]

This one is probably going to require a bit of research.

I went with using <details> and <summary> instead of a button with aria-expanded. But the default triangle is:

• not sizing with the heading
• not super clear you can interact with the element

The thing is stylable, but there's risk to accessibility. See https://www.scottohara.me/blog/2022/09/12/details-summary.html

I'd love thoughts and implementation on how to make this more obvious it's an interactive element.

[digilou]

@vavroom

::marker easy: font-size increase should make the arrow bigger.

border around details, maybe, for interactive look?

About to push for you to look. I've read that article a few times in the past. Love his insights. I'll read again, too, since it's been awhile.