open-wc icon indicating copy to clipboard operation
open-wc copied to clipboard

[testing] axe-core 4.5.0+ logs preload warnings

Open keisha-rw opened this issue 3 years ago • 1 comments

When using the isAccessible matcher to validate a lit-html component, the console logs warnings about preload assets:

console.warn
    Couldn't load preload assets:  TypeError: Cannot read properties of null (reading 'href')
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184789
        at Array.filter (<anonymous>)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184765
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184852
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184856
        at Array.forEach (<anonymous>)
        at Object.Yi [as cssom] (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:184326)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186815
        at Array.map (<anonymous>)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186788
        at new Promise (<anonymous>)
        at tl (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:186636)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:366370
        at c (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87202)
        at Object.defer (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87497)
        at wp.value (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:366352)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:369841
        at c (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87202)
        at Object.defer (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:87497)
        at Object.Cp [as _runRules] (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:369819)
        at Object.<anonymous>.axe.run (/Users/<my-username>/git/<my-repo-name>/node_modules/axe-core/axe.min.js:12:376344)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/chai-a11y-axe/src/accessible.js:34:9
        at new Promise (<anonymous>)
        at /Users/<my-username>/git/<my-repo-name>/node_modules/chai-a11y-axe/src/accessible.js:32:10
        at Generator.next (<anonymous>)
        at fulfilled (/Users/<my-username>/git/<my-repo-name>/node_modules/tslib/tslib.js:115:62)

(I replaced some folder names, but you get the idea.)

Test code:

import { assert, fixture } from '@open-wc/testing';
import { CustomButton } from './button';

describe('Button unit tests', () => {
  let element: Element;

  beforeEach(async () => {
    element = await fixture('<custom-button/>');
  });

  it('is accessible', async () => {
    await assert.isAccessible(element);
  });
});

Component code:

import { html, unsafeCSS, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import styles from './button.scss';

@customElement('custom-button')
export class CustomButton extends LitElement {
  componentName = 'button';

  static get styles() {
    return unsafeCSS(styles);
  }

  @property({ type: Boolean })
  disabled: boolean = false;

  render() {
    return html`<button class="my-custom-button" ?disabled=${this.disabled}>
      <slot>Button text</slot>
    </button>`;
  }
}

If I set {preload: false} in the axe options passed in to axe.run() (in the chai-a11y-plugin's accessible.js file, line 34), the warnings disappear. As a workaround for now, I've forced our setup to install axe 4.4.3, since only axe-core 4.5.x causes this issue.

Could an option be added to the opts passed into isAccessible to set preload to false? Or better yet, is there a way we can set the options object that gets passed into axe.run()? Or...could you help me determine why it's giving the preload warnings?

keisha-rw avatar Nov 18 '22 16:11 keisha-rw

Thanks for reporting and for the workarount - it saved me some time.

Encountering the same situation with axe-core 4.7.0

christophe-g avatar May 10 '23 07:05 christophe-g