the `exclude` option from `axe.run` is not supported

[this-miguel]

Hello!

first of all thanks for this lib!, it really make easy to test with axe.

I just realize in your README file, this section points to axe-core documentation, and there the run function has an exclude option, here . Their example is:

axe.run(
  {
    exclude: '.ad-banner'
  },
  (err, results) => {
    // ...
  }
);

However I see jest-axe does not support that exclude option. I see this typescript error:

1. typescript: Argument of type '{ rules: { [x: string]: { enabled: boolean; }; }; exclude: string[]; }' is not assignable to parameter of type 'RunOptions'.
     Object literal may only specify known properties, and 'exclude' does not exist in type 'RunOptions'. [2345]

Your interface RunOptions:

	interface RunOptions {
		runOnly?: RunOnly | TagValue[] | string[];
		rules?: Object;
		iframes?: boolean;
		elementRef?: boolean;
		selectors?: boolean;
		resultTypes?: resultGroups[];
		reporter?: ReporterVersion;
		xpath?: boolean;
		absolutePaths?: boolean;
		restoreScroll?: boolean;
		frameWaitTime?: number;
		preload?: boolean;
		performanceTimer?: boolean;
	}

I think there is a missmatch between the version of axe-core you use internally and the last version of axe-core to which your documentation points.

for information, I'm using:

    "jest-axe": "^10.0.0",
    "axe-core": "^4.10.3",

[NickColley]

Can you try what you're trying to do with vanilla Node.js?

It sounds like the community supplied TypeScript definitions are out of date not this library?

[this-miguel]

oh, ok these types are not yours. I'm going to try skiping the typscript errors

[this-miguel]

Hello!, so I was trying to exclude some elements from my tests, but I'm having some trouble to undestand how to do it. I would appreciate a bit of help.

I see in the docs from axe there is this exclude option you can pass to axe.run, to make the test ignore a particular element. Is described here

So for what I understand, the exclude is passed in the context parameter (first parameter to axe.run). And seems that with jest-axe you can only pass the options parameter, (second parameter to axe.run)

I thougth you could pass exclude in the options to jest-axe but seems te be completely ignored.

I did this:

import '@testing-library/jest-dom';
import {
  render,
// ...
  screen,
} from '@testing-library/react';
import { jestAxeConfigured } from '../../../test/utils/axeConfigurationUtils';


  it.only('should not have accessibility violations when renderind in a selectable provider', async () => {
    const { container } = render(
      <SelectionProvider count={data.length}>
        <DataTable rows={data} columns={columns} />
      </SelectionProvider>,
    );
    screen.debug(container, 100000);
    const results = await jestAxeConfigured(container, {
      rules: {
        ...KNOWN_ISSUES_ACCESSIBILITY_RULES['nested-interactive'],
      },
      // @ts-expect-error current for jest-axe types are provieed by the comunity (not the package maintainers) and are net up to date
      exclude: [
        'div[data-testid^="rowCheckbox"]',
        'label[for^="input"] > .checkbox[role="checkbox"]',
        'label[for="input1"] > .checkbox[role="checkbox"]',
        'div[data-testid="rowCheckbox-1"]',
        'div[data-testid="rowCheckbox-2"]',
        'div[data-testid="rowCheckbox-3"]',
        ['div[data-testid^="rowCheckbox"]'],
        ['label[for^="input"] > .checkbox[role="checkbox"]'],
        ['label[for="input1"] > .checkbox[role="checkbox"]'],
        ['div[data-testid="rowCheckbox-1"]'],
        ['div[data-testid="rowCheckbox-2"]'],
        ['div[data-testid="rowCheckbox-3"]'],
      ],
    });
    expect(results).toHaveNoViolations();
  });

jestAxeConfigured is created like this:

/* eslint-disable-next-line import/no-extraneous-dependencies */
import axe, { RuleMetadata, Spec } from 'axe-core';
/* eslint-disable-next-line import/no-extraneous-dependencies */
import { configureAxe } from 'jest-axe';

export const SUPPORTED_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];

/**
 * Creates an axe-core configuration object (Spec) to run tests exclusively
 * for rules matching a given set of axe tags.
 * axe tags referonce: https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md#table-of-contents
 *
 * @param {string[]} tagsToRun - An array of axe-core tags to include (for instance, ['wcag2a', 'wcag2aa']).
 * @returns {Spec} The configuration object for use with `axe.configure()`.
 * @throws {Error} If no rules are found for the provided tags, preventing misconfiguration.
 */
