From e3b5e2e5df61e8d27259a33a162efb49b6454a07 Mon Sep 17 00:00:00 2001
From: nileshtrivedi <git@nileshtrivedi.com>
Date: Thu, 28 Nov 2024 13:58:55 +0530
Subject: [PATCH] suppress A11Y warnings

---
 package.json              |  2 +-
 src/AdvancedSearch.svelte |  1 +
 src/AppShell.svelte       |  2 ++
 src/BookCard.svelte       |  1 +
 src/MasonryItem.svelte    |  2 ++
 src/Roadmap.svelte        | 18 ++++++++++++++++++
 src/TreeMap.svelte        |  3 +++
 src/roadmapAlt.svelte     |  6 ++++++
 8 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index df0e7dd..4bf239a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "learndb",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index dc30d66..a3951be 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -27,6 +27,7 @@
 <form class="hidden w-full md:pl-24 md:flex justify-center" onsubmit={preventDefault(bubble('submit'))}>
   <div class="absolute w-2/3 top-2">
     <div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-2/3 mx-auto">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <sl-input 
         placeholder="Search..." size="medium" clearable
         class="p-0"
diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index 6a57d1d..8f0ec9b 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -97,11 +97,13 @@
   <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
   {#if isNavDrawerOpen}
   <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="fixed inset-0 bg-neutral_light bg-opacity-75 mt-12" onclick={e => isNavDrawerOpen = false}></div>
 
     <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
       <div class="relative flex-1 flex flex-col w-64 w-full pb-4">
         <div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary">
+          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
           <nav class="px-4 space-y-1" onclick={e => isNavDrawerOpen = false}>
             {@render nav?.()}
             {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/BookCard.svelte b/src/BookCard.svelte
index e776645..de8be1d 100644
--- a/src/BookCard.svelte
+++ b/src/BookCard.svelte
@@ -9,6 +9,7 @@
     <img class=" h-36 w-24 md:h-56 md:w-40 shrink-0" src={item.image || randomCover(item.id)} alt="{item.name}"/>
   
     {#if item.rating}
+    <!-- svelte-ignore a11y_missing_content -->
     <h1 class="text-sm md:text-lg font-semibold p-2 text-primary_light tracking-wider">
       <sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
     </h1>
diff --git a/src/MasonryItem.svelte b/src/MasonryItem.svelte
index 82be735..95b8da4 100644
--- a/src/MasonryItem.svelte
+++ b/src/MasonryItem.svelte
@@ -20,6 +20,7 @@
 		<span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
 		{:else}
 		<div class="group inline-flex">
+			<!-- svelte-ignore node_invalid_placement_ssr -->
 			<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
 				<div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
 			</a>
@@ -29,6 +30,7 @@
 	
 		<div class="mt-2 flex flex-wrap">
 		{#each parent[1].sort((t1,t2) => (t1.name.localeCompare(t2.name))) as child}
+			<!-- svelte-ignore node_invalid_placement_ssr -->
 			<a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
 		{/each}
 		</div>    
diff --git a/src/Roadmap.svelte b/src/Roadmap.svelte
index 0a51a72..2303f33 100644
--- a/src/Roadmap.svelte
+++ b/src/Roadmap.svelte
@@ -224,6 +224,8 @@
 
 			{#each node.left as sec, j}
 			<g>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect 
 					class="secondary"
 					fill={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? '#ccc' : 'rgb(255,229,153)'}
@@ -232,6 +234,8 @@
 					width={250}
 					height={45}>
 				</rect>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<text
 					class="secondary"
 					text-decoration={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? 'line-through' : 'none'}
@@ -244,6 +248,8 @@
 
 			{#each node.middle as sec,j}
 			<g>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect 
 					class="secondary"
 					fill={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? '#ccc' : 'rgb(255,229,153)'}
@@ -252,6 +258,8 @@
 					width={250}
 					height={45}>
 				</rect>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<text
 					class="secondary"
 					text-decoration={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? 'line-through' : 'none'}
@@ -264,6 +272,8 @@
 
 			{#each node.right as sec, j}
 			<g>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect 
 					class="secondary"
 					fill={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? '#ccc' : 'rgb(255,229,153)'}
@@ -272,6 +282,8 @@
 					width={250}
 					height={45}>
 				</rect>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<text
 					class="secondary"
 					text-decoration={$roadmap_progress[topic] && $roadmap_progress[topic][sec.label] == 'done' ? 'line-through' : 'none'}
@@ -313,14 +325,20 @@
 <sl-drawer open={selectedNode} class="drawer-overview" style="--size: 50vw;">
 	{#if selectedNode}
 		{#if $roadmap_progress[topic] && $roadmap_progress[topic][selectedNode.label] === 'done'}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<sl-button variant="danger" onclick={e => saveProgress(topic, selectedNode.label, 'pending')}>Mark as Pending</sl-button>
 		{:else}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<sl-button variant="success" onclick={e => saveProgress(topic, selectedNode.label, 'done')}>Mark as Done</sl-button>
 		{/if}
 	<div class="mt-8 prose">
 		{@html marked(selectedNode?.desc || "", { renderer })}
 	</div>
 	{/if}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<sl-button slot="footer" variant="primary" onclick={e => selectedNode = null}>Close</sl-button>
 </sl-drawer>
 
diff --git a/src/TreeMap.svelte b/src/TreeMap.svelte
index 2727606..fa52323 100644
--- a/src/TreeMap.svelte
+++ b/src/TreeMap.svelte
@@ -98,6 +98,8 @@
 		<PancakeTreemap {root} >
 			{#snippet children({ node })}
 						{#if is_visible(node, selected)}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
 						transition:fade={{duration:400}}
 						class="node"
@@ -105,6 +107,7 @@
 						onclick={() => select(node)}
 					>
 						<div class="pancontents">
+							<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 							<strong onclick={stopPropagation(() => window.location.href = "/#/topic/" + node.data.name)}>
 								{node.data.name.split('/').reverse()[0]}
 							</strong>
diff --git a/src/roadmapAlt.svelte b/src/roadmapAlt.svelte
index c51bafe..362eeea 100644
--- a/src/roadmapAlt.svelte
+++ b/src/roadmapAlt.svelte
@@ -224,13 +224,19 @@
     <sl-drawer open={selectedNode} class="drawer-overview" style="--size: 50vw;">
         {#if selectedNode}
             {#if $roadmap_progress[topic] && $roadmap_progress[topic][selectedNode.label] === 'done'}
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <sl-button variant="danger" onclick={e => saveProgress(topic, selectedNode.label, 'pending')}>Mark as Pending</sl-button>
             {:else}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <sl-button variant="success" onclick={e => saveProgress(topic, selectedNode.label, 'done')}>Mark as Done</sl-button>
             {/if}
         <div class="mt-8 prose">
             {@html marked(selectedNode? initialNodes[selectedNode-1].data.desc : "", { renderer })}
         </div>
         {/if}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
         <sl-button slot="footer" variant="primary" onclick={e => selectedNode = null}>Close</sl-button>
     </sl-drawer>
\ No newline at end of file