Ignore a11y warnings around managing the selected thumbnail

deanmoses · Jan 3, 2023 · b964439 · b964439
1 parent 30cf70b
commit b964439
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 30 deletions.
diff --git a/src/lib/components/site/icons/EmptyStarIcon.svelte b/src/lib/components/site/icons/EmptyStarIcon.svelte
@@ -3,19 +3,20 @@
 
   A hollow outline (not filled-in) of a star
 -->
-
 <script lang="ts">
-	export let width = "1em";
-	export let height = "1em";
+	export let width = '1em';
+	export let height = '1em';
 
-	const d = "M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429zm70 100H284l197 142-74 226 193-139 195 140-74-229 192-140H679l-78-211z";
-	const viewBox = "0 0 1196 1081.166748046875";
+	const d =
+		'M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429zm70 100H284l197 142-74 226 193-139 195 140-74-229 192-140H679l-78-211z';
+	const viewBox = '0 0 1196 1081.166748046875';
 </script>
 
-<svg on:click {width} {height} {viewBox}><path {d}></path></svg>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svg on:click {width} {height} {viewBox}><path {d} /></svg>
 
 <style>
 	path {
 		fill: currentcolor;
 	}
-</style>
+</style>
diff --git a/src/lib/components/site/icons/FilledStarIcon.svelte b/src/lib/components/site/icons/FilledStarIcon.svelte
@@ -3,19 +3,20 @@
 
   A filled-in star icon
 -->
-
 <script lang="ts">
-	export let width = "1em";
-	export let height = "1em";
+	export let width = '1em';
+	export let height = '1em';
 
-	const d = "M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429z";
-	const viewBox = "0 0 1196 1081.166748046875";
+	const d =
+		'M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429z';
+	const viewBox = '0 0 1196 1081.166748046875';
 </script>
 
-<svg on:click {width} {height} {viewBox}><path {d}></path></svg>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svg on:click {width} {height} {viewBox}><path {d} /></svg>
 
 <style>
 	path {
 		fill: currentColor;
 	}
-</style>
+</style>
diff --git a/src/lib/components/site/icons/Icon.svelte b/src/lib/components/site/icons/Icon.svelte
@@ -3,18 +3,18 @@
 
   Base component for all SVG icons
 -->
-
 <script lang="ts">
-	export let width = "1em";
-	export let height = "1em";
-	export let title: string = null;
+	export let width = '1em';
+	export let height = '1em';
+	export let title: string | undefined = undefined;
 	export let d: string;
 	export let viewBox: string;
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <svg on:click {width} {height} {viewBox}>
 	{#if title}<title>{title}</title>{/if}
-	<path {d}></path>
+	<path {d} />
 </svg>
 
 <style>
@@ -27,4 +27,4 @@
 	path {
 		fill: currentcolor;
 	}
-</style>
+</style>
diff --git a/src/lib/components/site/icons/TransitionStarIcon.svelte b/src/lib/components/site/icons/TransitionStarIcon.svelte
@@ -3,32 +3,32 @@
 
 	An icon meant to represent a transition between an unselected star to a selected star
 -->
-
 <script lang="ts">
-	const d = "M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429zm70 100H284l197 142-74 226 193-139 195 140-74-229 192-140H679l-78-211z";
-	const viewBox = "0 0 1196 1081.166748046875";
+	const d =
+		'M454 372L585 19q7-19 17.5-19T620 19l129 353h421q21 0 24 8.5t-14 20.5L838 650l130 401q7 20-.5 25.5T943 1070L600 824l-342 247q-17 12-24.5 6.5t-.5-25.5l130-400L16 401q-17-12-14-20.5t23-8.5h429zm70 100H284l197 142-74 226 193-139 195 140-74-229 192-140H679l-78-211z';
+	const viewBox = '0 0 1196 1081.166748046875';
 </script>
 
-<svg on:click {viewBox}><path {d}></path></svg>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svg on:click {viewBox}><path {d} /></svg>
 
 <style>
-
 	svg {
 		animation: grow 1400ms;
 	}
 
 	@keyframes grow {
 		0% {
-			height:1em;
+			height: 1em;
 			width: 1em;
 		}
 		100% {
-			height:2em;
+			height: 2em;
 			width: 2em;
 		}
 	}
-	
+
 	path {
-		fill: currentcolor;		
+		fill: currentcolor;
 	}
-</style>
+</style>