axe-core
axe-core copied to clipboard
dequelabs
axe is struggling to determinate the background color when using nested lists
Product
axe-core
Product Version
4.4.3
Latest Version
- [X] I have tested the issue with the latest version of the product
Issue Description
I've found the following issue with the determination of background colors by axe. The source code contains an example where it fails and one where it succeeds.
How to reproduce:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 1.6em;
}
</style>
</head>
<body>
<ul>
<li>
Test
<ul>
<li></li>
</ul>
</li>
<!-- when you remove the dot at the end it fails too -->
<li>Lorem <strong>ipsum</strong>.
<ul>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
Product: axe-core Expectation: It should be able to determine the background color. Actual: It can't.
axe-core version: 4.4.3
DevTools: 4.36.2
Thanks for the issue. It looks like we'll need to figure out how to handle this type of code as we currently think the nested li is overlapping the parent li. Even document.elementsFromPoint reports it the same way.
Validated with the latest code base of axe-core develop branch,
Not seeing failure/ incomplete results for color-contrast for the code snippet:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 1.6em;
}
</style>
</head>
<body>
<ul>
<li>
Test
<ul>
<li></li>
</ul>
</li>
<!-- when you remove the dot at the end it fails too -->
<li>Lorem <strong>ipsum</strong>.
<ul>
<li></li>
</ul>
</li>
</ul>
