axe-core 4.2.4 → 4.3.0

package/lib/commons/color/get-background-color.js

@@ -1,84 +0,0 @@
-import incompleteData from './incomplete-data';
-import getBackgroundStack from './get-background-stack';
-import getOwnBackgroundColor from './get-own-background-color';
-import elementHasImage from './element-has-image';
-import Color from './color';
-import flattenColors from './flatten-colors';
-import getTextShadowColors from './get-text-shadow-colors';
-import visuallyContains from '../dom/visually-contains';
-
-/**
- * Determine if element is partially overlapped, triggering a Can't Tell result
- * @private
- * @param {Element} elm
- * @param {Element} bgElm
- * @param {Object} bgColor
- * @return {Boolean}
- */
-function elmPartiallyObscured(elm, bgElm, bgColor) {
-  var obscured =
-    elm !== bgElm && !visuallyContains(elm, bgElm) && bgColor.alpha !== 0;
-  if (obscured) {
-    incompleteData.set('bgColor', 'elmPartiallyObscured');
-  }
-  return obscured;
-}
-
-/**
- * Returns background color for element
- * Uses getBackgroundStack() to get all elements rendered underneath the current element,
- * to help determine the composite background color.
- *
- * @method getBackgroundColor
- * @memberof axe.commons.color
- * @param	{Element} elm Element to determine background color
- * @param	{Array}   [bgElms=[]] elements to inspect
- * @param	{Number}  shadowOutlineEmMax Thickness of `text-shadow` at which it becomes a background color
- * @returns {Color}
- */
-function getBackgroundColor(elm, bgElms = [], shadowOutlineEmMax = 0.1) {
-  let bgColors = getTextShadowColors(elm, { minRatio: shadowOutlineEmMax });
-  const elmStack = getBackgroundStack(elm);
-
-  // Search the stack until we have an alpha === 1 background
-  (elmStack || []).some(bgElm => {
-    const bgElmStyle = window.getComputedStyle(bgElm);
-
-    // Get the background color
-    const bgColor = getOwnBackgroundColor(bgElmStyle);
-
-    if (
-      // abort if a node is partially obscured and obscuring element has a background
-      elmPartiallyObscured(elm, bgElm, bgColor) ||
-      // OR if the background elm is a graphic
-      elementHasImage(bgElm, bgElmStyle)
-    ) {
-      bgColors = null;
-      bgElms.push(bgElm);
-
-      return true;
-    }
-
-    if (bgColor.alpha !== 0) {
-      // store elements contributing to the br color.
-      bgElms.push(bgElm);
-      bgColors.push(bgColor);
-
-      // Exit if the background is opaque
-      return bgColor.alpha === 1;
-    } else {
-      return false;
-    }
-  });
-
-  if (bgColors === null || elmStack === null) {
-    return null;
-  }
-
-  // Mix the colors together, on top of a default white
-  bgColors.push(new Color(255, 255, 255, 1));
-  var colors = bgColors.reduce(flattenColors);
-  return colors;
-}
-
-export default getBackgroundColor;

package/lib/commons/color/get-background-stack.js

