axe-core 4.2.4 → 4.3.0

package/lib/commons/aria/named-from-contents.js

@@ -1,39 +0,0 @@
-import getRole from './get-role';
-import standards from '../../standards';
-import { getNodeFromTree } from '../../core/utils';
-import AbstractVirtuaNode from '../../core/base/virtual-node/abstract-virtual-node';
-
-/**
- * Check if an element is named from contents
- *
- * @param {Node|VirtualNode} element
- * @param {Object} options
- * @property {Bool} strict Whether or not to follow the spects strictly
- * @return {Bool}
- */
-function namedFromContents(vNode, { strict } = {}) {
-  vNode = vNode instanceof AbstractVirtuaNode ? vNode : getNodeFromTree(vNode);
-  if (vNode.props.nodeType !== 1) {
-    return false;
-  }
-
-  const role = getRole(vNode);
-  const roleDef = standards.ariaRoles[role];
-
-  if (roleDef && roleDef.nameFromContent) {
-    return true;
-  }
-
-  /**
-   * Note: Strictly speaking if the role is null, presentation, or none, the element
-   * isn't named from contents. Axe-core often needs to know if an element
-   * has content anyway, so we're allowing it here.
-   * Use { strict: true } to disable this behavior.
-   */
-  if (strict) {
-    return false;
-  }
-  return !roleDef || ['presentation', 'none'].includes(role);
-}
-
-export default namedFromContents;

package/lib/commons/aria/required-attr.js

@@ -1,21 +0,0 @@
-import standards from '../../standards';
-
-/**
- * Get required attributes for a given role
- * @method requiredAttr
- * @memberof axe.commons.aria
- * @instance
- * @param  {String} role The role to check
- * @return {Array}
- */
-function requiredAttr(role) {
-  const roleDef = standards.ariaRoles[role];
-
-  if (!roleDef || !Array.isArray(roleDef.requiredAttrs)) {
-    return [];
-  }
-
-  return [...roleDef.requiredAttrs];
-}
-
-export default requiredAttr;

package/lib/commons/aria/required-context.js

@@ -1,21 +0,0 @@
-import standards from '../../standards';
-
-/**
- * Get the required context (parent) roles for a given role
- * @method requiredContext
- * @memberof axe.commons.aria
- * @instance
- * @param {String} role The role to check
- * @return {Mixed} Either an Array of required context elements or `null` if there are none
- */
-function requiredContext(role) {
-  const roleDef = standards.ariaRoles[role];
-
-  if (!roleDef || !Array.isArray(roleDef.requiredContext)) {
-    return null;
-  }
-
-  return [...roleDef.requiredContext];
-}
-
-export default requiredContext;

package/lib/commons/aria/required-owned.js

@@ -1,21 +0,0 @@
-import standards from '../../standards';
-
-/**
- * Get the required owned (children) roles for a given role
- * @method requiredOwned
- * @memberof axe.commons.aria
- * @instance
- * @param {String} role The role to check
- * @return {Mixed} Either an Array of required owned elements or `null` if there are none
- */
-function requiredOwned(role) {
-  const roleDef = standards.ariaRoles[role];
-
-  if (!roleDef || !Array.isArray(roleDef.requiredOwned)) {
-    return null;
-  }
-
-  return [...roleDef.requiredOwned];
-}
-
-export default requiredOwned;

package/lib/commons/aria/validate-attr-value.js

