accesskeys rule not failing as expected

[sfdcale]

I have a simple LWC(c-hello-world) as below:

<template>
  <a href="google.com" accesskey="g">Link to Google</a>
  <a href="github.com" accesskey="g">Link to GitHub</a>
</template>

and my jest test looks like below:

import { createElement } from 'lwc';
import HelloWorld from 'c/helloWorld';
import { setup } from '@sa11y/jest';
import { extended, full } from '@sa11y/preset-rules';

describe('c-hello-world', () => {
  beforeAll(() => {
    setup();
  });
  it('duplicate access keys', async () => {
    const element = createElement('c-hello-world', {
      is: HelloWorld
    });
    document.body.appendChild(element);

    await expect(element.shadowRoot.querySelector('a')).toBeAccessible();
    await expect(element.shadowRoot.querySelector('a')).toBeAccessible(extended);
    await expect(element.shadowRoot.querySelector('a')).toBeAccessible(full);
  });
});

Surprisingly, this doesn't fail. I was expecting it to fail as per preset rule accessKeys mentioned here.

What is wrong with my test?

Node version: v14.19.3
@sa11y/jest: 3.1.0
@salesforce/sfdx-lwc-jest: 1.1.0
OS: macOS Monterey

EDIT: The above code actually works and it fails with error A11yError: 1 Accessibility issues found as expected. But once I add afterEach to my jest test, it stops failing and shows no accessibility issues.

This below code doesn't throw error as expected but shows as all passed.

import { createElement } from 'lwc';
import HelloWorld from 'c/helloWorld';
import { setup } from '@sa11y/jest';

describe('c-hello-world', () => {
  beforeAll(() => {
    setup();
  });

  afterEach(() => {
    // The jsdom instance is shared across test cases in a single file so reset the DOM
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
    // Prevent data saved on mocks from leaking between tests
    jest.clearAllMocks();
  });

  it('duplicate access keys', async () => {
    const element = createElement('c-hello-world', {
      is: HelloWorld
    });
    document.body.appendChild(element);

    await expect(element.shadowRoot.querySelectorAll('a').length).toBe(2);
    await expect(element.shadowRoot.querySelector('a')).toBeAccessible();
  });
});

Why afterEach method is causing sa11y to not work as expected?

[mohanraj-r]

Could it be because
https://github.com/salesforce/sa11y/tree/master/packages/jest#caveats

template: elements are not rendered in DOM and hence cannot be checked directly without rendering. They have to be rendered before they can be checked.

[sfdcale]

@mohanraj-r Thanks for looking into it.
My initial post had an error and now I updated it.

If I remove afterEach method from my jest test, it fails as expected. But once I add afterEach to my jest test, it stops doing real accessibility test.

How to work around this?

[mohanraj-r]

@sfdcale Not sure .. if you are using automatic checks then you can use cleanupAfterEach as described in https://github.com/salesforce/sa11y/tree/master/packages/jest#limitations
But when calling API directly not sure why aftereach cleanup would change the a11y results.
You can try moving the cleanup to beforeeach and check if it helps - or try using the cleanupAfterEach with sa11y opts (you can set runAfterEach: false if you don't want automatic checks but want just the cleanup)