Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError: Cannot read properties of undefined (reading 'filter') #3166

Closed
patrickhulce opened this issue Sep 24, 2021 · 3 comments
Closed

TypeError: Cannot read properties of undefined (reading 'filter') #3166

patrickhulce opened this issue Sep 24, 2021 · 3 comments
Labels
color contrast Color contrast issues fix Bug fixes pr A pr has been created for the issue

Comments

@patrickhulce
Copy link

Product: axe-core

Expectation: Complete color-contrast audit without erroring

Actual: Fails with an exception

TypeError: Cannot read properties of undefined (reading 'filter')
    at Aa (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:111917)
    at Ca (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:112362)
    at _s (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:284518)
    at Os (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:284648)
    at Ps (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:285349)
    at Ls (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:287359)
    at Object.color-contrast-evaluate (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:299707)
    at mu.run (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:323457)
    at https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:326089
    at c (https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js:12:97607)

which resolves to these lines

axe-core/lib/commons/dom/get-rect-stack.js

Lines 478 to 479 in 1ee88cb

let stack = grid.cells[row][col].filter(gridCellNode => {
return gridCellNode.clientRects.find(clientRect => {

Reproduction Details

https://travisdowns.github.io/misc/sorting.html

<html lang="en"><head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lighthous Accessibility Failure</title>

    <!-- <link rel="stylesheet" href="/assets/css/light.css"> -->
</head>
  <body>

    <style>
      pre {
        overflow-x: auto;
      }
    </style>

<pre><span>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
</span></pre>

<p style="color: lightgray">Low Contrast Text</p>




<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.3/axe.min.js"></script></body></html>

Motivation: Lighthouse accessibility category to not error (originally filed at GoogleChrome/lighthouse#13118)


axe-core version: 4.3.3
@patrickhulce patrickhulce mentioned this issue Sep 24, 2021
Closed
2 tasks
@straker
Copy link
Contributor

straker commented Sep 27, 2021

Thanks for the issue. Hopefully I'll be able to tackle these color-contrast issues now that 4.3 has been released.

@straker straker added color contrast Color contrast issues fix Bug fixes labels Sep 27, 2021
@WilcoFiers WilcoFiers added this to the Axe-core 4.4 milestone Sep 29, 2021
@straker
Copy link
Contributor

straker commented Oct 5, 2021

Found the problem. It turns out that the grid logic didn't handle elements whose client rect (in this case all the xs) were smaller than the bounding rect. The client rect produced an L shape box, while the bounding box is the full rectangle of that L shape. So the grid only added information in the shape of an L but we tried to get the midpoint of the bounding rect which didn't exist in the scroll region grid.

@straker straker mentioned this issue Oct 5, 2021
Merged
@straker straker added the pr A pr has been created for the issue label Oct 5, 2021
@padmavemulapati
Copy link

Validated with the latest axe-core-develop branch code base,
not seeing any erroring messages/exceptions, getting only complete audit results for color-contrast failure.
image

@straker straker removed this from the Axe-core 4.4 milestone Nov 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color contrast Color contrast issues fix Bug fixes pr A pr has been created for the issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@WilcoFiers @patrickhulce @straker @jthickens @padmavemulapati