Certain visible styling being calculated to not be visible (label-title-only, potentially other rules)

[nolandanley]

Product

axe-core

Product Version

v4.7.0

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

Labels that are both visible and programmatically provided should not raise a violation of label-title-only.

Actual

The logic behind the calculation of whether a label is visible seems to not take certain potential styling into consideration, leading to violations of label-title-only even with the label is both provided and visible. It's likely this may affect more rules than just label-title-only.

How to Reproduce

<!-- 
  Copyright 2023 Google LLC.
  SPDX-License-Identifier: Apache-2.0
-->

<span id="description">Description</span>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="label" aria-describedby="description">
<div>
  <span id="label">label</span>
</div>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="absolute-label" aria-describedby="description">
<div>
  <span id="absolute-label" style="position: absolute">label</span>
</div>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="overflow-label" aria-describedby="description">
<div style="overflow: hidden;">
  <span id="overflow-label">label</span>
</div>

<!-- LABEL VISIBLE, VIOLATION -->
<input aria-labelledby="overflow-absolute-label" aria-describedby="description">
<div style="overflow: hidden;">
  <span id="overflow-absolute-label" style="position: absolute">label</span>
</div>

Additional context

Tested with v4.7.0 on Chrome.

[WilcoFiers]

Thanks for reporting this. Took a little digging to figure out what's going on. Axe has a getOverflowHiddenAncestors method which tries to identify ancestors that may be hiding elements. That method should look at the CSS position while looking up the ancestor tree to find elements that may be hiding it.