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

fix(color-contrast): correctly calculate contrast of flex/grid items with z-index #3884

Merged
merged 8 commits into from
Jan 25, 2023
Merged

fix(color-contrast): correctly calculate contrast of flex/grid items with z-index #3884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
54c34c5
fix(color-contrast): correctly calculate contrast of flex/grid items …
straker Jan 23, 2023
00f6583
Update test/integration/rules/color-contrast/color-contrast.html
straker Jan 25, 2023
141b48f
Update test/commons/dom/get-element-stack.js
straker Jan 25, 2023
c30266c
:robot: Automated formatting fixes
straker Jan 25, 2023
45e112f
suggestions
straker Jan 25, 2023
fe33b68
Merge branch 'flex-items-zindex' of https://github.com/dequelabs/axe-…
straker Jan 25, 2023
0e0881c
no inline flex/grid (with space)
straker Jan 25, 2023
db0e8b8
in test too
straker Jan 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions lib/commons/dom/create-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,25 +221,27 @@ function isStackingContext(vNode, parentVNode) {
}

// a flex item or gird item with a z-index value other than "auto", that is the parent element display: flex|inline-flex|grid|inline-grid,
if (zIndex !== 'auto' && parentVNode) {
const parentDsiplay = parentVNode.getComputedStylePropertyValue('display');
if (
[
'flex',
'inline-flex',
'inline flex',
'grid',
'inline-grid',
'inline grid'
].includes(parentDsiplay)
) {
return true;
}
if (zIndex !== 'auto' && isFlexOrGridContainer(parentVNode)) {
return true;
}

return false;
}

/**
* Determine if element is a flex or grid container.
* @param {VirtualNode} vNode
* @return {Boolean}
*/
function isFlexOrGridContainer(vNode) {
if (!vNode) {
return false;
}

const display = vNode.getComputedStylePropertyValue('display');
return ['flex', 'inline-flex', 'grid', 'inline-grid'].includes(display);
}

/**
* Determine the stacking order of an element. The stacking order is an array of
* zIndex values for each stacking context parent.
Expand All @@ -253,7 +255,13 @@ function getStackingOrder(vNode, parentVNode) {
vNode.getComputedStylePropertyValue('position') !== 'static';
const floated = vNode.getComputedStylePropertyValue('float') !== 'none';

if (positioned && !['auto', '0'].includes(zIndex)) {
// flex and grid items can use z-index even if position: static
// @see https://www.w3.org/TR/css-flexbox-1/#painting
// @see https://www.w3.org/TR/css-grid-1/#z-order
if (
!['auto', '0'].includes(zIndex) &&
(positioned || isFlexOrGridContainer(parentVNode))
) {
// if a positioned element has a z-index > 0, find the first
// true stack (not a "fake" stack created from positioned or
// floated elements without a z-index) and create a new stack at
Expand Down
Loading