@@ -1,70 +0,0 @@
-import standards from '../../standards';
-import getRootNode from '../dom/get-root-node';
-import { tokenList } from '../../core/utils';
-
-/**
- * Validate the value of an ARIA attribute
- * @method validateAttrValue
- * @memberof axe.commons.aria
- * @instance
- * @param  {HTMLElement} node The element to check
- * @param  {String} attr The name of the attribute
- * @return {Boolean}
- */
-function validateAttrValue(node, attr) {
-  let matches;
-  let list;
-  const value = node.getAttribute(attr);
-  const attrInfo = standards.ariaAttrs[attr];
-  const doc = getRootNode(node);
-
-  if (!attrInfo) {
-    return true;
-  }
-  if (attrInfo.allowEmpty && (!value || value.trim() === '')) {
-    return true;
-  }
-
-  switch (attrInfo.type) {
-    case 'boolean':
-      return ['true', 'false'].includes(value.toLowerCase());
-
-    case 'nmtoken':
-      return (
-        typeof value === 'string' &&
-        attrInfo.values.includes(value.toLowerCase())
-      );
-
-    case 'nmtokens':
-      list = tokenList(value);
-      // Check if any value isn't in the list of values
-      return list.reduce((result, token) => {
-        return result && attrInfo.values.includes(token);
-        // Initial state, fail if the list is empty
-      }, list.length !== 0);
-
-    case 'idref':
-      return !!(value && doc.getElementById(value));
-
-    case 'idrefs':
-      list = tokenList(value);
-      return list.some(token => doc.getElementById(token));
-
-    case 'string':
-      // Not allowed empty except with allowEmpty: true
-      return value.trim() !== '';
-
-    case 'decimal':
-      matches = value.match(/^[-+]?([0-9]*)\.?([0-9]*)$/);
-      return !!(matches && (matches[1] || matches[2]));
-
-    case 'int':
-      const minValue =
-        typeof attrInfo.minValue !== 'undefined'
-          ? attrInfo.minValue
-          : -Infinity;
-      return /^[-+]?[0-9]+$/.test(value) && parseInt(value) >= minValue;
-  }
-}
-
-export default validateAttrValue;

package/lib/commons/aria/validate-attr.js

@@ -1,16 +0,0 @@
-import standards from '../../standards';
-
-/**
- * Check if an aria- attribute name is valid
- * @method validateAttr
- * @memberof axe.commons.aria
- * @instance
- * @param  {String} att The attribute name
- * @return {Boolean}
- */
-function validateAttr(att) {
-  const attrDefinition = standards.ariaAttrs[att];
-  return !!attrDefinition;
-}
-
-export default validateAttr;

package/lib/commons/color/center-point-of-rect.js

@@ -1,31 +0,0 @@
-/**
- * Get coordinates for an element's client rects or bounding client rect
- *
- * @method centerPointOfRect
- * @memberof axe.commons.color
- * @param {DOMRect} rect
- * @deprecated
- * @returns {Object | undefined}
- */
-function centerPointOfRect(rect) {
-  if (rect.left > window.innerWidth) {
-    return undefined;
-  }
-
-  if (rect.top > window.innerHeight) {
-    return undefined;
-  }
-
-  const x = Math.min(
-    Math.ceil(rect.left + rect.width / 2),
-    window.innerWidth - 1
-  );
-  const y = Math.min(
-    Math.ceil(rect.top + rect.height / 2),
-    window.innerHeight - 1
-  );
-
-  return { x, y };
-}
-
-export default centerPointOfRect;

package/lib/commons/color/color.js