// eslint-disable-next-line import/prefer-default-export
export function createSpecForTags(tagsToRun: string[]): Spec {
  const allRules: RuleMetadata[] = axe.getRules();
  const desiredTags = new Set<string>(tagsToRun);

  const rulesToEnable = allRules.filter((rule) =>
    // A rule is kept if any of its tags are in our desired set.
    rule.tags.some((tag) => desiredTags.has(tag)),
  );

  // Prevents configuring Axe with an empty ruleset.
  if (rulesToEnable.length === 0) {
    throw new Error(
      `Axe-core: No rules found for the specified tags: [${tagsToRun.join(
        ', ',
      )}]`,
    );
  }

  // The `Spec` object to be returned.
  const spec: Spec = {
    rules: rulesToEnable.map((rule) => ({ id: rule.ruleId })),
    // When `disableOtherRules` is true, axe will ignore any other rules out that are not specified in the `rules` array.
    disableOtherRules: true,
  };

  return spec;
}

type AxeConfigArg1 = Parameters<typeof configureAxe>[0];

export const jestAxeConfigured = configureAxe({
  globalOptions: createSpecForTags(
    SUPPORTED_TAGS,
    // This is a workaround to avoid a typescript mismatch error.
    // Because `jest-axe` expects a `Spec` object, which is not the same `Spec` type in most recent version (ours) of `axe-core`
    // For our purpose the mismatching property is irrelevant because we dont use it.
  ) as AxeConfigArg1['globalOptions'],
});

Putting the selectors in the exclude (within and without arrays ). It seems is completely ignored. I got this output from the test:

    console.log
    <div>
      <div
        class="container"
        role="region"
        tabindex="-1"
      >
        <table
          class="table"
          data-testid="table"
        >
          <thead
            data-testid="tableHead"
          >
            <tr
              class="row"
            >
              <th
                aria-label="Select all head cell"
                class="cell checkCell"
              >
                <label
                  class="container"
                  for="input1"
                >
                  <input
                    aria-hidden="true"
                    class="defaultCheckbox"
                    id="input1"
                    type="checkbox"
                    value=""
                  />
                  <div
                    aria-checked="false"
                    class="checkbox"
                    role="checkbox"
                    tabindex="0"
                  >
                    <svg
                      class="icon"
                    >
                      check.svg
                    </svg>
                  </div>
                </label>
              </th>
              <th
                class="cell undefined"
              >
                <div
                  title="Name"
                >
                  <span
                    class="titleWrapper"
                  >
                    <span>
                      Name
                    </span>
                  </span>
                </div>
              </th>
              <th
                class="cell undefined"
              >
                <div
                  title="Budget"
                >
                  <span
                    class="titleWrapper"
                  >
                    <span>
                      Budget
                    </span>
                  </span>
                </div>
              </th>
              <th
                class="cell undefined"
              >
                <div
                  title="Website"
                >
                  <span
                    class="titleWrapper"
                  >
                    <span>
                      Website
                    </span>
                  </span>
                </div>
              </th>
              <th
                class="cell undefined"
              >
                <div
                  title="Phone"
                >
                  <span
                    class="titleWrapper"
                  >
                    <span>
                      Phone
                    </span>
                  </span>
                </div>
              </th>
              <th
                class="cell undefined"
              >
                <div
                  title="Role"
                >
                  <span
                    class="titleWrapper"
                  >
                    <span>
                      Role
                    </span>
                  </span>
                </div>
              </th>
              <th
                aria-label="Export head cell"
                class="smallCell exportCell"
              >
                <div
                  class="exportBtnWrapper"
                >
                  <span
                    class="ref"
                    data-testid="popoverTarget"
                    role="button"
                    tabindex="0"
                  >
                    <span
                      class="ref"
                      data-testid="popoverTarget"
                      role="button"
                      tabindex="-1"
                    >
                      <button
                        aria-label="Show export actions for table"
                        class="button ghost md normal iconOnly"
                        title="Show export actions for table"
                        type="button"
                      >
                        <div
                          class="content center"
                        >
                          <i
                            aria-hidden="true"
                            class="icon-export"
                            data-testid="exportIcon"
                            role="presentation"
                          />
                        </div>
                      </button>
                    </span>
                  </span>
                </div>
              </th>
            </tr>
          </thead>
          <tbody
            data-testid="tableBody"
          >
            <tr
              class="row notClickable oddRow"
              data-row-key="1"
              data-testid="tableRow"
              tabindex="0"
            >
              <td
                class="cell"
              >
                <label
                  class="container"
                  for="input2"
                >
                  <input
                    aria-hidden="true"
                    class="defaultCheckbox"
                    id="input2"
                    type="checkbox"
                    value=""
                  />
                  <div
                    aria-checked="false"
                    class="checkbox"
                    data-testid="rowCheckbox-1"
                    role="checkbox"
                    tabindex="0"
                  >
                    <svg
                      class="icon"
                    >
                      check.svg
                    </svg>
                  </div>
                </label>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="Andrew Forth"
                >
                  Andrew Forth
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="$ 300"
                >
                  $ 300
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                >
                  <a
                    href="andrewforth.com"
                  >
                    Cool website
                  </a>
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="N/A"
                >
                  N/A
                </div>
              </td>
              <td
                class="cell undefined"
                colspan="2"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="admin"
                >
                  admin
                </div>
              </td>
            </tr>
            <tr
              class="row notClickable evenRow"
              data-row-key="2"
              data-testid="tableRow"
              tabindex="0"
            >
              <td
                class="cell"
              >
                <label
                  class="container"
                  for="input3"
                >
                  <input
                    aria-hidden="true"
                    class="defaultCheckbox"
                    id="input3"
                    type="checkbox"
                    value=""
                  />
                  <div
                    aria-checked="false"
                    class="checkbox"
                    data-testid="rowCheckbox-2"
                    role="checkbox"
                    tabindex="0"
                  >
                    <svg
                      class="icon"
                    >
                      check.svg
                    </svg>
                  </div>
                </label>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="Bill Vino"
                >
                  Bill Vino
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="$ 1000"
                >
                  $ 1000
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                >
                  <a>
                    Cool website
                  </a>
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="N/A"
                >
                  N/A
                </div>
              </td>
              <td
                class="cell undefined"
                colspan="2"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="customer"
                >
                  customer
                </div>
              </td>
            </tr>
            <tr
              class="row notClickable oddRow"
              data-row-key="3"
              data-testid="tableRow"
              tabindex="0"
            >
              <td
                class="cell"
              >
                <label
                  class="container"
                  for="input4"
                >
                  <input
                    aria-hidden="true"
                    class="defaultCheckbox"
                    id="input4"
                    type="checkbox"
                    value=""
                  />
                  <div
                    aria-checked="false"
                    class="checkbox"
                    data-testid="rowCheckbox-3"
                    role="checkbox"
                    tabindex="0"
                  >
                    <svg
                      class="icon"
                    >
                      check.svg
                    </svg>
                  </div>
                </label>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="Charles Wilson"
                >
                  Charles Wilson
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="$ 3000"
                >
                  $ 3000
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                >
                  <a>
                    Cool website
                  </a>
                </div>
              </td>
              <td
                class="cell undefined"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="N/A"
                >
                  N/A
                </div>
              </td>
              <td
                class="cell undefined"
                colspan="2"
                data-testid="tableCell"
              >
                <div
                  class="cellContent"
                  title="finance"
                >
                  finance
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    /Users/msalas/Work/neo1-app/neo1-ui/apps/web/src/components/elements/DataTable/index.spec.tsx:285:12
      283 |       </SelectionProvider>,
      284 |     );
    > 285 |     screen.debug(container, 100000);
          |            ^

      at logDOM (../../node_modules/@testing-library/dom/dist/pretty-dom.js:92:13)

 FAIL  src/components/elements/DataTable/index.spec.tsx
  DataTable component
    ✕ should not have accessibility violations when renderind in a selectable provider (151 ms)

  ● DataTable component › should not have accessibility violations when renderind in a selectable provider

    expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('label[for="input1"] > .checkbox[role="checkbox"]') to have no violations:

    <div class="checkbox" tabindex="0" role="checkbox" aria-checked="false"><svg class="icon">check.svg</svg></div>

    Received:

    "ARIA toggle fields must have an accessible name (aria-toggle-field-name)"

    Fix any of the following:
      Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI

    Expected the HTML found at $('div[data-testid="rowCheckbox-1"]') to have no violations:

    <div class="checkbox" tabindex="0" role="checkbox" aria-checked="false" data-testid="rowCheckbox-1"><svg class="icon">check.sv
