angular a11y test

.pa11y.js

//https://gist.github.com/markblandford/2e49eccddebc05b86a40d4e39a2d6874
/*
 This config isn't an exact match to that expected by Pa11y, `generatePa11yConfig` will parse this config to what Pa11y is expecting.
 * non-standard properties used by the parser:
 * `id`: (string, required) A unique identifier for the test / URL.
 * `journeyId`: (string, required) JourneyId. A name for the application / journey. Only used for the name of the screenshot.
 * `queryParams`: Key-value pair object, optional) Object of query parameters to include in the URL under test.
 * `extendActions`: (string, optional) The `id` of another test / URL to use the actions from. This helps eliminate the need to duplicate actions across tests / URLs.
 * `screenCapture`: (string, optional) Overwrites the Pa11y property. If given, then a screenshot will be taken of that URL. The text provided will be appended to the filename of the screenshot when saved to `reports/pa11y/`.

 Notes
 * The Test URLs use `PA11Y_URL` environment variable, which should be set with the protocol and hostname.
 * The `NoSuchId` rule is being ignored because the application is using hash routing. Pa11y (and other a11y tools) see these as links to anchors and so complain that no anchor is found.
 * Screenshots are by default saved to `reports/pa11y/`.
*/

const config = {
  defaults: {
    wait: 2000,
  },
  urls: [
    {
      id: 'homepage',
      url: '/',
      journeyId: 'my-web-site',
      actions: [
        'wait for element h1 to be visible',
      ]
    },
  ]
};

function getActions(originalConfig, id, actions) {
  const configForId = originalConfig.urls.find(u => u.id === id);

  if (configForId.extendActions === undefined) {
    return actions;
  }

  const moreActions = originalConfig.urls.find(u => u.id === configForId.extendActions).actions;

  return getActions(originalConfig, configForId.extendActions, [...moreActions, ...actions]);
}

function getScreenShotPath(urlConfig) {
  return `reports/pa11y/${urlConfig.journeyId}_${urlConfig.id}${urlConfig.screenCapture || ''}.png`;
}

/**
 * @return {string}
 */
function URLUnderTest(urlConfig) {
  const baseUrl = process.env.PA11Y_URL;

  let qp = '';
  if (urlConfig.queryParams) {
    let queryParams = [];
    for (let key in urlConfig.queryParams) {
      queryParams.push(`${key}=${urlConfig.queryParams[key]}`);
    }

    qp = `/?${queryParams.join('&')}`;
  }

  return `${baseUrl}${urlConfig.url}${qp}`;
}

function generatePa11yConfig() {
  const configClone = JSON.parse(JSON.stringify(config));

  for (let i = 0; i < config.urls.length; i++) {
    const configUrl = config.urls[i];

    configUrl.actions = getActions(configClone, configUrl.id, configUrl.actions);

    if (configUrl.screenCapture !== undefined) {
      configUrl.screenCapture = getScreenShotPath(configUrl);
    }

    configUrl.url = URLUnderTest(configUrl);
  }

  return {
    defaults: config.defaults,
    urls: config.urls,
  }
}

module.exports = generatePa11yConfig();
/* to trigger/run in commandline (add to npm package.json script): 
 "pa11y-local": "export PA11Y_URL=http://localhost:4200 && pa11y-ci --config src/.pa11yci.js"
*/

a11y.test.ts

var AxeBuilder = require('axe-webdriverjs');

  describe('view1', function() {

    beforeEach(function() { browser.get('index.html'); });

    it('should change Muppets', function() {
      element.all(by.css('[ng-click="selectMuppet(it)"]')).first().
        sendKeys(protractor.Key.ENTER);

      expect(element.all(by.css('#primary-col h2')).first().getText()).
        toMatch('Animal');
    });

    it('should have no accessibility violations', function(done) {
      AxeBuilder(browser)
        .analyze(function(results) {
          if (results.violations.length > 0) {
            console.log(results.violations);
          }
          expect(results.violations.length).toBe(0);
          done();
      });
  });