@@ -1,250 +0,0 @@
-import standards from '../../standards';
-
-/**
- * Convert a CSS color value into a number
- */
-function convertColorVal(colorFunc, value, index) {
-  if (/%$/.test(value)) {
-    //<percentage>
-    if (index === 3) {
-      // alpha
-      return parseFloat(value) / 100;
-    }
-    return (parseFloat(value) * 255) / 100;
-  }
-  if (colorFunc[index] === 'h') {
-    // hue
-    if (/turn$/.test(value)) {
-      return parseFloat(value) * 360;
-    }
-    if (/rad$/.test(value)) {
-      return parseFloat(value) * 57.3;
-    }
-  }
-  return parseFloat(value);
-}
-
-/**
- * Convert HSL to RGB
- */
-function hslToRgb([hue, saturation, lightness, alpha]) {
-  // Must be fractions of 1
-  saturation /= 255;
-  lightness /= 255;
-
-  const high = (1 - Math.abs(2 * lightness - 1)) * saturation;
-  const low = high * (1 - Math.abs(((hue / 60) % 2) - 1));
-  const base = lightness - high / 2;
-
-  let colors;
-  if (hue < 60) {
-    // red - yellow
-    colors = [high, low, 0];
-  } else if (hue < 120) {
-    // yellow - green
-    colors = [low, high, 0];
-  } else if (hue < 180) {
-    // green - cyan
-    colors = [0, high, low];
-  } else if (hue < 240) {
-    // cyan - blue
-    colors = [0, low, high];
-  } else if (hue < 300) {
-    // blue - purple
-    colors = [low, 0, high];
-  } else {
-    // purple - red
-    colors = [high, 0, low];
-  }
-
-  return colors
-    .map(color => {
-      return Math.round((color + base) * 255);
-    })
-    .concat(alpha);
-}
-
-/**
- * @class Color
- * @memberof axe.commons.color
- * @param {number} red
- * @param {number} green
- * @param {number} blue
- * @param {number} alpha
- */
-function Color(red, green, blue, alpha) {
-  /** @type {number} */
-  this.red = red;
-
-  /** @type {number} */
-  this.green = green;
-
-  /** @type {number} */
-  this.blue = blue;
-
-  /** @type {number} */
-  this.alpha = alpha;
-
-  /**
-   * Provide the hex string value for the color
-   * @method toHexString
-   * @memberof axe.commons.color.Color
-   * @instance
-   * @return {string}
-   */
-  this.toHexString = function toHexString() {
-    var redString = Math.round(this.red).toString(16);
-    var greenString = Math.round(this.green).toString(16);
-    var blueString = Math.round(this.blue).toString(16);
-    return (
-      '#' +
-      (this.red > 15.5 ? redString : '0' + redString) +
-      (this.green > 15.5 ? greenString : '0' + greenString) +
-      (this.blue > 15.5 ? blueString : '0' + blueString)
-    );
-  };
-
-  const hexRegex = /^#[0-9a-f]{3,8}$/i;
-  const colorFnRegex = /^((?:rgb|hsl)a?)\s*\(([^\)]*)\)/i;
-
-  /**
-   * Parse any valid color string and assign its values to "this"
-   * @method parseString
-   * @memberof axe.commons.color.Color
-   * @instance
-   */
-  this.parseString = function parseString(colorString) {
-    // IE occasionally returns named colors instead of RGB(A) values
-    if (standards.cssColors[colorString] || colorString === 'transparent') {
-      const [red, green, blue] = standards.cssColors[colorString] || [0, 0, 0];
-      this.red = red;
-      this.green = green;
-      this.blue = blue;
-      this.alpha = colorString === 'transparent' ? 0 : 1;
-      return;
-    }
-
-    if (colorString.match(colorFnRegex)) {
-      this.parseColorFnString(colorString);
-      return;
-    }
-
-    if (colorString.match(hexRegex)) {
-      this.parseHexString(colorString);
-      return;
-    }
-    throw new Error(`Unable to parse color "${colorString}"`);
-  };
-
-  /**
-   * Set the color value based on a CSS RGB/RGBA string
-   * @method parseRgbString
-   * @deprecated
-   * @memberof axe.commons.color.Color
-   * @instance
-   * @param  {string}  rgb  The string value
-   */
-  this.parseRgbString = function parseRgbString(colorString) {
-    // IE can pass transparent as value instead of rgba
-    if (colorString === 'transparent') {
-      this.red = 0;
-      this.green = 0;
-      this.blue = 0;
-      this.alpha = 0;
-      return;
-    }
-    this.parseColorFnString(colorString);
-  };
-
-  /**
-   * Set the color value based on a CSS RGB/RGBA string
-   * @method parseHexString
-   * @deprecated
-   * @memberof axe.commons.color.Color
-   * @instance
-   * @param  {string}  rgb  The string value
-   */
-  this.parseHexString = function parseHexString(colorString) {
-    if (!colorString.match(hexRegex) || [6, 8].includes(colorString.length)) {
-      return;
-    }
-    colorString = colorString.replace('#', '');
-    if (colorString.length < 6) {
-      const [r, g, b, a] = colorString;
-      colorString = r + r + g + g + b + b;
-      if (a) {
-        colorString += a + a;
-      }
-    }
-
-    var aRgbHex = colorString.match(/.{1,2}/g);
-    this.red = parseInt(aRgbHex[0], 16);
-    this.green = parseInt(aRgbHex[1], 16);
-    this.blue = parseInt(aRgbHex[2], 16);
-    if (aRgbHex[3]) {
-      this.alpha = parseInt(aRgbHex[3], 16) / 255;
-    } else {
-      this.alpha = 1;
-    }
-  };
-
-  /**
-   * Set the color value based on a CSS RGB/RGBA string
-   * @method parseColorFnString
-   * @deprecated
-   * @memberof axe.commons.color.Color
-   * @instance
-   * @param  {string}  rgb  The string value
-   */
-  this.parseColorFnString = function parseColorFnString(colorString) {
-    const [, colorFunc, colorValStr] = colorString.match(colorFnRegex) || [];
-    if (!colorFunc || !colorValStr) {
-      return;
-    }
-
-    // Get array of color number strings from the string:
-    const colorVals = colorValStr
-      .split(/\s*[,\/\s]\s*/)
-      .map(str => str.replace(',', '').trim())
-      .filter(str => str !== '');
-
-    // Convert to numbers
-    let colorNums = colorVals.map((val, index) => {
-      return convertColorVal(colorFunc, val, index);
-    });
-
-    if (colorFunc.substr(0, 3) === 'hsl') {
-      colorNums = hslToRgb(colorNums);
-    }
-
-    this.red = colorNums[0];
-    this.green = colorNums[1];
-    this.blue = colorNums[2];
-    this.alpha = typeof colorNums[3] === 'number' ? colorNums[3] : 1;
-  };
-
-  /**
-   * Get the relative luminance value
-   * using algorithm from http://www.w3.org/WAI/GL/wiki/Relative_luminance
-   * @method getRelativeLuminance
-   * @memberof axe.commons.color.Color
-   * @instance
-   * @return {number} The luminance value, ranges from 0 to 1
-   */
-  this.getRelativeLuminance = function getRelativeLuminance() {
-    var rSRGB = this.red / 255;
-    var gSRGB = this.green / 255;
-    var bSRGB = this.blue / 255;
-
-    var r =
-      rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4);
-    var g =
-      gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4);
-    var b =
-      bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4);
-
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  };
-}
-
-export default Color;

