feat(frontend): load and display accessibility issues

kingsdigitallab · Jul 5, 2024 · 9d8dcdc · 9d8dcdc
1 parent 4817f2b
commit 9d8dcdc
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 32 deletions.
diff --git a/frontend/src/routes/_qa/+page.server.js b/frontend/src/routes/_qa/+page.server.js
@@ -1,22 +1,35 @@
 import { DEBUG } from '$env/static/private';
 import { error } from '@sveltejs/kit';
-import { existsSync, readFileSync } from 'fs';
+import fs from 'fs';
+import path from 'path';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load() {
 	if (DEBUG !== 'true') {
-		return { prerender: [] };
+		return { prerender: {}, axe: [] };
 	}
 
-	const errorFilePath = 'src/lib/prerender-errors.json';
+	const prerenderFilePath = 'src/lib/prerender-errors.json';
+	let prerender = {};
 
-	if (!existsSync(errorFilePath)) {
-		return { prerender: [] };
-	}
+	const axeDirPath = 'test-results';
+	let axe = [];
 
 	try {
-		const prerender = JSON.parse(readFileSync(errorFilePath, 'utf-8'));
-		return { prerender: Object.values(prerender) };
+		if (fs.existsSync(prerenderFilePath)) {
+			prerender = JSON.parse(fs.readFileSync(prerenderFilePath, 'utf-8'));
+		}
+
+		if (fs.existsSync(axeDirPath)) {
+			for (const file of fs.readdirSync(axeDirPath)) {
+				if (file.endsWith('.axe.json')) {
+					const filePath = path.join(axeDirPath, file);
+					axe = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+				}
+			}
+		}
+
+		return { prerender: Object.values(prerender), axe };
 	} catch (e) {
 		error(404, 'Could not load prerender-errors.json');
 	}

diff --git a/frontend/src/routes/_qa/+page.svelte b/frontend/src/routes/_qa/+page.svelte
@@ -8,30 +8,66 @@
 <article>
 	<h1>QA</h1>
 
-	<section>
-		<hgroup>
-			<h2>Build errors</h2>
-			<p><strong>{data.prerender.length}</strong> build errors found!</p>
-		</hgroup>
-		<table>
-			<thead>
-				<tr>
-					<th>Timestamp</th>
-					<th>Path</th>
-					<th>Referrer</th>
-					<th>Message</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each data.prerender as error}
+	{#if data.prerender}
+		<section id="qa">
+			<hgroup>
+				<h2>Build errors</h2>
+				<p><strong>{data.prerender.length}</strong> build errors found!</p>
+			</hgroup>
+			<table>
+				<thead>
 					<tr>
-						<td>{error.timestamp}</td>
-						<td>{error.path}</td>
-						<td><BaseLink href={error.referrer}>{error.referrer}</BaseLink></td>
-						<td>{error.message}</td>
+						<th>Timestamp</th>
+						<th>Path</th>
+						<th>Referrer</th>
+						<th>Message</th>
 					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</section>
+				</thead>
+				<tbody>
+					{#each data.prerender as error}
+						<tr>
+							<td>{error.timestamp}</td>
+							<td>{error.path}</td>
+							<td><BaseLink href={error.referrer}>{error.referrer}</BaseLink></td>
+							<td>{error.message}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</section>
+	{/if}
+
+	{#if Object.keys(data.axe).length > 0}
+		<section id="axe">
+			<h2>Accessibility issues</h2>
+			{#each Object.keys(data.axe) as page}
+				<hgroup>
+					<h3><BaseLink href={page}>{page}</BaseLink></h3>
+					<p><strong>{data.axe[page].length}</strong> accessibility issues found!</p>
+				</hgroup>
+				<table>
+					<thead>
+						<tr>
+							<th>ID</th>
+							<th>Impact</th>
+							<th>Description</th>
+							<th>Target</th>
+							<th>Help</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each data.axe[page] as violation}
+							<tr>
+								<td>{violation.id}</td>
+								<td>{violation.impact}</td>
+								<td>{violation.description}</td>
+								<td>{violation.nodes[0].target}</td>
+								<td><a href={violation.helpUrl}>{violation.help}</a></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/each}
+		</section>
+	{/if}
 </article>