How to use axe-core - 10 common examples

function runAudit() {
    console.log('[a11y]: running accessibility audit...');
    axe.run(
      document,
      {
        rules: {
          // This is a very annoying property of color-contrast that causes the page to scroll on page load.
          // We disable it here. This 'options' structure is insane btw. wtf.
          'color-contrast': { checks: { 'color-contrast': { options: { noScroll: true } } } },
        },
      },
      (err, results) => {
        if (err) throw err;
        console.log('[a11y]:', results);
        setErrorCount(results.violations.length);
        setResults(results);
      }
    );
  }

it('should be accessible when a query triggers an error', async done => {
      // !BOOM
      addQueryFilter('$qre()');
      buildErrortReportElement();
      await afterQueryError();
      const axeResults = await axe.run(getRoot());
      expect(axeResults).toBeAccessible();
      done();
    });

progress = progress.then(() => {
    axe.reset();
    if (config) {
      axe.configure(config);
    }
    return axe
      .run(
        element || getElement(),
        options ||
          ({
            restoreScroll: true,
          } as RunOptions) // cast to RunOptions is necessary because axe types are not up to date
      )
      .then(report)
      .catch(error => addons.getChannel().emit(EVENTS.ERROR, String(error)));
  });
};

progress = progress.then(() => {
    axe.reset();
    if (config) {
      axe.configure(config);
    }
    return axe
      .run(
        element || getElement(),
        options ||
          ({
            restoreScroll: true,
          } as RunOptions) // cast to RunOptions is necessary because axe types are not up to date
      )
      .then(report)
      .catch(error => addons.getChannel().emit(EVENTS.ERROR, String(error)));
  });
};

progress = progress.then(() => {
    axe.reset();
    if (config) {
      axe.configure(config);
    }
    return axe
      .run(
        element || getElement(),
        options ||
          ({
            restoreScroll: true,
          } as RunOptions) // cast to RunOptions is necessary because axe types are not up to date
      )
      .then(report)
      .catch(error => addons.getChannel().emit(EVENTS.ERROR, String(error)));
  });
};

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,

module.exports = async function(context) {
  // Insert the axe source
  await context.selenium.driver.executeScript(axe);

  // Only configure if we have more keys thhan axe.enable
  if (context.options.axe && Object.keys(context.options.axe).length > 1) {
    await context.selenium.driver.executeScript(
      'axe.configure(' + JSON.stringify(context.options.axe) + ');'
    );
  }

  // Get the result from axe
  const result = await context.selenium.driver.executeAsyncScript(
    'window.axe.run().then(arguments[arguments.length - 1]);'
  );

  // Use the extras field in Browsertime and pass on the result
  context.result[context.result.length - 1].extras.axe = result;
};

function evaluate(node: any, options: any): boolean {
    if (isLandmark(node) === false) {
        return false;
    }

    const role = getObservedRoleForElement(node);
    let label = axe.commons.aria.label(node);
    let candidates: Array = [];
    const selectors = getRoleSelectors(role);
    const selectorsLength = selectors.length;
    label = label ? label.toLowerCase() : null;
    // tslint:disable-next-line:no-invalid-this
    this.data({ role: role, label: label });
    for (let selectorPos = 0; selectorPos < selectorsLength; selectorPos++) {
        candidates = candidates.concat(
            axe.utils.toArray(document.querySelectorAll(selectors[selectorPos])),
        );
    }
    const candidatesLength = candidates.length;
    if (candidatesLength > 1) {
        for (let candidatePos = 0; candidatePos < candidatesLength; candidatePos++) {
            const candidate = candidates[candidatePos];
            if (
                candidate !== node &&
                isLandmark(candidate) &&
                axe.commons.dom.isVisible(candidate, true)
            ) {
                let candidateLabel = axe.commons.aria.label(candidate);
                candidateLabel = candidateLabel ? candidateLabel.toLowerCase() : null;
                if (label === candidateLabel) {
                    return false;
                }