package/lib/commons/color/element-has-image.js

@@ -1,35 +0,0 @@
-import incompleteData from './incomplete-data';
-
-/**
- * Reports if an element has a background image or gradient
- *
- * @method elementHasImage
- * @memberof axe.commons.color
- * @private
- * @param {Element} elm
- * @param {Object|null} style
- * @return {Boolean}
- */
-function elementHasImage(elm, style) {
-  const graphicNodes = ['IMG', 'CANVAS', 'OBJECT', 'IFRAME', 'VIDEO', 'SVG'];
-  const nodeName = elm.nodeName.toUpperCase();
-
-  if (graphicNodes.includes(nodeName)) {
-    incompleteData.set('bgColor', 'imgNode');
-    return true;
-  }
-
-  style = style || window.getComputedStyle(elm);
-
-  const bgImageStyle = style.getPropertyValue('background-image');
-  const hasBgImage = bgImageStyle !== 'none';
-
-  if (hasBgImage) {
-    const hasGradient = /gradient/.test(bgImageStyle);
-    incompleteData.set('bgColor', hasGradient ? 'bgGradient' : 'bgImage');
-  }
-
-  return hasBgImage;
-}
-
-export default elementHasImage;

package/lib/commons/color/element-is-distinct.js

@@ -1,87 +0,0 @@
-import Color from './color';
-
-/**
- * Creates a string array of fonts for given CSSStyleDeclaration object
- * @private
- * @param {Object} style CSSStyleDeclaration object
- * @return {Array}
- */
-function _getFonts(style) {
-  return style
-    .getPropertyValue('font-family')
-    .split(/[,;]/g)
-    .map(font => {
-      return font.trim().toLowerCase();
-    });
-}
-
-/**
- * Determine if the text content of two nodes is styled in a way that they can be distinguished without relying on color
- * @method elementIsDistinct
- * @memberof axe.commons.color
- * @instance
- * @param  {HTMLElement} node The element to check
- * @param  {HTMLElement} ancestorNode The ancestor node element to check
- * @return {Boolean}
- */
-function elementIsDistinct(node, ancestorNode) {
-  var nodeStyle = window.getComputedStyle(node);
-
-  // Check if the link has a background
-  if (nodeStyle.getPropertyValue('background-image') !== 'none') {
-    return true;
-  }
-
-  // Check if the link has a border or outline
-  var hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(
-    (result, edge) => {
-      var borderClr = new Color();
-      borderClr.parseString(nodeStyle.getPropertyValue(edge + '-color'));
-
-      // Check if a border/outline was specified
-      return (
-        result ||
-        // or if the current border edge / outline
-        (nodeStyle.getPropertyValue(edge + '-style') !== 'none' &&
-          parseFloat(nodeStyle.getPropertyValue(edge + '-width')) > 0 &&
-          borderClr.alpha !== 0)
-      );
-    },
-    false
-  );
-
-  if (hasBorder) {
-    return true;
-  }
-
-  var parentStyle = window.getComputedStyle(ancestorNode);
-  // Compare fonts
-  if (_getFonts(nodeStyle)[0] !== _getFonts(parentStyle)[0]) {
-    return true;
-  }
-
-  var hasStyle = [
-    'text-decoration-line',
-    'text-decoration-style',
-    'font-weight',
-    'font-style',
-    'font-size'
-  ].reduce((result, cssProp) => {
-    return (
-      result ||
-      nodeStyle.getPropertyValue(cssProp) !==
-        parentStyle.getPropertyValue(cssProp)
-    );
-  }, false);
-
-  var tDec = nodeStyle.getPropertyValue('text-decoration');
-  if (tDec.split(' ').length < 3) {
-    // old style CSS text decoration
-    hasStyle =
-      hasStyle || tDec !== parentStyle.getPropertyValue('text-decoration');
-  }
-
-  return hasStyle;
-}
-
-export default elementIsDistinct;

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