@@ -1,130 +0,0 @@
-import filteredRectStack from './filtered-rect-stack';
-import elementHasImage from './element-has-image';
-import getOwnBackgroundColor from './get-own-background-color';
-import incompleteData from './incomplete-data';
-import shadowElementsFromPoint from '../dom/shadow-elements-from-point';
-import reduceToElementsBelowFloating from '../dom/reduce-to-elements-below-floating';
-
-/**
- * Determines overlap of node's content with a bgNode. Used for inline elements
- * @private
- * @param {Element} targetElement
- * @param {Element} bgNode
- * @return {Boolean}
- */
-function contentOverlapping(targetElement, bgNode) {
-  // get content box of target element
-  // check to see if the current bgNode is overlapping
-  var targetRect = targetElement.getClientRects()[0];
-  var obscuringElements = shadowElementsFromPoint(
-    targetRect.left,
-    targetRect.top
-  );
-  if (obscuringElements) {
-    for (var i = 0; i < obscuringElements.length; i++) {
-      if (
-        obscuringElements[i] !== targetElement &&
-        obscuringElements[i] === bgNode
-      ) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-/**
- * Calculate alpha transparency of a background element obscuring the current node
- * @private
- * @param {Number} elmIndex
- * @param {Array} elmStack
- * @param {Element} originalElm
- * @return {Number|undefined}
- */
-function calculateObscuringElement(elmIndex, elmStack, originalElm) {
-  if (elmIndex > 0) {
-    // there are elements above our element, check if they contribute to the background
-    for (var i = elmIndex - 1; i >= 0; i--) {
-      const bgElm = elmStack[i];
-      if (contentOverlapping(originalElm, bgElm)) {
-        return true;
-      } else {
-        // remove elements not contributing to the background
-        elmStack.splice(i, 1);
-      }
-    }
-  }
-
-  return false;
-}
-
-/**
- * Look at document and body elements for relevant background information
- * @method sortPageBackground
- * @private
- * @param {Array} elmStack
- * @returns {Array}
- */
-function sortPageBackground(elmStack) {
-  const bodyIndex = elmStack.indexOf(document.body);
-  const bgNodes = elmStack;
-
-  // Body can sometimes appear out of order in the stack:
-  //   1) Body is not the first element due to negative z-index elements
-  //   2) Elements are positioned outside of body's rect coordinates
-  //      (see https://github.com/dequelabs/axe-core/issues/1456)
-  // In those instances we want to reinsert body back into the element stack
-  // when not using the root document element as the html canvas for bgcolor
-  // prettier-ignore
-  const sortBodyElement =
-    bodyIndex > 1 || // negative z-index elements
-    bodyIndex === -1; // element does not intersect with body
-
-  if (
-    sortBodyElement &&
-    !elementHasImage(document.documentElement) &&
-    getOwnBackgroundColor(window.getComputedStyle(document.documentElement))
-      .alpha === 0
-  ) {
-    // Only remove document.body if it was originally contained within the element stack
-    if (bodyIndex > 1) {
-      bgNodes.splice(bodyIndex, 1);
-    }
-    // Remove document element since body will be used for bgcolor
-    bgNodes.splice(elmStack.indexOf(document.documentElement), 1);
-
-    // Put the body background as the lowest element
-    bgNodes.push(document.body);
-  }
-  return bgNodes;
-}
-
-/**
- * Get all elements rendered underneath the current element,
- * In the order they are displayed (front to back)
- *
- * @method getBackgroundStack
- * @memberof axe.commons.color
- * @param {Element} elm
- * @return {Array}
- */
-function getBackgroundStack(elm) {
-  let elmStack = filteredRectStack(elm);
-
-  if (elmStack === null) {
-    return null;
-  }
-  elmStack = reduceToElementsBelowFloating(elmStack, elm);
-  elmStack = sortPageBackground(elmStack);
-
-  // Return all elements BELOW the current element, null if the element is undefined
-  const elmIndex = elmStack.indexOf(elm);
-  if (calculateObscuringElement(elmIndex, elmStack, elm)) {
-    // if the total of the elements above our element results in total obscuring, return null
-    incompleteData.set('bgColor', 'bgOverlap');
-    return null;
-  }
-  return elmIndex !== -1 ? elmStack : null;
-}
-
-export default getBackgroundStack;

package/lib/commons/color/get-contrast.js

@@ -1,27 +0,0 @@
-import flattenColors from './flatten-colors';
-
-/**
- * Get the contrast of two colors
- * @method getContrast
- * @memberof axe.commons.color.Color
- * @instance
- * @param  {Color}  bgcolor  Background color
- * @param  {Color}  fgcolor  Foreground color
- * @return {number} The contrast ratio
- */
-function getContrast(bgColor, fgColor) {
-  if (!fgColor || !bgColor) {
-    return null;
-  }
-
-  if (fgColor.alpha < 1) {
-    fgColor = flattenColors(fgColor, bgColor);
-  }
-
-  var bL = bgColor.getRelativeLuminance();
-  var fL = fgColor.getRelativeLuminance();
-
-  return (Math.max(fL, bL) + 0.05) / (Math.min(fL, bL) + 0.05);
-}
-
-export default getContrast;

package/lib/commons/color/get-foreground-color.js

@@ -1,69 +0,0 @@
-import Color from './color';
-import getBackgroundColor from './get-background-color';
-import incompleteData from './incomplete-data';
-import flattenColors from './flatten-colors';
-import { getNodeFromTree } from '../../core/utils';
-
-function getOpacity(node) {
-  if (!node) {
-    return 1;
-  }
-
-  const vNode = getNodeFromTree(node);
-
-  if (vNode && vNode._opacity !== undefined && vNode._opacity !== null) {
-    return vNode._opacity;
-  }
-
-  const nodeStyle = window.getComputedStyle(node);
-  const opacity = nodeStyle.getPropertyValue('opacity');
-  const finalOpacity = opacity * getOpacity(node.parentElement);
-
-  // cache the results of the getOpacity check on the parent tree
-  // so we don't have to look at the parent tree again for all its
-  // descendants
-  if (vNode) {
-    vNode._opacity = finalOpacity;
-  }
-
-  return finalOpacity;
-}
-
-/**
- * Returns the flattened foreground color of an element, or null if it can't be determined because
- * of transparency
- * @method getForegroundColor
- * @memberof axe.commons.color
- * @instance
- * @param {Element} node
- * @param {Boolean} noScroll (default false)
- * @param {Color} bgColor
- * @return {Color|null}
- *
- * @deprecated noScroll parameter
- */
-function getForegroundColor(node, _, bgColor) {
-  const nodeStyle = window.getComputedStyle(node);
-
-  const fgColor = new Color();
-  fgColor.parseString(nodeStyle.getPropertyValue('color'));
-  const opacity = getOpacity(node);
-  fgColor.alpha = fgColor.alpha * opacity;
-  if (fgColor.alpha === 1) {
-    return fgColor;
-  }
-
-  if (!bgColor) {
-    bgColor = getBackgroundColor(node, []);
-  }
-
-  if (bgColor === null) {
-    const reason = incompleteData.get('bgColor');
-    incompleteData.set('fgColor', reason);
-    return null;
-  }
-
-  return flattenColors(fgColor, bgColor);
-}
-
-export default getForegroundColor;

package/lib/commons/color/get-own-background-color.js

@@ -1,24 +0,0 @@
-import Color from './color';
-
-/**
- * Returns the non-alpha-blended background color of an element
- *
- * @method getOwnBackgroundColor
- * @memberof axe.commons.color
- *
- * @param {Object} elmStyle style of the element
- * @return {Color}
- */
-function getOwnBackgroundColor(elmStyle) {
-  const bgColor = new Color();
-  bgColor.parseString(elmStyle.getPropertyValue('background-color'));
-
-  if (bgColor.alpha !== 0) {
-    const opacity = elmStyle.getPropertyValue('opacity');
-    bgColor.alpha = bgColor.alpha * opacity;
-  }
-
-  return bgColor;
-}
-
-export default getOwnBackgroundColor;

package/lib/commons/color/get-rect-stack.js

@@ -1,32 +0,0 @@
-import getElementStack from '../dom/get-element-stack';
-import getTextElementStack from '../dom/get-text-element-stack';
-
-/**
- * Get relevant stacks of block and inline elements, excluding line breaks
- * @method getRectStack
- * @memberof axe.commons.color
- * @param {Element} elm
- * @return {Array}
- */
-function getRectStack(elm) {
-  const boundingStack = getElementStack(elm);
-
-  // Handle inline elements spanning multiple lines to be evaluated
-  const filteredArr = getTextElementStack(elm);
-
-  // If the element does not have multiple rects, like for display:block, return a single stack
-  if (!filteredArr || filteredArr.length <= 1) {
-    return [boundingStack];
-  }
-
-  if (filteredArr.some(stack => stack === undefined)) {
-    // Can be happen when one or more of the rects sits outside the viewport
-    return null;
-  }
-
-  // add bounding client rect stack for comparison later
-  filteredArr.splice(0, 0, boundingStack);
-  return filteredArr;
-}
-
-export default getRectStack;

package/lib/commons/color/get-text-shadow-colors.js

@@ -1,121 +0,0 @@
-import Color from './color';
-import assert from '../../core/utils/assert';
-
-/**
- * Get text-shadow colors that can impact the color contrast of the text
- * @param {Element} node  DOM Element
- * @param {Object} options (optional)
- * @property {Bool} minRatio Ignore shadows smaller than this, ratio shadow size divided by font size
- * @property {Bool} maxRatio Ignore shadows equal or larter than this, ratio shadow size divided by font size
- */
-function getTextShadowColors(node, { minRatio, maxRatio } = {}) {
-  const style = window.getComputedStyle(node);
-  const textShadow = style.getPropertyValue('text-shadow');
-  if (textShadow === 'none') {
-    return [];
-  }
-
-  const fontSizeStr = style.getPropertyValue('font-size');
-  const fontSize = parseInt(fontSizeStr);
-  assert(
-    isNaN(fontSize) === false,
-    `Unable to determine font-size value ${fontSizeStr}`
-  );
-
-  const shadowColors = [];
-  const shadows = parseTextShadows(textShadow);
-  shadows.forEach(({ colorStr, pixels }) => {
-    // Defautls only necessary for IE
-    colorStr = colorStr || style.getPropertyValue('color');
-    const [offsetY, offsetX, blurRadius = 0] = pixels;
-    if (
-      (!minRatio || blurRadius >= fontSize * minRatio) &&
-      (!maxRatio || blurRadius < fontSize * maxRatio)
-    ) {
-      const color = textShadowColor({
-        colorStr,
-        offsetY,
-        offsetX,
-        blurRadius,
-        fontSize
-      });
-      shadowColors.push(color);
-    }
-  });
-  return shadowColors;
-}
-
-/**
- * Parse text-shadow property value. Required for IE, which can return the color
- * either at the start or the end, and either in rgb(a) or as a named color
- */
-function parseTextShadows(textShadow) {
-  let current = { pixels: [] };
-  let str = textShadow.trim();
-  const shadows = [current];
-  if (!str) {
-    return [];
-  }
-
-  while (str) {
-    const colorMatch =
-      str.match(/^rgba?\([0-9,.\s]+\)/i) ||
-      str.match(/^[a-z]+/i) ||
-      str.match(/^#[0-9a-f]+/i);
-    const pixelMatch = str.match(/^([0-9.-]+)px/i) || str.match(/^(0)/);
-
-    if (colorMatch) {
-      assert(
-        !current.colorStr,
-        `Multiple colors identified in text-shadow: ${textShadow}`
-      );
-      str = str.replace(colorMatch[0], '').trim();
-      current.colorStr = colorMatch[0];
-    } else if (pixelMatch) {
-      assert(
-        current.pixels.length < 3,
-        `Too many pixel units in text-shadow: ${textShadow}`
-      );
-      str = str.replace(pixelMatch[0], '').trim();
-      const pixelUnit = parseFloat(
-        (pixelMatch[1][0] === '.' ? '0' : '') + pixelMatch[1]
-      );
-      current.pixels.push(pixelUnit);
-    } else if (str[0] === ',') {
-      // multiple text-shadows in a single string (e.g. `text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;`
-      assert(
-        current.pixels.length >= 2,
-        `Missing pixel value in text-shadow: ${textShadow}`
-      );
-      current = { pixels: [] };
-      shadows.push(current);
-      str = str.substr(1).trim();
-    } else {
-      throw new Error(`Unable to process text-shadows: ${textShadow}`);
-    }
-  }
-
-  return shadows;
-}
-
-function textShadowColor({ colorStr, offsetX, offsetY, blurRadius, fontSize }) {
-  if (offsetX > blurRadius || offsetY > blurRadius) {
-    // Shadow is too far removed from the text to impact contrast
-    return new Color(0, 0, 0, 0);
-  }
-
-  const shadowColor = new Color();
-  shadowColor.parseString(colorStr);
-  shadowColor.alpha *= blurRadiusToAlpha(blurRadius, fontSize);
-
-  return shadowColor;
-}
-
-function blurRadiusToAlpha(blurRadius, fontSize) {
-  // This formula is an estimate based on various tests.
-  // Different people test this differently, so opinions may vary.
-  const relativeBlur = blurRadius / fontSize;
-  return 0.185 / (relativeBlur + 0.4);
-}
-
-export default getTextShadowColors;

package/lib/commons/color/has-valid-contrast-ratio.js

@@ -1,30 +0,0 @@
-import getContrast from './get-contrast';
-
-/**
- * Check whether certain text properties meet WCAG contrast rules
- * @method hasValidContrastRatio
- * @memberof axe.commons.color.Color
- * @instance
- * @param  {Color}  bgcolor  Background color
- * @param  {Color}  fgcolor  Foreground color
- * @param  {number}  fontSize  Font size of text, in pixels
- * @param  {boolean}  isBold  Whether the text is bold
- * @return {{isValid: boolean, contrastRatio: number, expectedContrastRatio: number}}
- *
- * @deprecated
- */
-function hasValidContrastRatio(bg, fg, fontSize, isBold) {
-  var contrast = getContrast(bg, fg);
-  var isSmallFont =
-    (isBold && Math.ceil(fontSize * 72) / 96 < 14) ||
-    (!isBold && Math.ceil(fontSize * 72) / 96 < 18);
-  var expectedContrastRatio = isSmallFont ? 4.5 : 3;
-
-  return {
-    isValid: contrast > expectedContrastRatio,
-    contrastRatio: contrast,
-    expectedContrastRatio: expectedContrastRatio
-  };
-}
-
-export default hasValidContrastRatio;

package/lib/commons/color/incomplete-data.js

@@ -1,47 +0,0 @@
-/**
- * API for handling incomplete color data
- * @namespace axe.commons.color.incompleteData
- * @inner
- */
-let data = {};
-const incompleteData = {
-  /**
-   * Store incomplete data by key with a string value
-   * @method set
-   * @memberof axe.commons.color.incompleteData
-   * @instance
-   * @param {String} key Identifier for missing data point (fgColor, bgColor, etc.)
-   * @param {String} reason Missing data reason to match message template
-   */
-  set: function(key, reason) {
-    if (typeof key !== 'string') {
-      throw new Error('Incomplete data: key must be a string');
-    }
-    if (reason) {
-      data[key] = reason;
-    }
-    return data[key];
-  },
-  /**
-   * Get incomplete data by key
-   * @method get
-   * @memberof axe.commons.color.incompleteData
-   * @instance
-   * @param {String} key 	Identifier for missing data point (fgColor, bgColor, etc.)
-   * @return {String} String for reason we couldn't tell
-   */
-  get: function(key) {
-    return data[key];
-  },
-  /**
-   * Clear incomplete data on demand
-   * @method clear
-   * @memberof axe.commons.color.incompleteData
-   * @instance
-   */
-  clear: function() {
-    data = {};
-  }
-};
-
-export default incompleteData;

package/lib/commons/color/index.js

@@ -1,20 +0,0 @@
-/**
- * Namespace for color-related utilities.
- * @namespace commons.color
- * @memberof axe
- */
-export { default as centerPointOfRect } from './center-point-of-rect';
-export { default as Color } from './color';
-export { default as elementHasImage } from './element-has-image';
-export { default as elementIsDistinct } from './element-is-distinct';
-export { default as filteredRectStack } from './filtered-rect-stack';
-export { default as flattenColors } from './flatten-colors';
-export { default as getBackgroundColor } from './get-background-color';
-export { default as getBackgroundStack } from './get-background-stack';
-export { default as getContrast } from './get-contrast';
-export { default as getForegroundColor } from './get-foreground-color';
-export { default as getOwnBackgroundColor } from './get-own-background-color';
-export { default as getRectStack } from './get-rect-stack';
-export { default as hasValidContrastRatio } from './has-valid-contrast-ratio';
-export { default as incompleteData } from './incomplete-data';
-export { default as getTextShadowColors } from './get-text-shadow-colors';

package/lib/commons/dom/find-elms-in-context.js

@@ -1,31 +0,0 @@
-import getRootNode from './get-root-node';
-import { escapeSelector } from '../../core/utils';
-
-/**
- * Find elements referenced from a given context
- * @method findElmsInContext
- * @memberof axe.commons.dom
- * @instance
- * @param {Object} element
- * @param {String} element.context Element in the same context
- * @param {String} element.value Attribute value to search for
- * @param {String} element.attr Attribute name to search for
- * @param {String} element.elm NodeName to search for (optional)
- * @return {Array<Node>}
- */
-function findElmsInContext({ context, value, attr, elm = '' }) {
-  let root;
-  const escapedValue = escapeSelector(value);
-
-  if (context.nodeType === 9 || context.nodeType === 11) {
-    // It's already root
-    root = context;
-  } else {
-    root = getRootNode(context);
-  }
-  return Array.from(
-    root.querySelectorAll(elm + '[' + attr + '=' + escapedValue + ']')
-  );
-}
-
-export default findElmsInContext;

package/lib/commons/dom/find-up-virtual.js

@@ -1,52 +0,0 @@
-import { matchesSelector } from '../../core/utils';
-
-/**
- * recusively walk up the DOM, checking for a node which matches a selector
- *
- * **WARNING:** this should be used sparingly, as it's not even close to being performant
- * @method findUpVirtual
- * @memberof axe.commons.dom
- * @instance
- * @deprecated use axe.utils.closest
- * @param {VirtualNode} element The starting virtualNode
- * @param {String} target The selector for the HTMLElement
- * @return {HTMLElement|null} Either the matching HTMLElement or `null` if there was no match
- */
-function findUpVirtual(element, target) {
-  let parent;
-
-  parent = element.actualNode;
-  // virtualNode will have a shadowId if the element lives inside a shadow DOM or is
-  // slotted into a shadow DOM
-  if (!element.shadowId && typeof element.actualNode.closest === 'function') {
-    // non-shadow DOM elements
-    const match = element.actualNode.closest(target);
-    if (match) {
-      return match;
-    }
-    return null;
-  }
-  // handle shadow DOM elements and older browsers
-  do {
-    // recursively walk up the DOM, checking each parent node
-    parent = parent.assignedSlot ? parent.assignedSlot : parent.parentNode;
-    if (parent && parent.nodeType === 11) {
-      parent = parent.host;
-    }
-  } while (
-    parent &&
-    !matchesSelector(parent, target) &&
-    parent !== document.documentElement
-  );
-
-  if (!parent) {
-    return null;
-  }
-
-  if (!matchesSelector(parent, target)) {
-    return null;
-  }
-  return parent;
-}
-
-export default findUpVirtual;