dequelabs / dequelabs/axe-core

isVisibleOnScreen's overflowHidden can result in false-negatives with intermediate overflow: auto containers

Open
#3,883 4 comments 0 reactions 0 assignees View on GitHub
commons false negative fix label-content-name-mismatch
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Product Version

4.6.3

### Latest Version

- [X] I have tested the issue with the latest version of the product

### Issue Description

`isVisibleOnScreen`'s `overflowHidden` check currently treats elements as hidden if they are contained within an `overflow: hidden` ancestor whose bounding box does not overlap with the element under test.

However, this isn't quite accurate if an outer container uses `overflow: hidden` but contains an intermediate container which uses `overflow: auto`, which then contains the element under test. In this scenario, an element which is scrolled far out of view might be treated as "overflow-hidden" based on the outer container, even if it is scrollable into view via the intermediate container.

In the motivating example, this pattern of containers is used to implement "sticky header" functionality: `body` has `overflow: hidden` applied, the sticky header appears statically within the body, and then the rest of the page is rendered within a `overflow: auto` intermediate container. This results in false negatives against content "below the fold" in the intermediate container for any check whose `matches` includes a `isVisibleOnScreen` conditional.

#### Expectation

In the pattern described above, `isVisibleOnScreen` should treat an element scrolled out of view in the intermediate container the same as it would treat an element scrolled out of view in a page with no custom `overflow` styling.

#### Actual

In the pattern described above, `isVisibleOnScreen` treats elements scrolled out of view as "not visible", where it would have treated the same element scrolled out of view on a page not using such a pattern as "visible".

#### How to Reproduce
[Codepen demonstrating same content with different results depending on use of sticky header pattern](https://codepen.io/dbjorge/pen/VwBQOBO) - see repro steps embedded in page.

#### Additional context
The repro steps in the linked codepen use `label-content-name-mismatch` as a test case - it is one example of a rule which only matches elements that are `isVisibleOnScreen`, but probably not the only one.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.