fix(color-contrast): correctly handle flex and position

lib/commons/dom/create-grid.js

@@ -10,7 +10,7 @@ import assert from '../../core/utils/assert';
 const ROOT_ORDER = 0;
 const DEFAULT_ORDER = 0.1;
 const FLOAT_ORDER = 0.2;
-const POSITION_STATIC_ORDER = 0.3;
+const POSITION_ORDER = 0.3;
 let nodeIndex = 0;
 
 /**
@@ -39,7 +39,7 @@ export default function createGrid(
     }
 
     nodeIndex = 0;
-    vNode._stackingOrder = [createContext(ROOT_ORDER, null)];
+    vNode._stackingOrder = [createContext(ROOT_ORDER, null, nodeIndex++)];
     rootGrid ??= new Grid();
     addNodeToGrid(rootGrid, vNode);
 
@@ -254,65 +254,61 @@ function isFlexOrGridContainer(vNode) {
  * zIndex values for each stacking context parent.
  * @param {VirtualNode} vNode
  * @param {VirtualNode} parentVNode
- * @param {Number} nodeIndex
+ * @param {Number} index
  * @return {Number[]}
  */
-function createStackingOrder(vNode, parentVNode, nodeIndex) {
+function createStackingOrder(vNode, parentVNode, index) {
   const stackingOrder = parentVNode._stackingOrder.slice();
 
-  // if a positioned element has z-index: auto or 0 (step #8), or if
-  // a non-positioned floating element (step #5), treat it as its
-  // own stacking context
-  // @see https://www.w3.org/Style/css2-updates/css2/zindex.html
-  if (!isStackingContext(vNode, parentVNode)) {
-    if (vNode.getComputedStylePropertyValue('position') !== 'static') {
-      // Put positioned elements above floated elements
-      stackingOrder.push(createContext(POSITION_STATIC_ORDER, vNode));
-    } else if (vNode.getComputedStylePropertyValue('float') !== 'none') {
-      // Put floated elements above z-index: 0
-      // (step #5 floating get sorted below step #8 positioned)
-      stackingOrder.push(createContext(FLOAT_ORDER, vNode));
-    }
-    return stackingOrder;
-  }
-
   // if an element creates a stacking context, 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
   // that point (step #5 and step #8)
   // @see https://www.w3.org/Style/css2-updates/css2/zindex.html
-  const index = stackingOrder.findIndex(({ value }) =>
-    [ROOT_ORDER, FLOAT_ORDER, POSITION_STATIC_ORDER].includes(value)
-  );
-  if (index !== -1) {
-    stackingOrder.splice(index, stackingOrder.length - index);
+  if (isStackingContext(vNode, parentVNode)) {
+    const index = stackingOrder.findIndex(({ value }) =>
+      [ROOT_ORDER, FLOAT_ORDER, POSITION_ORDER].includes(value)
+    );
+    if (index !== -1) {
+      stackingOrder.splice(index, stackingOrder.length - index);
+    }
   }
 
   const zIndex = getRealZIndex(vNode, parentVNode);
   if (!['auto', '0'].includes(zIndex)) {
-    stackingOrder.push(createContext(parseInt(zIndex), vNode));
+    stackingOrder.push(createContext(parseInt(zIndex), vNode, index));
+    return stackingOrder;
+  }
+
+  // if a positioned element has z-index: auto or 0 (step #8), or if
+  // a non-positioned floating element (step #5), treat it as its
+  // own stacking context
+  // @see https://www.w3.org/Style/css2-updates/css2/zindex.html
+  if (vNode.getComputedStylePropertyValue('position') !== 'static') {
+    // Put positioned elements above floated elements
+    stackingOrder.push(createContext(POSITION_ORDER, vNode, index));
+    return stackingOrder;
+  }
+
+  if (vNode.getComputedStylePropertyValue('float') !== 'none') {
+    // Put floated elements above z-index: 0
+    // (step #5 floating get sorted below step #8 positioned)
+    stackingOrder.push(createContext(FLOAT_ORDER, vNode, index));
+    return stackingOrder;
+  }
+
+  if (!isStackingContext(vNode, parentVNode)) {
     return stackingOrder;
   }
-  // since many things can create a new stacking context without position or
-  // z-index, we need to know the order in the dom to sort them by. Use the
-  // nodeIndex property to create a number less than the "fake" stacks from
-  // positioned or floated elements but still larger than 0
-  // 10 pad gives us the ability to sort up to 1B nodes (padStart does not
-  // exist in ie11)
-  let float = nodeIndex.toString();
-  while (float.length < 10) {
-    float = '0' + float;
-  }
-  stackingOrder.push(
-    createContext(parseFloat(`${DEFAULT_ORDER}${float}`), vNode)
-  );
 
+  stackingOrder.push(createContext(DEFAULT_ORDER, vNode, index));
   return stackingOrder;
 }
 
-function createContext(value, vNode) {
+function createContext(value, vNode, index) {
   return {
     value,
+    nodeIndex: index,
     vNode
   };
 }

lib/commons/dom/visually-sort.js

@@ -27,6 +27,11 @@ export default function visuallySort(a, b) {
     if (b._stackingOrder[i].value < a._stackingOrder[i].value) {
       return -1;
     }
+
+    // stacks share the same stacking context value so compare document order
+    if (b._stackingOrder[i].nodeIndex !== a._stackingOrder[i].nodeIndex) {
+      return b._stackingOrder[i].nodeIndex - a._stackingOrder[i].nodeIndex;
+    }
   }
 
   // nodes are the same stacking order

test/commons/dom/get-element-stack.js

@@ -465,6 +465,28 @@ describe('dom.getElementStack', () => {
       assert.deepEqual(stack, []);
     });
 
+    it('should correctly position children of different stacking contexts', () => {
+      fixture.innerHTML = `
+        <header id="1" style="position: absolute; z-index: 999; height: 50px; width: 100%; top: 0">
+          <div id="2" style="display: flex; position: relative; height: 50px;">
+            <div id="3" style="position: relative; height: 50px; width: 100%;"></div>
+          </div>
+          <div id="4" style="display: flex; position: absolute; height: 50px; width: 100%; top: 0;">
+            <div id="5" style="position: absolute; transform: translate(0, -50%);">
+              <div id="6" style="display: flex;">
+                <span id="target">Hello World</span>
+              </div>
+            </div>
+          </div>
+        </header>
+      `;
+
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#target');
+      const stack = mapToIDs(getElementStack(target));
+      assert.deepEqual(stack, ['target', '6', '5', '4', '3', '2', '1']);
+    });
+
     it('should throw error if element midpoint-x exceeds the grid', () => {
       fixture.innerHTML = '<div id="target">Hello World</div>';
       axe.testUtils.flatTreeSetup(fixture);