excol: Explicitly hide collapsed children for openHiddenNodes to work

[kfranqueiro]

Background

I'm opening this PR to address an issue noticed with Firefox 130 in the WCAG Understanding Docs: w3c/wcag#4086

Firefox 130 suddenly changed behavior of collapsed children under details; whereas it formerly rendered children as 0 height/width (as does every other browser I tested), 130 hides them but still renders them at original size. This fools the logic in openHiddenNodes, breaking any permalinks that target locations inside of collapsed sections.

Solution in this PR

The most straightforward way to solve this seems to be via CSS, to ensure all browsers maintain the most common behavior, which allows openHiddenNodes to continue working as it typically has. I did some testing with NVDA and VO in an effort to confirm that this does not cause any noticeable difference to collapsed details elements.

Note that this PR targets any nodes after summary within collapsed details, rather than specifically targeting details:not([open]) > div. While the latter would match the excol template, it does not match the usage within the WCAG Understanding Docs (which places a dl directly after summary), which relies on the styles but does not use the template (since it is not a Jekyll project - although now that it uses Eleventy, there might be room for separate/future consideration to more completely adopt this repo).

How I tested

1. Serve w3c/wcag locally via npm start in its repo
2. Run npm run build-css in this repo, then serve its base folder locally at another port
3. Temporarily change the stylesheet URL in w3c/wcag's _includes/head.html to point to http://localhost:<port>/... (using the port for the server started in step 2)
4. Browse to http://localhost:8080/understanding/three-flashes-or-below-threshold and check that clicking any of the 3 links within the first paragraph inside the SC box jump to the correct place (rather than have no visible effect)

Alternatives

An alternative might be to rewrite part of openHiddenNodes to explicitly search all the way up for collapsed details elements regardless of visibility, which would have a probably-negligible performance cost. (We could also potentially employ closest if we feel its browser support is wide enough.)

[netlify]

✅ Deploy Preview for wai-website-theme ready!

Name	Link
🔨 Latest commit	ee74db6
🔍 Latest deploy log	https://app.netlify.com/sites/wai-website-theme/deploys/66f5a9b1a390ba0008af42e5
😎 Deploy Preview	https://deploy-preview-109--wai-website-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.