demo · v141

Hidden Content Accessibility Audit

Chrome 141 fixes the revealing algorithm so that hidden="until-found" sections inside closed <details> elements properly expand the entire ancestor chain. This page audits the document for such sections, simulates find-in-page, and logs the beforematch events.

checking hidden=until-found and beforematch support…
Enter a search term above or press "Audit hidden content" to analyse the document structure.

Sample document: Gemstone catalogue

Precious stones

Precious stones are rare minerals prized for their beauty and durability.

Semi-precious stones

Semi-precious stones are more abundant but often equally stunning.

Dark varieties

Stones known for deep colours and lustre.

Light varieties

Stones that play with light — iridescence and translucence.

Synthetic & trade names

Laboratory-grown stones and trade names for common varieties.

Fantasy names
Rare fantasy names

Event log will appear here as hidden sections are revealed.

Before and after Chrome 141

Pre-141 — algorithm could get stuck

When find-in-page matched content inside hidden="until-found", the browser was supposed to open ancestor <details> elements. But the algorithm had an infinite-loop risk when traversing ancestors — so browsers were conservative and sometimes left intermediate <details> closed.

details.open was not always set; beforematch could fire but the content remained visually inaccessible.

141+ — full ancestor chain revealed

The spec algorithm (WHATWG PR #11457) now correctly traverses the ancestor chain without risk of infinite iteration. Every closed <details> in the path from the document root to the matching element is set to open.

beforematch fires, the hidden attribute is removed, and all wrapping <details> expand — including triply-nested ones like the aurora/meridian entries above.

the markup & events

<details id="outer">
  <summary>Category</summary>
  <details id="inner">
    <summary>Sub-category</summary>
    <div hidden="until-found" id="content">
      <p>Hidden text — revealed by find-in-page or anchor.</p>
    </div>
  </details>
</details>

<script>
  // Chrome 141: fires just before the browser reveals the element.
  // After this, hidden attr is removed AND all ancestor details open.
  document.getElementById("content").addEventListener("beforematch", e => {
    console.log("beforematch", e.target.id);
    // In 141: outer.open === true, inner.open === true by the time
    // the event fires — the ancestor chain is complete.
  });
</script>

see also