Description
To figure out which elements are close to which other elements, axe-core divides the page up in a grid, tracking which elements are in which grid cell. This makes identifying nearby elements faster. This is used for things like figuring out nearby clickable targets and which element is a background to which other element.
For scrollable and overflow hidden axe-core creates a subgrid. The problem with that is that fixed position elements inside a scroll container are not positioned relative to the scroll container, they are positioned relative to the window. Similarly, absolute positioned elements are positioned relative to its closes positioned ancestor. If that element is not inside the scroll container, then the absolute positioned element is should not be part of the container's subgrid but should be part of the grid of its nearest positioned ancestor.
A related problem is that at the root we place fixed position elements in the same grid as we elements in the scrollable body element. I think the correct way to do this would be to have a window grid, which all fixed position elements, along with the root node which should then have a subgrid for all scrollable elements.
Here's a codepen showing how this problem can result in a false negative:
https://codepen.io/wilcofiers/pen/gbpzgNv
If you remove that overflow:auto the false negative goes away, because the div is no longer a scrollable region.
<style>
section { display: flex; }
button { padding: 0; }
div > button {
position: absolute;
margin-top: -1.4em;
margin-left: 0.2em;
}
span { opacity: 0; }
div {
width: 1px;
height: 1px;
margin-right: 1em;
display: inline-block;
/* This is the magic line */
overflow: auto;
}
</style>
<section>
<button>A</button>
<div>
<span>hidden</span>
<button>B</button>
</div>
<button>C</button>
</section>