From 169b41183489cce246c796e54964f2c15902c064 Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Tue, 19 May 2026 18:22:04 -0700
Subject: [PATCH 1/2] fix: add axe unit tests

---
 .github/workflows/ci.yml    |  2 ++
 package.json                |  1 +
 src/browser/axe.js          |  1 +
 test/browser/element.axe.js | 38 +++++++++++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+)
 create mode 100644 test/browser/element.axe.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 94178a4b..10dc05f1 100644
--- a/.github/workflows/ci.yml
+++ b/.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
diff --git a/package.json b/package.json
index 90891e03..b69e51a4 100644
--- a/package.json
+++ b/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\"",
diff --git a/src/browser/axe.js b/src/browser/axe.js
index e172a645..6c0fbf2f 100644
--- a/src/browser/axe.js
+++ b/src/browser/axe.js
@@ -30,6 +30,7 @@ chai.Assertion.overwriteMethod('accessible', function(_super) {
 			throw new Error(violationsMessages.join('---'));
 		}
 
+		return this;
 	};
 });
 /* eslint-enable */
diff --git a/test/browser/element.axe.js b/test/browser/element.axe.js
new file mode 100644
index 00000000..effc3f67
--- /dev/null
+++ b/test/browser/element.axe.js
@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { expect, fixture } from '../../src/browser/index.js';
+
+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();
+	});
+
+
+});

From d1143660049981f390e4b6e91e063c6c1b0ee55f Mon Sep 17 00:00:00 2001
From: GZolla <43836485+GZolla@users.noreply.github.com>
Date: Tue, 19 May 2026 18:26:57 -0700
Subject: [PATCH 2/2] Appease Linter

---
 test/browser/element.axe.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/test/browser/element.axe.js b/test/browser/element.axe.js
index effc3f67..bcb30853 100644
--- a/test/browser/element.axe.js
+++ b/test/browser/element.axe.js
@@ -1,15 +1,15 @@
-import { html } from 'lit';
 import { expect, fixture } from '../../src/browser/index.js';
+import { html } from 'lit';
 
 describe('axe', () => {
-	it('typography', async() =>{
+	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() =>{
+		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 });
@@ -18,14 +18,13 @@ describe('axe', () => {
 			}
 		});
 
-		it('fails on dark only', async() =>{
+		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>
@@ -34,5 +33,4 @@ describe('axe', () => {
 		await expect(el).to.not.be.accessible();
 	});
 
-
 });