Steps to reproduce: 1. Open https://jsbin.com/yaxizom/edit?html,css,output 2. Click “Details” What happened: The triangle marker ▶︎ does not change. What should have happened: The marker should have turned down (▼). It does in Chrome and Firefox.
I’ve checked how VoiceOver is affected. The collapsed state is announced, but the expanded state isn’t.
In the section https://drafts.csswg.org/css-display/#unbox > Appendix B: Effects of display: contents on Unusual Elements > Some elements aren’t rendered purely by CSS box concepts; > for example, replaced elements (such as img), many form > controls (such as input), and SVG elements. > > This appendix defines how they interact with display: contents. > > HTML Elements > > … cut for brevity … > > button > details > fieldset > These elements don’t have any special behavior; display: contents > simply removes their principal box, and their contents render as normal. > https://searchfox.org/wubkat/rev/05f693e31a84e598a51d00bf3505f1e10049bbc5/Source/WebCore/html/HTMLSummaryElement.cpp
<rdar://problem/103539240>
I wonder if it's related to https://searchfox.org/wubkat/rev/05f693e31a84e598a51d00bf3505f1e10049bbc5/Source/WebCore/rendering/RenderDetailsMarker.cpp#143-155
Confirmed that this is still present in Safari 17.1 on MacOS. Adding the CSS "display: contents;" on the 'details' element causes the disclosure triangle to remain pointing sideways in both open and expanded states.