jest-axe ignores WCAG2AA rule

[zoltanszogyenyi]

Hello everyone,

First of all thanks for this awesome tool with Jest.

I'm using the following Axe configuration:

// Global helper file (axe-helper.js)
const { configureAxe, axe } = require('jest-axe')

const axe = configureAxe({
  rules: {
    // disabled landmark rules when testing isolated components.
    'region': { enabled: false },
  }
})

module.exports = axe

And then use it like this:

import args from '../../stories/button.stories'
import { createButton } from '../../stories/button'
import { toHaveNoViolations } from 'jest-axe'
const axe = require('../../axe-helper')

expect.extend(toHaveNoViolations)

describe('Button', () => {

    // check style types
    args.argTypes.style.options.map(s => {
        it(`${s} should be accessible`, async () => {
            const render = () => createButton({
                style: s,
                size: 'md',
                label: 'Default'
            })

            // pass anything that outputs html to axe
            const html = render()

            expect(await axe(html)).toHaveNoViolations()
        })
    })

    // check button sizes
    args.argTypes.size.options.map(s => {
        it(`${s} should be accessible`, async () => {
            const render = () => createButton({
                style: 'default',
                size: s,
                label: 'Default'
            })

            // pass anything that outputs html to axe
            const html = render()

            expect(await axe(html)).toHaveNoViolations()
        })
    })

})

I have a yellow button with low contrast and on other WCAG2AA checkers, it says that it's not good, however, when running the tests, I get that everything has passed.

Otherwise, if for example, I test with an element like <img /> without an alt="" attribute it will correctly show an accessibility issue.

Any ideas?

Thanks!

[NickColley]

Contrast checks dont work in jsdom so this is expected.