From 9223032a2afed139f8f561018079f62a8603da9c Mon Sep 17 00:00:00 2001
From: Antonio Sarcevic <sarcevicantonio@gmail.com>
Date: Wed, 13 Mar 2024 03:17:11 +0100
Subject: [PATCH] fix: replace span with button (a11y) (#10763)

* fix(site): console line button a11y fixup

* make log.label part of button
---
 .../src/lib/Output/console/ConsoleLine.svelte | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte b/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
index efadc8f3f7..938984bc19 100644
--- a/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte
@@ -15,26 +15,18 @@
 	<ConsoleTable data={log.args[0]} columns={log.args[1]} />
 {/if}
 
-<button
-	class="log console-{log.level}"
-	style="padding-left: {level * 15}px"
-	on:click={log.level === 'group' ? toggle_group_collapse : undefined}
->
+<span class="log console-{log.level}" style="padding-left: {level * 15}px">
 	{#if log.count && log.count > 1}
 		<span class="count">{log.count}x</span>
 	{/if}
 
-	{#if log.level === 'trace' || log.level === 'assert'}
-		<span
-			class="arrow"
-			role="button"
-			tabindex="0"
-			class:expand={!log.collapsed}
-			on:keyup={toggle_group_collapse}
-			on:click={toggle_group_collapse}
-		>
-			▶
-		</span>
+	{#if log.level === 'trace' || log.level === 'assert' || log.level === 'group'}
+		<button on:click={toggle_group_collapse}>
+			<span class="arrow" class:expand={!log.collapsed}> ▶️ </span>
+			{#if log.level === 'group'}
+				<span class="title">{log.label}</span>
+			{/if}
+		</button>
 	{/if}
 
 	{#if log.level === 'assert'}
@@ -45,9 +37,6 @@
 		<span class="info">Console was cleared</span>
 	{:else if log.level === 'unclonable'}
 		<span class="info error">Message could not be cloned. Open devtools to see it</span>
-	{:else if log.level === 'group'}
-		<div class="arrow" class:expand={!log.collapsed}>▶</div>
-		<span class="title">{log.label}</span>
 	{:else if log.level.startsWith('system')}
 		{#each log.args ?? [] as arg}
 			{arg}
@@ -62,7 +51,7 @@
 	{#each new Array(level - 1) as _, idx}
 		<div class="outline" style="left: {idx * 15 + 15}px" />
 	{/each}
-</button>
+</span>
 
 {#if log.level === 'group' && !log.collapsed}
 	{#each log.logs ?? [] as childLog}