g</svg></div>

    Received:

    "ARIA toggle fields must have an accessible name (aria-toggle-field-name)"

    Fix any of the following:
      Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI

    Expected the HTML found at $('div[data-testid="rowCheckbox-2"]') to have no violations:

    <div class="checkbox" tabindex="0" role="checkbox" aria-checked="false" data-testid="rowCheckbox-2"><svg class="icon">check.sv
g</svg></div>

    Received:

    "ARIA toggle fields must have an accessible name (aria-toggle-field-name)"

    Fix any of the following:
      Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI

    Expected the HTML found at $('div[data-testid="rowCheckbox-3"]') to have no violations:

    <div class="checkbox" tabindex="0" role="checkbox" aria-checked="false" data-testid="rowCheckbox-3"><svg class="icon">check.sv
g</svg></div>

    Received:

    "ARIA toggle fields must have an accessible name (aria-toggle-field-name)"

    Fix any of the following:
      Element does not have text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI

      304 |       ],
      305 |     });
    > 306 |     expect(results).toHaveNoViolations();
          |                     ^
      307 |   });
      308 |
      309 |   it('should not have accessibility violations with a sortable table', async () => {

      at Object.<anonymous> (src/components/elements/DataTable/index.spec.tsx:306:21)

Is it possible to use this option exclude with jest-axe?, if yes, could you point how to use it?

[NickColley]

If you can put together something that is backwards compatible then I'm up for considering a PR yeah thank you 😁