Fix image alt (#46)

* use domparser in act tests * regenerate act tests * pass document into `labelledByIsValid` * fix overwriting of document The existing code assumed that any document passed into the function was the global document. We should make sure to respect whatever owner document is on the actual element or document that's passed in. * pass ownerDocument into `labelledByIsValid` * use dom parser in image alt tests * add a extra test for image-alt * actually just call `el.ownerDocument` ourselves * remove uneccesary todo
koddsson · Jun 26, 2024 · 07cd684 · 07cd684
1 parent f3c7a94
commit 07cd684
Show file tree

Hide file tree

Showing 42 changed files with 224 additions and 156 deletions.
diff --git a/generate-act-tests.js b/generate-act-tests.js
@@ -165,12 +165,14 @@ for (const rule of applicableRules) {
     throw new Error(`Unknown expected state: ${expected}`);
   }
 
-  const suite = `import { fixture, expect } from "@open-wc/testing";
+  const suite = `import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[${ruleId}]${ruleName}", function () {
   it("${testcaseTitle} (${exampleURL})", async () => {
-    await fixture(\`${html}\`);
+    const document = parser.parseFromString(\`${html}\`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/src/utils.ts b/src/utils.ts
@@ -10,7 +10,7 @@ export function isVisible(el: HTMLElement): boolean {
 export function labelledByIsValid(el: Element): boolean {
   const id = el.getAttribute("aria-labelledby");
   if (!id) return false;
-  const otherElement = querySelector(`#${id}`, document);
+  const otherElement = querySelector(`#${id}`, el.ownerDocument);
   if (!otherElement) return false;
 
   if (otherElement instanceof HTMLSelectElement) return false;
@@ -98,7 +98,7 @@ function recurse(
 ) {
   // if "document" is passed in, it will also pick up "<html>" causing the query to run twice.
   if (container instanceof Document) {
-    container = document.documentElement;
+    container = container.documentElement;
   }
 
   // I haven't figured this one out, but for some reason when using the buildQueries

diff --git a/tests/act/tests/c487ae/014295a8bd7213fdbd69bc1c8ee44c48268370ec.ts b/tests/act/tests/c487ae/014295a8bd7213fdbd69bc1c8ee44c48268370ec.ts
@@ -1,10 +1,12 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 8 (https://act-rules.github.io/testcases/c487ae/014295a8bd7213fdbd69bc1c8ee44c48268370ec.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
-<div id="id1">Web Accessibility Initiative (WAI)</div>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
+<div id="id1">Web Accessibility Initiative (WAI)</div>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/03653844ceb8f6cd95af81672123ea98323ce5c8.ts b/tests/act/tests/c487ae/03653844ceb8f6cd95af81672123ea98323ce5c8.ts
@@ -1,11 +1,13 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 5 (https://act-rules.github.io/testcases/c487ae/03653844ceb8f6cd95af81672123ea98323ce5c8.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" title="Web Accessibility Initiative"
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" title="Web Accessibility Initiative"
 	><img src="/test-assets/shared/w3c-logo.png" alt=""
-/></a>`);
+/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/0d7a7862c5b414c272f1713c341d821f5249a15d.ts b/tests/act/tests/c487ae/0d7a7862c5b414c272f1713c341d821f5249a15d.ts
@@ -1,11 +1,13 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 4 (https://act-rules.github.io/testcases/c487ae/0d7a7862c5b414c272f1713c341d821f5249a15d.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"
 	><img src="/test-assets/shared/w3c-logo.png" aria-label="Web Accessibility Initiative"
-/></a>`);
+/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/113298e42bd5a240371affac3747a470c617610b.ts b/tests/act/tests/c487ae/113298e42bd5a240371affac3747a470c617610b.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 1 (https://act-rules.github.io/testcases/c487ae/113298e42bd5a240371affac3747a470c617610b.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/1752fb0c94ce17c6557a7e498c6e9a87c6a943ea.ts b/tests/act/tests/c487ae/1752fb0c94ce17c6557a7e498c6e9a87c6a943ea.ts
@@ -1,13 +1,15 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 10 (https://act-rules.github.io/testcases/c487ae/1752fb0c94ce17c6557a7e498c6e9a87c6a943ea.html)", async () => {
-    await fixture(`<!DOCTYPE html> <img src="/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
+    const document = parser.parseFromString(`<!DOCTYPE html> <img src="/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
 
 <map name="planetmap">
 	<area shape="rect" coords="0,0,30,100" href="sun.htm" alt="Sun" />
-</map>`);
+</map>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/2917b821f0e317de992cad191ed67aeedb9f34c9.ts b/tests/act/tests/c487ae/2917b821f0e317de992cad191ed67aeedb9f34c9.ts
@@ -1,11 +1,13 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 7 (https://act-rules.github.io/testcases/c487ae/2917b821f0e317de992cad191ed67aeedb9f34c9.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"
 	><img src="/test-assets/shared/w3c-logo.png" alt="" />Web Accessibility Initiative (WAI)</a
->`);
+>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/2bdb0351ae2e82f05cfa15198ca0a353974f6278.ts b/tests/act/tests/c487ae/2bdb0351ae2e82f05cfa15198ca0a353974f6278.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 7 (https://act-rules.github.io/testcases/c487ae/2bdb0351ae2e82f05cfa15198ca0a353974f6278.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/2c58ea9a68f5bf34cabb07059af1a533be96c720.ts b/tests/act/tests/c487ae/2c58ea9a68f5bf34cabb07059af1a533be96c720.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 9 (https://act-rules.github.io/testcases/c487ae/2c58ea9a68f5bf34cabb07059af1a533be96c720.html)", async () => {
-    await fixture(`<!DOCTYPE html> <html>
+    const document = parser.parseFromString(`<!DOCTYPE html> <html>
 	<style>
 		.offScreenLink {
 			position: absolute;
@@ -14,7 +16,7 @@ describe("[c487ae]Link has non-empty accessible name", function () {
 	<body>
 		<a class="offScreenLink" href="https://www.w3.org/WAI">Web Accessibility Initiative (WAI)</a>
 	</body>
-</html>`);
+</html>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/34c82462f976ebaaa5f68fc0f3f519832614e182.ts b/tests/act/tests/c487ae/34c82462f976ebaaa5f68fc0f3f519832614e182.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 1 (https://act-rules.github.io/testcases/c487ae/34c82462f976ebaaa5f68fc0f3f519832614e182.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"> Web Accessibility Initiative (WAI) </a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"> Web Accessibility Initiative (WAI) </a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/43516ed6280651bc0bb5c4fe83ba5312bca2b58b.ts b/tests/act/tests/c487ae/43516ed6280651bc0bb5c4fe83ba5312bca2b58b.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 2 (https://act-rules.github.io/testcases/c487ae/43516ed6280651bc0bb5c4fe83ba5312bca2b58b.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" alt=""/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" alt=""/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/51db96f8a86e965c58617540df61b15b8ba2aee3.ts b/tests/act/tests/c487ae/51db96f8a86e965c58617540df61b15b8ba2aee3.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 5 (https://act-rules.github.io/testcases/c487ae/51db96f8a86e965c58617540df61b15b8ba2aee3.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title=""/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title=""/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/679a7f5c037a7080108928ea74e3792cc9818490.ts b/tests/act/tests/c487ae/679a7f5c037a7080108928ea74e3792cc9818490.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 3 (https://act-rules.github.io/testcases/c487ae/679a7f5c037a7080108928ea74e3792cc9818490.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="presentation"/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="presentation"/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/7453d6a6491ddfe546eabb9f9cf1f01a96b9a805.ts b/tests/act/tests/c487ae/7453d6a6491ddfe546eabb9f9cf1f01a96b9a805.ts
@@ -1,13 +1,15 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 9 (https://act-rules.github.io/testcases/c487ae/7453d6a6491ddfe546eabb9f9cf1f01a96b9a805.html)", async () => {
-    await fixture(`<!DOCTYPE html> <img src="/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
+    const document = parser.parseFromString(`<!DOCTYPE html> <img src="/test-assets/c487ae/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
 
 <map name="planetmap">
 	<area shape="rect" coords="0,0,82,126" href="sun.htm" />
-</map>`);
+</map>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/8130b961773da8671837e6a633ca879d1edd28d0.ts b/tests/act/tests/c487ae/8130b961773da8671837e6a633ca879d1edd28d0.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 10 (https://act-rules.github.io/testcases/c487ae/8130b961773da8671837e6a633ca879d1edd28d0.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" role="none"> </a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" role="none"> </a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/8b39de5e01179f2ca0b55e8aae65a18766530003.ts b/tests/act/tests/c487ae/8b39de5e01179f2ca0b55e8aae65a18766530003.ts
@@ -1,11 +1,13 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 11 (https://act-rules.github.io/testcases/c487ae/8b39de5e01179f2ca0b55e8aae65a18766530003.html)", async () => {
-    await fixture(`<!DOCTYPE html> See [<a href="https://act-rules.github.io/" role="doc-biblioref"
+    const document = parser.parseFromString(`<!DOCTYPE html> See [<a href="https://act-rules.github.io/" role="doc-biblioref"
 	><img src="https://github.com/act-rules/act-rules.github.io/blob/develop/test-assets/shared/act-logo.png" alt=""/></a
->]`);
+>]`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/9f56c77f4e790b52f176c5e2e582112af17ce658.ts b/tests/act/tests/c487ae/9f56c77f4e790b52f176c5e2e582112af17ce658.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 11 (https://act-rules.github.io/testcases/c487ae/9f56c77f4e790b52f176c5e2e582112af17ce658.html)", async () => {
-    await fixture(`<!DOCTYPE html> See [<a href="https://act-rules.github.io/" role="doc-biblioref">ACT rules</a>]`);
+    const document = parser.parseFromString(`<!DOCTYPE html> See [<a href="https://act-rules.github.io/" role="doc-biblioref">ACT rules</a>]`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/a139aa4402ef782bf321751276333b10aafd8e26.ts b/tests/act/tests/c487ae/a139aa4402ef782bf321751276333b10aafd8e26.ts
@@ -1,11 +1,13 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 8 (https://act-rules.github.io/testcases/c487ae/a139aa4402ef782bf321751276333b10aafd8e26.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" style="left: -9999px; position: absolute;">
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI" style="left: -9999px; position: absolute;">
 	<img src="/test-assets/shared/w3c-logo.png" />
-</a>`);
+</a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/a14f9d3d1d69e75cb990c1cb8951f2d70730e450.ts b/tests/act/tests/c487ae/a14f9d3d1d69e75cb990c1cb8951f2d70730e450.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 6 (https://act-rules.github.io/testcases/c487ae/a14f9d3d1d69e75cb990c1cb8951f2d70730e450.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title="Web Accessibility Initiative"/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" title="Web Accessibility Initiative"/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/abce4c2053a6182bae072108d2a879caecc9c25f.ts b/tests/act/tests/c487ae/abce4c2053a6182bae072108d2a879caecc9c25f.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 2 (https://act-rules.github.io/testcases/c487ae/abce4c2053a6182bae072108d2a879caecc9c25f.html)", async () => {
-    await fixture(`<!DOCTYPE html> <div role="link" onclick="openLink(event)" onkeyup="openLink(event)" tabindex="0">
+    const document = parser.parseFromString(`<!DOCTYPE html> <div role="link" onclick="openLink(event)" onkeyup="openLink(event)" tabindex="0">
 	Web Accessibility Initiative (WAI)
 </div>
 <script>
@@ -12,7 +14,7 @@ describe("[c487ae]Link has non-empty accessible name", function () {
 			window.location.href = 'https://www.w3.org/WAI/'
 		}
 	}
-</script>`);
+</script>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/c94621492b6195e264171aa7132198c46cfdf12b.ts b/tests/act/tests/c487ae/c94621492b6195e264171aa7132198c46cfdf12b.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Passed Example 3 (https://act-rules.github.io/testcases/c487ae/c94621492b6195e264171aa7132198c46cfdf12b.html)", async () => {
-    await fixture(`<!DOCTYPE html> <button role="link" onclick="window.location.href='https://www.w3.org/WAI/'">Click me for WAI!</button>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <button role="link" onclick="window.location.href='https://www.w3.org/WAI/'">Click me for WAI!</button>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/d2e2cc0d8464668b150ed39373c350e5c35f59d2.ts b/tests/act/tests/c487ae/d2e2cc0d8464668b150ed39373c350e5c35f59d2.ts
@@ -1,9 +1,11 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 4 (https://act-rules.github.io/testcases/c487ae/d2e2cc0d8464668b150ed39373c350e5c35f59d2.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="none"/></a>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="http://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" role="none"/></a>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };

diff --git a/tests/act/tests/c487ae/e1c9b4f7702d04de31ba52d5af5c63dd6863804a.ts b/tests/act/tests/c487ae/e1c9b4f7702d04de31ba52d5af5c63dd6863804a.ts
@@ -1,10 +1,12 @@
-import { fixture, expect } from "@open-wc/testing";
+import { expect } from "@open-wc/testing";
 import { scan } from "../../../../src/scanner";
 
+const parser = new DOMParser();
+
 describe("[c487ae]Link has non-empty accessible name", function () {
   it("Failed Example 6 (https://act-rules.github.io/testcases/c487ae/e1c9b4f7702d04de31ba52d5af5c63dd6863804a.html)", async () => {
-    await fixture(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
-<div id="id1"></div>`);
+    const document = parser.parseFromString(`<!DOCTYPE html> <a href="https://www.w3.org/WAI"><img src="/test-assets/shared/w3c-logo.png" aria-labelledby="id1"/></a>
+<div id="id1"></div>`, 'text/html');
 
     const results = (await scan(document.body)).map(({ text, url }) => {
       return { text, url };