feat(frontend): display accessibility issues on top

Add function to copy the a11y issue target into the clipboard
kingsdigitallab · Jul 19, 2024 · 6fc8cb9 · 6fc8cb9
1 parent 93af00b
commit 6fc8cb9
Showing 1 changed file with 59 additions and 34 deletions.
diff --git a/frontend/src/routes/_qa/+page.svelte b/frontend/src/routes/_qa/+page.svelte
@@ -3,48 +3,27 @@
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+
+	/**
+	 * @param {string} text
+	 */
+	function copyTargetToClipboard(text) {
+		navigator.clipboard.writeText(`inspect($$("${text}")[0])`);
+		alert('Copied to clipboard!');
+	}
 </script>
 
 <article>
 	<h1>QA</h1>
 
-	{#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>
-						<th>Timestamp</th>
-						<th>Path</th>
-						<th>Referrer</th>
-						<th>Message</th>
-					</tr>
-				</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>
+				<h3>
+					<BaseLink href={page}>{page}</BaseLink>
+					<small>{data.axe[page].length.toLocaleString()} accessibility issues found!</small>
+				</h3>
 				<table>
 					<thead>
 						<tr>
@@ -61,7 +40,14 @@
 								<td>{violation.id}</td>
 								<td>{violation.impact}</td>
 								<td>{violation.description}</td>
-								<td>{violation.nodes[0].target}</td>
+								<td>
+									<a
+										href="#"
+										class="copy-to-clipboard"
+										on:click|preventDefault={copyTargetToClipboard(violation.nodes[0].target)}
+										>{violation.nodes[0].target}</a
+									>
+								</td>
 								<td><a href={violation.helpUrl}>{violation.help}</a></td>
 							</tr>
 						{/each}
@@ -70,4 +56,43 @@
 			{/each}
 		</section>
 	{/if}
+
+	{#if data.prerender}
+		<section id="qa">
+			<hgroup>
+				<h2>Build errors</h2>
+				<h3><small>{data.prerender.length} build errors found!</small></h3>
+			</hgroup>
+			<table>
+				<thead>
+					<tr>
+						<th>Timestamp</th>
+						<th>Path</th>
+						<th>Referrer</th>
+						<th>Message</th>
+					</tr>
+				</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}
 </article>
+
+<style>
+	table {
+		width: 100%;
+	}
+
+	.copy-to-clipboard {
+		cursor: copy;
+	}
+</style>