craigcarlyle

function a11yLinter(tagName: string) {
  return cy.window().then((win: any) => {
    return new Cypress.Promise(function(resolve: any, reject: any) {
      win.axe.run(tagName, (err: any, results: any) => {
        if (err) {
          reject(err);
        }
        resolve(results.violations);
      });
    });

craigcarlyle

describe("Keyboard Interactions", () => {
  describe("when checkbox has focus and the 'Space' key is pressed", () => {
    describe("while unchecked", () => {
      it("checks the checkbox", () => {
        cy.keyDown("#axe-test #basic.th-checkbox", "Space");
        cy.get("#axe-test #basic.th-checkbox").should("have.attr", "aria-checked", "true");
      });
    });

    describe("while checked", () => {

craigcarlyle

const keycode = require("keycode");

Cypress.Commands.add("keyDown", (tagName: string, key: string, modifiers: Object) => {
  return cy.window().then((win: any) => {
    const event = Object.assign({
      keyCode: keycode(key),
    }, modifiers);
    const e = win.$.Event("keydown", event);
    win.$(tagName).trigger(e);
  });

craigcarlyle

function a11yLinter(tagName: string) {
  return cy.window().then((win: any) => {
    return new Cypress.Promise(function(resolve: any, reject: any) {
      win.axe.run(tagName, (err: any, results: any) => {
        if (err) {
          reject(err);
        }
        resolve(results.violations);
      });
    });

craigcarlyle

describe("Checkbox", () => {
  describe("a11y", () => {

    beforeEach(() => {
      cy.visit("/component/th-checkbox/example/5");
    });

    describe("aria-label", () => {
      describe("without an aria-label attribute specified", () => {
        it("has an aria-label attribute identical to the checkbox's with-label attribute", () => {

craigcarlyle

<!-- Before -->
<input type="checkbox" name="foo" value="false">

<!-- After -->
<input type="checkbox" name="foo" value="false" role="checkbox" aria-label="Foo Checkbox" aria-checked="false">