open-wc - accessability test plugin

a11y-suite.js

import { fixture } from '@open-wc/testing';
/* global Mocha, axs */
const Test = Mocha.Test;
const Suite = Mocha.Suite;

export default async (id, html, ignoredRules) => {
  const element = await fixture(html);
  const mInstancwe = new Mocha();
  const suiteInstance = Suite.create(mocha.suite, 'A11y Audit: ' + id);
  const axsConfig = new axs.AuditConfiguration();
  axsConfig.scope = element.parentNode;
  axsConfig.showUnsupportedRulesWarning = false;
  axsConfig.auditRulesToIgnore = ignoredRules;
  const results = axs.Audit.run(axsConfig);
  results.forEach((result) => {
    // only show applicable tests
    if (result.result !== 'NA') {
      const title = result.rule.heading;
      suiteInstance.addTest(new Test(title, function() {
        const error = result.result === 'FAIL' ? axs.Audit.accessibilityErrorMessage(result) : null;
        if (error) {
          throw new Error(error);
        }
      }));
    }
  });
  mInstancwe.run();
};

karma.conf.js

/* eslint-disable import/no-extraneous-dependencies */
const createDefaultConfig = require('@open-wc/testing-karma/default-config');
const merge = require('webpack-merge');

module.exports = (config) => {
  config.set(
    merge(createDefaultConfig(config), {
      files: [
        // runs all files ending with .test in the test folder,
        // can be overwritten by passing a --grep flag. examples:
        //
        // npm run test -- --grep test/foo/bar.test.js
        // npm run test -- --grep test/bar/*
        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
        'node_modules/accessibility-developer-tools/dist/js/axs_testing.js'
      ],

      // you can overwrite/extend the config further
    }),
  );
  return config;
};

my-component.test.js

import a11y from './a11y-suite.js';

describe('<my-component>', () => {
  a11y('Basic setup', `<div role="listbox">
    <my-component>item</my-component>
    </div>`);
});

package.json

{
  "devDependencies": {
    "accessibility-developer-tools": "^2.12.0"
  }
}