-
Notifications
You must be signed in to change notification settings - Fork 776
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.
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
fix(color-contrast): Prevent crash on large inline elments #1306 #1341
Conversation
} | ||
}); | ||
|
||
if (filteredArr.some(stack => stack === undefined)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mostly a return-early refactor, these 3 lines are the new bit.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not filter these out?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because the missing stacks could have issues on them, and ignoring those would mean we'd be ignoring potential color-contrast issues.
@@ -351,7 +352,8 @@ color.getBackgroundColor = function(elm, bgElms = [], noScroll = false) { | |||
if (noScroll !== true) { | |||
// Avoid scrolling overflow:hidden containers, by only aligning to top | |||
// when not doing so would move the center point above the viewport top. | |||
const alignToTop = elm.clientHeight - 2 >= window.innerHeight * 2; | |||
const clientHeight = elm.getBoundingClientRect().height; | |||
const alignToTop = clientHeight - 2 >= window.innerHeight * 2; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
clientHeight
is 0 on inline elements with multiple rects. getBoundingClientRect does give the rect for the entire thing.
} else { | ||
return [boundingStack]; | ||
} | ||
if (!boundingCoords) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 thank you for this. Indenting the happy path always bugs me.
let filteredArr = rects | ||
.filter(rect => { | ||
// exclude manual line breaks in Chrome/Safari | ||
return rect.width && rect.width > 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Why not just return rect.width > 0
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could. I just changed indentation on this. Didn't actually look to refactor.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added a question about the new return condition, if you determine that the answer to the question is such that it would not result in changes, go ahead and merge.
Worked out the problem behind this issue that Stephen created a patch for 2 weeks ago. Basically, inline elements can have multiple rects when they wrap over multiple lines. This can happen in 2 cases. Either the inline element has rects that don't fit the viewport at all (which is very unlikely), or axe-core doesn't scroll the entire element into view (which was the case for the reported issue).
The reason why axe-core doesn't always scroll the entire element into view is because we don't use
.scrollIntoView(true)
(alignToTop) most of the time. This is to avoid scrolling elements with overflow: hidden. There is probably a way to avoid this, and scroll the entire element into view, but that would require a lot more work. Probably not worth the effort, given how uncommon this issue is.Closes #1306, closes #1259
Reviewer checks
Required fields, to be filled out by PR reviewer(s)