Merge pull request #380 from greymass/a11y-contract-btn

Contract/account switch button enhancements
greymass · Feb 21, 2025 · a1bfab0 · a1bfab0
2 parents fedcc77 + 792b0a0
commit a1bfab0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 25 deletions.
diff --git a/src/lib/components/button/account.svelte b/src/lib/components/button/account.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
 	import { cn } from '$lib/utils';
 	import User from 'lucide-svelte/icons/user';
 
@@ -11,10 +10,6 @@
 
 	let { slop = true, ...props }: Props = $props();
 
-	function goToContract() {
-		goto(`/${props.data}`);
-	}
-
 	let buttonSize = $derived(slop ? 'size-12' : 'size-4');
 </script>
 
@@ -23,15 +18,15 @@
 	<div
 		class="relative inline-flex text-skyBlue-500 hover:text-skyBlue-400 focus-visible:text-skyBlue-400 has-[:focus-visible]:text-solar-500"
 	>
-		<button
-			onclick={goToContract}
+		<a
+			href={props.data}
 			class={cn(
 				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
 				buttonSize
 			)}
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->
-		</button>
+		</a>
 		<User class="pointer-events-none z-50 inline size-4 align-baseline peer-active:scale-95" />
 	</div>
 {/if}
diff --git a/src/lib/components/button/code.svelte → src/lib/components/button/contract.svelte b/src/lib/components/button/code.svelte → src/lib/components/button/contract.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
 	import { cn } from '$lib/utils';
 	import Code from 'lucide-svelte/icons/code';
 
@@ -11,10 +10,6 @@
 
 	let { slop = true, ...props }: Props = $props();
 
-	function goToContract() {
-		goto(`/${props.data}`);
-	}
-
 	let buttonSize = $derived(slop ? 'size-12' : 'size-4');
 </script>
 
@@ -23,15 +18,15 @@
 	<div
 		class="relative inline-flex text-skyBlue-500 hover:text-skyBlue-400 focus-visible:text-skyBlue-400 has-[:focus-visible]:text-solar-500"
 	>
-		<button
-			onclick={goToContract}
+		<a
+			href={props.data}
 			class={cn(
 				'peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 focus-visible:outline-none',
 				buttonSize
 			)}
 		>
 			<!-- Button is done this way with absolute positioning so we can maintain a decent hit slop on mobile without affecting layout -->
-		</button>
+		</a>
 		<Code class="pointer-events-none z-50 inline size-4 align-baseline peer-active:scale-95" />
 	</div>
 {/if}
diff --git a/src/lib/components/pageheader.svelte b/src/lib/components/pageheader.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import AccountButton from '$lib/components/button/account.svelte';
-	import CodeButton from '$lib/components/button/code.svelte';
+	import ContractButton from '$lib/components/button/contract.svelte';
 	import CopyButton from '$lib/components/button/copy.svelte';
-	import { languageTag } from '$lib/paraglide/runtime';
 	import { type NetworkState } from '$lib/state/network.svelte';
 	import { chainLogos } from '@wharfkit/common';
 	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
@@ -29,11 +28,9 @@
 
 	let logo = $derived(chainLogos.get(String(props.network.chain.id)) || '');
 
-	let routePath = $derived($page.url.pathname.split('/')[3]);
-	let contractPath = $derived(
-		`${languageTag()}/${props.network.shortname}/contract/${props.title}`
-	);
-	let accountPath = $derived(`${languageTag()}/${props.network.shortname}/account/${props.title}`);
+	let routePath = $derived(page.url.pathname.split('/')[3]);
+	let contractPath = $derived(`/${props.network.shortname}/contract/${props.title}`);
+	let accountPath = $derived(`/${props.network.shortname}/account/${props.title}`);
 </script>
 
 <header class="col-span-full flex min-h-16 items-center gap-4">
@@ -60,10 +57,12 @@
 			{#if routePath === 'account'}
 				<CopyButton data={props.title} slop={false} />
 				{#if props.contract}
-					<CodeButton data={contractPath} slop={false} />
+					<ContractButton data={contractPath} slop={false} />
 				{/if}
 			{/if}
+
 			{#if routePath === 'contract'}
+				<CopyButton data={props.title} slop={false} />
 				<AccountButton data={accountPath} slop={false} />
 			{/if}
 		</h1>