Merge branch 'master' of https://github.com/jackdomleo7/Checka11y.css

Author: jackdomleo7

.github/workflows/pipeline.yml

@@ -33,7 +33,7 @@ jobs:
         with:
           browser: chrome
           headless: true
-          spec: "cypress/integration/*"
+          spec: "cypress/e2e/*"
   publish:
     needs: [build, tests]
     if: github.ref == 'refs/heads/master'

.gitignore

@@ -12,3 +12,4 @@ cypress/videos
 cypress/fixtures
 cypress/screenshots
 *.tgz
+.vscode

README.md

@@ -191,7 +191,7 @@ _This project uses npm ≥ 8 and Node ≥ 18 - however any project using this pa
 6. To add error/warning styles and messages to your features, `@extend` one of the placeholders and `@include contentMessage()` from `src/_base.scss`.
 7. Add tests to your features in cypress folder (edit the element file or create a new one if needed)
 8. Run tests: `npm run test:ui` or `npm run test` (headless)
-  - You can also run tests for a specific tag/attribute by doing `npm run test -- --spec cypress/integration/{file-to-test}`
+  - You can also run tests for a specific tag/attribute by doing `npm run test -- --spec cypress/e2e/{file-to-test}`
 9. Add the feature to the [features.md](./features.md) & [codes.md](./codes.md) with a new error or warning code
 
 ---

cypress.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+	projectId: '8purx7',
+	// defaultCommandTimeout: 4000,
+	retries: { openMode: 2, runMode: 1 }, 
+	e2e: {
+		setupNodeEvents(on, config) {
+			// implement node event listeners here
+		},
+	},
+})

cypress.json

@@ -1,7 +1,7 @@
 describe("[accesskey]", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
 
   it('should show warning on elements with accesskey', () => {
     cy.get("[accesskey]")

cypress/integration/accesskey_spec.js cypress/e2e/accesskey_spec.cy.jscypress/integration/accesskey_spec.js renamed to cypress/e2e/accesskey_spec.cy.js

@@ -3,9 +3,9 @@ import {
 } from "../support/constants";
 
 describe("[autoplay]", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
 
   it('should show warning outline on elements with autoplay', () => {
     cy.get("[autoplay]")

cypress/integration/autoplay_spec.js cypress/e2e/autoplay_spec.cy.jscypress/integration/autoplay_spec.js renamed to cypress/e2e/autoplay_spec.cy.js

@@ -0,0 +1,49 @@
+import { ERROR_BORDER_COLOR } from '../support/constants'
+
+describe('<button>', () => {
+	before(() => {
+		cy.visit('/test/index.html')
+	})
+	beforeEach(() => {
+		cy.visit('/test/index.html')
+	})
+
+	it('should not have buttons with interactive content inside', () => {
+		cy.visit('/test/index.html')
+
+		const noneElements = ['audio[controls]', 'embed', 'iframe', 'img[usemap]', 'input:not([type="hidden"])', 'object[usemap]', 'select', 'textarea', 'video[controls]']
+		// removed "button" from afterElements because browser was correcting the issue
+		const afterElements = ['details', 'label']
+		const beforeElements = []
+
+		noneElements.forEach((el) => {
+			cy.get(`button ${el}`).each((element) => {
+				cy.get(element).should('have.css', 'border-color', 'rgb(255, 0, 0)')
+			})
+		})
+
+		afterElements.forEach((el) => {
+			cy.get(`button ${el}`).each((element) => {
+				if (element) {
+					cy.get(element).after('content').should('eq', `ERROR (E0000): Ensure that <${el}> is not a child of <button>.`)
+				}
+			})
+		})
+
+		beforeElements.forEach((el) => {
+			cy.get(`button ${el}`).each((element) => {
+				if (element) {
+					cy.get(element).before('content').should('eq', `ERROR: Ensure that <${el}> is not a child of <button> as it is an invalid HTML.`)
+				}
+			})
+		})
+	})
+
+	it('should not have empty buttons', () => {
+		cy.visit('/test/index.html')
+
+		cy.get('button:not( [aria-label] ):not( [aria-labelledby] ):empty').each((element) => {
+			cy.get(element).after('content').should('eq', 'ERROR (E0001): Ensure that <button> has meaningful content or is labelled appropriately.')
+		})
+	})
+})

cypress/e2e/buttons_spec.cy.js

@@ -1,7 +1,7 @@
 describe("[dir]", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
 
   it('should show error on elements with wrong values for dir attribute', () => {
     cy.get("[dir]:not([dir='rtl']):not([dir='ltr']):not([dir='auto'])")

cypress/integration/dir_spec.js cypress/e2e/dir_spec.cy.jscypress/integration/dir_spec.js renamed to cypress/e2e/dir_spec.cy.js

@@ -1,7 +1,7 @@
 describe("[handlers]", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+	})
 
   it('should show error if the iframe does not have a title', () => {
     cy.get(`