Merge pull request #172 from open-source-indie/master

.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

@@ -195,7 +195,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/integration/accesskey_spec.js → cypress/e2e/accesskey_spec.cy.js

@@ -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/autoplay_spec.js → cypress/e2e/autoplay_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/e2e/buttons_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/integration/dir_spec.js → cypress/e2e/dir_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/handlers_spec.js → cypress/e2e/handlers_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(`

cypress/integration/head_spec.js → cypress/e2e/head_spec.cy.js

@@ -1,23 +1,23 @@
-describe("<head>", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
-
-  it('should not have an empty title', () => {
-    cy.get("head title:empty")
-      .each(element => {
-        cy.get(element)
-          .should('have.css', 'background-image') // yields data:image....
-          .and('match', /data/)
-      });
-  });
-
-  it('should not disallow user zooming an', () => {
-    cy.get('head meta[name="viewport"][content*="maximum-scale=1"i], head meta[name="viewport"][content*="user-scalable=no"i]')
-      .each(element => {
-        cy.get(element)
-          .should('have.css', 'background-image') // yields data:image....
-          .and('match', /data/)
-      });
-  });
-});
+describe("<head>", () => {
+beforeEach(() => {
+	cy.visit('/test/index.html')
+})
+
+  it('should not have an empty title', () => {
+    cy.get("head title:empty")
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'background-image') // yields data:image....
+          .and('match', /data/)
+      });
+  });
+
+  it('should not disallow user zooming an', () => {
+    cy.get('head meta[name="viewport"][content*="maximum-scale=1"i], head meta[name="viewport"][content*="user-scalable=no"i]')
+      .each(element => {
+        cy.get(element)
+          .should('have.css', 'background-image') // yields data:image....
+          .and('match', /data/)
+      });
+  });
+});

cypress/integration/headings_spec.js → cypress/e2e/headings_spec.cy.js

@@ -1,41 +1,41 @@
-describe("<headings>", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
-
-  it('should not have empty headings', () => {
-    cy.get("h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty")
-      .each(element => {
-        cy.get(element)
-          .after("border-color")
-          .should('eq', 'rgb(255, 0, 0)') // they could have different error messages
-      });
-  });
-
-  it('should be accessible to assistive technologies', () => {
-    cy.get("h1[aria-hidden], h2[aria-hidden], h3[aria-hidden], h4[aria-hidden], h5[aria-hidden], h6[aria-hidden]")
-      .each(element => {
-        cy.get(element)
-          .after("border-color")
-          .should('eq', 'rgb(255, 0, 0)') // they could have different error messages
-      });
-  });
-
-  it('should be accessible to assistive technologies', () => {
-    cy.get("#heading-skip-levels h1, #heading-skip-levels h5, #heading-skip-levels h3")
-      .each(element => {
-        cy.get(element)
-          .after("content")
-          .should('eq', "ERROR (E0005): Headings should not skip levels.")
-      });
-  });
-
-  it('should not have role=text', () => {
-    cy.get("h1[role='text'], h2[role='text'], h3[role='text'], h4[role='text'], h5[role='text'], h6[role='text']")
-      .each(element => {
-        cy.get(element)
-          .after("content")
-          .should('eq',  "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers") 
-      });
-  });
-});
+describe("<headings>", () => {
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
+
+  it('should not have empty headings', () => {
+    cy.get("h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty")
+      .each(element => {
+        cy.get(element)
+          .after("border-color")
+          .should('eq', 'rgb(255, 0, 0)') // they could have different error messages
+      });
+  });
+
+  it('should be accessible to assistive technologies', () => {
+    cy.get("h1[aria-hidden], h2[aria-hidden], h3[aria-hidden], h4[aria-hidden], h5[aria-hidden], h6[aria-hidden]")
+      .each(element => {
+        cy.get(element)
+          .after("border-color")
+          .should('eq', 'rgb(255, 0, 0)') // they could have different error messages
+      });
+  });
+
+  it('should be accessible to assistive technologies', () => {
+    cy.get("#heading-skip-levels h1, #heading-skip-levels h5, #heading-skip-levels h3")
+      .each(element => {
+        cy.get(element)
+          .after("content")
+          .should('eq', "ERROR (E0005): Headings should not skip levels.")
+      });
+  });
+
+  it('should not have role=text', () => {
+    cy.get("h1[role='text'], h2[role='text'], h3[role='text'], h4[role='text'], h5[role='text'], h6[role='text']")
+      .each(element => {
+        cy.get(element)
+          .after("content")
+          .should('eq',  "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers") 
+      });
+  });
+});

cypress/integration/html_spec.js → cypress/e2e/html_spec.cy.js

@@ -1,7 +1,7 @@
 describe("<html>", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+beforeEach(() => {
+	cy.visit('/test/index.html')
+})
 
   it('should show error if HTML does not have lang attribute', () => {
     cy.get("html[lang]")

cypress/integration/iframe_spec.js → cypress/e2e/iframe_spec.cy.js

@@ -3,9 +3,9 @@ import {
 } from "../support/constants";
 
 describe("<iframe>", () => {
-  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("iframe:not([title])")

cypress/integration/images_spec.js → cypress/e2e/images_spec.cy.js

@@ -4,9 +4,9 @@ import {
 } from "../support/constants";
 
 describe("<images>", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
 
   it('should show error if images do not have alternative text', () => {
     cy.get("img:not([alt])")

cypress/integration/inline_spec.js → cypress/e2e/inline_spec.cy.js

@@ -1,7 +1,7 @@
 describe("[inline]", () => {
-  before(() => {
-    cy.visit("/test/index.html");
-  });
+  beforeEach(() => {
+		cy.visit('/test/index.html')
+  })
 
   it('should not have inline styles with !important', () => {
     cy.get("[style*='!important']")