From 69dd96fcebc3557cfabb485dc1c8147086b80c4d Mon Sep 17 00:00:00 2001
From: Kendell R <KTibow@users.noreply.github.com>
Date: Sat, 27 Apr 2024 07:18:10 -0700
Subject: [PATCH] fix: more accessible patches list

---
 src/routes/patches/+page.svelte     | 18 ++++++++----------
 src/routes/patches/PatchItem.svelte | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 0331dd6..3fae31a 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -191,16 +191,14 @@
 			</PackageMenu>
 		</aside>
 
-		<div class="patches-container">
-			{#each filter(data.patches, selectedPkg || '', searchTermFiltered) as patch}
-				<!-- Trigger new animations when package or search changes (I love Svelte) -->
-				{#key selectedPkg || searchTermFiltered}
-					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-						<PatchItem {patch} bind:showAllVersions />
-					</div>
-				{/key}
-			{/each}
-		</div>
+		{#key selectedPkg || searchTermFiltered}
+			<!-- Trigger new animations when package or search changes (I love Svelte) -->
+			<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+				{#each filter(data.patches, selectedPkg || '', searchTermFiltered) as patch}
+					<PatchItem {patch} bind:showAllVersions />
+				{/each}
+			</div>
+		{/key}
 	</Query>
 </main>
 <Footer />
diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
index 0b8bede..d856aa6 100644
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -11,10 +11,10 @@
 	let expanded: boolean = false;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svelte:element
+	this={hasPatchOptions ? 'button' : 'div'}
 	class="patch-container"
-	class:expanded={hasPatchOptions}
 	class:rotate={expanded}
 	on:click={() => (expanded = !expanded)}
 >
@@ -103,7 +103,7 @@
 			</div>
 		</span>
 	{/if}
-</div>
+</svelte:element>
 
 <style lang="scss">
 	h3 {
@@ -167,6 +167,13 @@
 		background-color: var(--grey-six);
 		padding: 1.25rem;
 		border-radius: 12px;
+	}
+	button.patch-container {
+		cursor: pointer;
+
+		display: block;
+		border: none;
+		text-align: left;
 
 		&:active {
 			filter: brightness(1.15);
@@ -197,10 +204,6 @@
 		transform: rotate(180deg);
 	}
 
-	.expanded {
-		cursor: pointer;
-	}
-
 	.option {
 		padding: 1rem;