fix(color-contrast): check for size before ignoring pseudo elements #3097
Conversation
There was a problem hiding this comment.
Checking width/height isn't sufficient. Width and height can be defined with left, right, top, and bottom, as well as percentage values of width and height.
::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
::before {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 50%;
}To further complicate height, a percentage value depends on there being a defined height somewhere in the parent chain for it to even work. So you'd have to figure that out and then calculate all percentages down from there.
Also, we need to take into account scale transforms or anything else that can affect the size
| const pseudoWidth = parseInt(style.getPropertyValue('width')); | ||
| const pseudoHeight = parseInt(style.getPropertyValue('height')); |
There was a problem hiding this comment.
TODO: Check the unit here. If this isn't 'px', return Invinity. IE doesn't normalise units. They'll just have to review them.
| const beforeSize = getPseudoElementArea(vNode.actualNode, ':before') | ||
| const afterSize = getPseudoElementArea(vNode.actualNode, ':after') | ||
| if (beforeSize + afterSize > minimumSize) { | ||
| return vNode // Combined area of before and after exceeds the minimum size |
There was a problem hiding this comment.
Could you rather comment on why you decided to do them both combined rather than separate checks against the minimumSize? That would be more helpful when trying to debug this later
Co-authored-by: Steven Lambert <[email protected]>
… pseudo-size-test
Co-authored-by: Steven Lambert <[email protected]>
This PR adds a
pseudoSizeThresholdoptions, which by default will ignore any pseudo element who's size is less than 25% the area of the element who's text is being tested. This should significantly reduce the number ofincompleteresults axe-core reports on color-contrast.Closes issue: #3093