Cloud Defense Logo

Products

Solutions

Company

Book A Live Demo

Top 9 Examples of "axe-core in functional component" in JavaScript

Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'axe-core' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.

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;
                }

Is your System Free of Underlying Vulnerabilities?
Find Out Now