fix: add axe unit tests

.github/workflows/ci.yml

@@ -20,3 +20,5 @@ jobs:
         run: npm run test:browser
       - name: Unit Tests (Server)
         run: npm run test:server
+      - name: Axe Tests
+        run: npm run test:axe

package.json

@@ -9,6 +9,7 @@
     "lint:eslint": "eslint .",
     "lint:style": "stylelint \"**/*.{js,html}\" --ignore-path .gitignore",
     "test": "npm run lint && npm run test:bin && npm run test:server && npm run test:browser",
+    "test:axe": "npx d2l-test-runner axe",
     "test:bin": "mocha './test/bin/**/*.test.js'",
     "test:browser": "npm run test:browser:other && npm run test:browser:ctor",
     "test:browser:other": "npx d2l-test-runner --files \"./test/browser/**/*.test.js\"",

src/browser/axe.js

@@ -30,6 +30,7 @@ chai.Assertion.overwriteMethod('accessible', function(_super) {
 			throw new Error(violationsMessages.join('---'));
 		}
 
+		return this;
 	};
 });
 /* eslint-enable */

test/browser/element.axe.js

@@ -0,0 +1,36 @@
+import { expect, fixture } from '../../src/browser/index.js';
+import { html } from 'lit';
+
+describe('axe', () => {
+	it('typography', async() => {
+		// If typography is set, font color should not match background color, so this should fail accessibility tests
+		const el = await fixture(html`<div style="background-color: black">My content</div>`);
+		await expect(el).to.not.be.accessible();
+	});
+
+	describe('color modes', () => {
+		it('fails on light only', async() => {
+			const el = await fixture(html`<div style="background-color: black">My content</div>`);
+			try {
+				await expect(el).to.be.accessible({ allColorModes: true });
+			} catch (e) {
+				await expect(e.message).to.not.include('Color mode: Dark');
+			}
+		});
+
+		it('fails on dark only', async() => {
+			const el = await fixture(html`<div style="background-color: white">My content</div>`);
+			await expect(el).to.be.accessible();
+			await expect(el).to.not.be.accessible({ allColorModes: true });
+		});
+	});
+
+	it('fixed position outside body', async() => {
+		const el = await fixture(html`<div style="position: fixed; top: 200px; width: 600px; height: 100px;">
+			<p style="color:#AAA;">My content</p>
+		</div>`);
+		document.body.style.overflow = 'hidden';
+		await expect(el).to.not.be.accessible();
+	});
+
+});