Skip to content

Commit 9223032

Browse files
fix: replace span with button (a11y) (#10763)
* fix(site): console line button a11y fixup * make log.label part of button
1 parent 3f7fcf9 commit 9223032

File tree

1 file changed

+9
-20
lines changed

1 file changed

+9
-20
lines changed

sites/svelte-5-preview/src/lib/Output/console/ConsoleLine.svelte

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,18 @@
1515
<ConsoleTable data={log.args[0]} columns={log.args[1]} />
1616
{/if}
1717

18-
<button
19-
class="log console-{log.level}"
20-
style="padding-left: {level * 15}px"
21-
on:click={log.level === 'group' ? toggle_group_collapse : undefined}
22-
>
18+
<span class="log console-{log.level}" style="padding-left: {level * 15}px">
2319
{#if log.count && log.count > 1}
2420
<span class="count">{log.count}x</span>
2521
{/if}
2622

27-
{#if log.level === 'trace' || log.level === 'assert'}
28-
<span
29-
class="arrow"
30-
role="button"
31-
tabindex="0"
32-
class:expand={!log.collapsed}
33-
on:keyup={toggle_group_collapse}
34-
on:click={toggle_group_collapse}
35-
>
36-
37-
</span>
23+
{#if log.level === 'trace' || log.level === 'assert' || log.level === 'group'}
24+
<button on:click={toggle_group_collapse}>
25+
<span class="arrow" class:expand={!log.collapsed}> ▶️ </span>
26+
{#if log.level === 'group'}
27+
<span class="title">{log.label}</span>
28+
{/if}
29+
</button>
3830
{/if}
3931

4032
{#if log.level === 'assert'}
@@ -45,9 +37,6 @@
4537
<span class="info">Console was cleared</span>
4638
{:else if log.level === 'unclonable'}
4739
<span class="info error">Message could not be cloned. Open devtools to see it</span>
48-
{:else if log.level === 'group'}
49-
<div class="arrow" class:expand={!log.collapsed}>▶</div>
50-
<span class="title">{log.label}</span>
5140
{:else if log.level.startsWith('system')}
5241
{#each log.args ?? [] as arg}
5342
{arg}
@@ -62,7 +51,7 @@
6251
{#each new Array(level - 1) as _, idx}
6352
<div class="outline" style="left: {idx * 15 + 15}px" />
6453
{/each}
65-
</button>
54+
</span>
6655

6756
{#if log.level === 'group' && !log.collapsed}
6857
{#each log.logs ?? [] as childLog}

0 commit comments

Comments
 (0)