How to use the axe-core.commons function in axe-core

return backgrounds.reduce((acc, bg) => {
    const bgColor = new axe.commons.color.Color(...bg.rgba);

    texts.filter(fg => fg.hex !== bg.hex).forEach(fg => {
      const fgColor = new axe.commons.color.Color(...fg.rgba);
      const contrast = axe.commons.color.getContrast(bgColor, fgColor);
      // TODO: Account for bold text here
      const cutoff = results.fontSize < 18 ? 4.5 : 3;
      const pass = contrast >= cutoff;
      const suggestedColor =
        !pass &&
        suggestColors(bgColor, fgColor, {
          AA: cutoff
        });
      const suggestion = suggestedColor && suggestedColor['AA'];
      const { rgba, hex } = suggestion && getAllColorTypes(suggestion.fg);

      acc.push({

texts.filter(fg => fg.hex !== bg.hex).forEach(fg => {
      const fgColor = new axe.commons.color.Color(...fg.rgba);
      const contrast = axe.commons.color.getContrast(bgColor, fgColor);
      // TODO: Account for bold text here
      const cutoff = results.fontSize < 18 ? 4.5 : 3;
      const pass = contrast >= cutoff;
      const suggestedColor =
        !pass &&
        suggestColors(bgColor, fgColor, {
          AA: cutoff
        });
      const suggestion = suggestedColor && suggestedColor['AA'];
      const { rgba, hex } = suggestion && getAllColorTypes(suggestion.fg);

      acc.push({
        fg,
        bg,
        contrast,

function getAllPseudoElements(node: HTMLElement): HTMLElement[] {
    const elements = node.querySelectorAll('*');

    const hasContent = styles => {
        return styles && styles.content !== 'none';
    };

    const pseudoElements = [];
    for (let index = 0; index < elements.length; index++) {
        const element = elements.item(index);
        const beforeStyles = window.getComputedStyle(element, ':before');
        const afterStyles = window.getComputedStyle(element, ':after');

        if (
            axe.commons.dom.isVisible(element) &&
            (hasContent(beforeStyles) || hasContent(afterStyles))
        ) {
            pseudoElements.push(element);
        }
    }

    return pseudoElements;
}

export function getAccessibleText(node: HTMLElement, isLabelledByContext: boolean): string {
    return axe.commons.text.accessibleText(node, isLabelledByContext);
}

return combos.map((combo, i) => {
		var fgColor = getColor(combo[0]);
		var bgColor = getColor(combo[1]);
		var contrast = axe.commons.color.getContrast(bgColor, fgColor);
		return 
		
		
		
		
		
			Sample Text
		
		
			{ `${(contrast >= 4.5 ? '\u2714' : '\u2718')}  (${contrast.toFixed(2)}:1)` }
		
		
			{ `${(contrast >= 3.0 ? '\u2714' : '\u2718')}  (${contrast.toFixed(2)}:1)` }
		
      
        { contrast >= 3.0 && contrast < 4.5 ?

function matches(node: HTMLElement): boolean {
    const nodeStyle = window.getComputedStyle(node);
    return (
        axe.commons.dom.isVisible(node) &&
        (isAbsolutePosition(nodeStyle) || isRightFloat(nodeStyle))
    );
}

function getColor(hex) {
	const { red, green, blue, alpha } = hexRgb(hex);
	return new axe.commons.color.Color(red, green, blue, alpha/255
	);
}

role = role ? role.trim() : role;
    if (!role) {
        role = axe.commons.aria.implicitRole(element);
        const tagName = element.tagName.toLowerCase();
        if (tagName === 'header' || tagName === 'footer') {
            let parent = element.parentNode;
            while (parent && parent.nodeType === 1) {
                const parentTagName = parent.tagName.toLowerCase();
                const excludedDescendants = ['article', 'aside', 'main', 'nav', 'section'];
                if (excludedDescendants.indexOf(parentTagName) >= 0) {
                    role = null;
                }
                parent = parent.parentNode;
            }
        } else if (tagName === 'section' || tagName === 'form') {
            const label = axe.commons.aria.label(element);
            if (!label) {
                role = null;
            }
        }
    }
    if (role) {
        role = role.toLowerCase();
    }
    return role;
}

function isLandmark(element: any): boolean {
    const landmarkRoles = axe.commons.aria.getRolesByType('landmark');
    const role = getObservedRoleForElement(element);

    return (role && landmarkRoles.indexOf(role) >= 0) || role === 'region';
}

public static isValidRoleIfPresent(
        node: HTMLElement,
        options?: any,
        virtualNode?: any,
        context?: any,
    ): boolean {
        const role = node.getAttribute('role');
        if (role === null) {
            return true;
        }
        return axe.commons.aria.lookupTable.role[role] !== undefined;
    }
}