Inconsistent results between the axe-cli, browser add-on, and jsx-a11y plugin

[pdehaan]

I'm extending the 'plugin:jsx-a11y/recommended' config from my .eslintrc.js file, and oddly getting different results between the jsx-a11y plugin, and the axe-cli/browser add-on.

For some reason, the CLI and browser add-on are complaining about a [probably very crappy] nesting of <dl> and <dt>/<dd> tags:

        <dl className="explanations">
            <div>
                <dt>Empowerment</dt>
                <dd>blah blah blah</dd>
            </div>
            <div>
                <dt>Transparency</dt>
                <dd>blah blah blah</dd>
            </div>
        </dl>

Running $ eslint . doesn't report any a11y errors, but I see them if I run the axe-cli CLI (see output below) or the browser add-on linter.

Is there a rule/config in eslint-plugin-jsx-a11y which supports the https://dequeuniversity.com/rules/axe/3.0/definition-list and https://dequeuniversity.com/rules/axe/3.0/dlitem rules?

---

... and here's my axe-cli command and the errors:

> $(npm bin)/axe http://localhost:3000 --timer --load-delay=3000 --disable=color-contrast --exit
Running axe-core 3.0.1 in chrome-headless

Testing http://localhost:3000 ... please wait, this may take a minute.

page load time: 2483.710ms
Waiting for 3000 milliseconds after page load...
axe-core execution time: 348.972ms

  Violation of "definition-list" with 2 occurrences!
    Ensures <dl> elements are structured correctly. Correct invalid elements at:
     - dl:nth-child(3)
     - dl:nth-child(5)
    For details, see: https://dequeuniversity.com/rules/axe/3.0/definition-list

  Violation of "dlitem" with 10 occurrences!
    Ensures <dt> and <dd> elements are contained by a <dl>. Correct invalid elements at:
     - dl:nth-child(3) > div:nth-child(1) > dt
     - dl:nth-child(3) > div:nth-child(1) > dd
     - dl:nth-child(3) > div:nth-child(2) > dt
     - dl:nth-child(3) > div:nth-child(2) > dd
     - dl:nth-child(5) > div:nth-child(1) > dt
     - dl:nth-child(5) > div:nth-child(1) > dd
     - dl:nth-child(5) > div:nth-child(2) > dt
     - dl:nth-child(5) > div:nth-child(2) > dd
     - div:nth-child(3) > dt
     - div:nth-child(3) > dd
    For details, see: https://dequeuniversity.com/rules/axe/3.0/dlitem

12 Accessibility issues detected.

[ljharb]

I’m not sure that it’s odd to get different (non-conflicting) results - axe runs in a browser, so it’ll have a different ability to analyze your code than an eslint plugin will.

That said, this seems like it could be a useful rule to add - however, it might not be useful unless the tags were all defined in the same component.

[jessebeach]

@WilcoFiers is exploring an integration with aXe to provide the testing results for certain rules. I would like the results to be the same between the projects where possible.