Description
We recently adjusted the isHiddenForEveryone method to ensure that elements inside a closed <details> tag would be considered hidden, without the actual details and summary elements getting marked as hidden. This worked, but there is still a bit of a gap, in that child text nodes of the details element will be assumed visible, because the details element is visible. The "Hello world" text node in the following should not be considered visible:
<details> Hello world </details>A very similar problem exists on elements with content-visibility: hidden, which doesn't hide the element, but hides all child nodes, including text. For example the following "Hello world" text is considered visible by axe-core.
<p style="content-visibility: hidden"> Hello world </p>This has some implications for rules like color-contrast, which should not be testing these hidden text nodes. This problem also has some implications for accessible text, which when testing in Chrome seems to treat elements with content-visibiity: hidden as hidden, rather than treating its content as hidden. You can tell from the following example. Axe-core returns "Hello" as the accessible name, but in Chrome this ends up as "Hello planet Earth"
<p style="content-visibility: hidden;" id="hello">
Hello <span>planet</span> <span hidden>Earth</span>
</p>
<input aria-labelledby="hello" />Worse yet for details, the following is reported by axe-core as "" but by Chrome as "Hello planet Mars":
<details id="mars">
<summary>Hello</summary>
planet <span>Mars</span>
</details>
<input aria-labelledby="mars" />This needs testing in other browsers before we can work on a solve.