fix: Improve accessibility in patches page (#206)

ReVanced · Dec 31, 2023 · 425d0c3 · 425d0c3
1 parent 3a8ec6b
commit 425d0c3
Showing 1 changed file with 28 additions and 19 deletions.
diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
@@ -34,13 +34,15 @@
 			<li class="patch-info">🌎 Universal patch</li>
 		{:else}
 			{#each patch.compatiblePackages as pkg}
-				<a
-					href="https://play.google.com/store/apps/details?id={pkg.name}"
-					target="_blank"
-					rel="noreferrer"
-				>
-					<li class="patch-info">📦 {pkg.name}</li>
-				</a>
+				<li class="patch-info">
+					<a
+						href="https://play.google.com/store/apps/details?id={pkg.name}"
+						target="_blank"
+						rel="noreferrer"
+					>
+						📦 {pkg.name}
+					</a>
+				</li>
 			{/each}
 		{/if}
 
@@ -71,14 +73,16 @@
 				</li>
 			{/if}
 			{#if patch.compatiblePackages[0].versions.length > 1}
-				<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
-					<img
-						class="expand-arrow"
-						style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
-						src="/icons/expand_more.svg"
-						alt="dropdown"
-					/>
-				</Button>
+				<li class="button">
+					<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
+						<img
+							class="expand-arrow"
+							style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
+							src="/icons/expand_more.svg"
+							alt="dropdown"
+						/>
+					</Button>
+				</li>
 			{/if}
 		{:else}
 			<li class="patch-info">🎯 Any</li>
@@ -117,6 +121,10 @@
 		color: var(--accent-color-two);
 	}
 
+	.button {
+		display: flex;
+		align-items: center;
+	}
 	.patch-info {
 		display: flex;
 		justify-content: center;
@@ -136,11 +144,12 @@
 
 	a {
 		text-decoration: none;
-	}
+		color: var(--grey-five);
 
-	a .patch-info:hover {
-		text-decoration: underline var(--accent-color-two);
-		color: var(--accent-color-two);
+		&:hover {
+			text-decoration: underline var(--accent-color-two);
+			color: var(--accent-color-two);
+		}
 	}
 
 	.info-container {