@@ -1,51 +0,0 @@
-import getRectStack from './get-rect-stack';
-import incompleteData from './incomplete-data';
-
-/**
- * Get filtered stack of block and inline elements, excluding line breaks
- * @method filteredRectStack
- * @memberof axe.commons.color
- * @param {Element} elm
- * @return {Array}
- */
-function filteredRectStack(elm) {
-  const rectStack = getRectStack(elm);
-
-  if (rectStack && rectStack.length === 1) {
-    return rectStack[0];
-  }
-
-  if (rectStack && rectStack.length > 1) {
-    const boundingStack = rectStack.shift();
-    let isSame;
-
-    // iterating over arrays of DOMRects
-    rectStack.forEach((rectList, index) => {
-      if (index === 0) {
-        return;
-      }
-      // if the stacks are the same, use the first one. otherwise, return null.
-      const rectA = rectStack[index - 1],
-        rectB = rectStack[index];
-
-      // if elements in clientRects are the same
-      // or the boundingClientRect contains the differing element, pass it
-      isSame =
-        rectA.every(
-          (element, elementIndex) => element === rectB[elementIndex]
-        ) || boundingStack.includes(elm);
-    });
-    if (!isSame) {
-      incompleteData.set('bgColor', 'elmPartiallyObscuring');
-      return null;
-    }
-    // pass the first stack if it wasn't partially covered
-    return rectStack[0];
-  }
-
-  // rect outside of viewport
-  incompleteData.set('bgColor', 'outsideViewport');
-  return null;
-}
-
-export default filteredRectStack;

package/lib/commons/color/flatten-colors.js

@@ -1,22 +0,0 @@
-import Color from './color';
-
-/**
- * Combine the two given color according to alpha blending.
- * @method flattenColors
- * @memberof axe.commons.color.Color
- * @instance
- * @param {Color} fgColor Foreground color
- * @param {Color} bgColor Background color
- * @return {Color} Blended color
- */
-function flattenColors(fgColor, bgColor) {
-  var alpha = fgColor.alpha;
-  var r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
-  var g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
-  var b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
-  var a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
-
-  return new Color(r, g, b, a);
-}
-
-export default flattenColors;