chore: a11y fixes

src/lib/components/card.svelte

@@ -46,6 +46,7 @@
     class:is-allowed-focus={href}
     on:click
     on:keyup={clickOnEnter}
+    role={href || isButton ? 'button' : 'generic'}
     {href}>
     <slot />
 </svelte:element>

src/lib/components/collapsibleItem.svelte

@@ -7,7 +7,13 @@
 
 <li class="collapsible-item">
     <details class="collapsible-wrapper" {open}>
-        <summary class="collapsible-button" on:keyup={clickOnEnter} on:click>
+        <!-- svelte-ignore a11y-no-redundant-roles -->
+        <summary
+            class="collapsible-button"
+            on:keyup={clickOnEnter}
+            on:click
+            role="button"
+            tabindex="0">
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>

src/lib/components/copy.svelte

@@ -34,6 +34,8 @@
 
 <span
     data-private
+    role="button"
+    tabindex="0"
     style:cursor="pointer"
     on:click|preventDefault={handleClick}
     on:keyup={clickOnEnter}

src/lib/components/dropListLink.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { clickOnEnter } from '$lib/helpers/a11y';
-
     export let href: string;
     export let icon: string = null;
     export let disabled = false;
     export let external = false;
 </script>
 
-<li class="drop-list-item" on:click on:keyup={clickOnEnter}>
+<li class="drop-list-item">
     <a
+        on:click
         {href}
         class="drop-button"
         class:is-disabled={disabled}

src/lib/components/eventModal.svelte

@@ -339,6 +339,7 @@
             <div {...{ type: 'text' }} style="min-height: 2.5rem;">
                 {#each eventString as route, i}
                     <span
+                        role="tooltip"
                         class:u-opacity-0-5={helper !== route.description}
                         on:mouseenter={() => (helper = route.description)}
                         on:mouseleave={() => (helper = null)}>

src/lib/components/step.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { clickOnEnter } from '$lib/helpers/a11y';
-
     export let completed = false;
     export let current = false;
     export let currentSub = 0;
@@ -9,37 +7,40 @@
 </script>
 
 <li
-    on:click|preventDefault
-    on:keyup|self={clickOnEnter}
     class:steps-item={!isSub}
     class:steps-sub-item={isSub}
-    style={`cursor: ${completed ? 'pointer' : 'default'};`}
     aria-label={`${completed ? 'done' : current ? 'current' : ''} step`}>
-    {#if isSub}
-        <span class="text">{step.text}</span>
-    {:else}
-        <div class="steps-item-wrapper">
-            {#if completed}
-                <div class="bullet is-done">
-                    <span class="icon-check" aria-hidden="true" />
-                </div>
-            {:else}
-                <div class="bullet" class:is-current={current} />
-            {/if}
-            <div class="steps-item-content">
-                <span class="text">{step.text}</span>
-                {#if step?.substeps}
-                    <ul class="steps-sub">
-                        {#each step.substeps as subStep, index}
-                            <svelte:self
-                                isSub={true}
-                                step={subStep}
-                                current={currentSub === index}
-                                completed={index < currentSub} />
-                        {/each}
-                    </ul>
+    <button
+        type="button"
+        on:click|preventDefault
+        disabled={!completed}
+        style={`cursor: ${completed ? 'pointer' : 'default'};`}>
+        {#if isSub}
+            <span class="text">{step.text}</span>
+        {:else}
+            <div class="steps-item-wrapper">
+                {#if completed}
+                    <div class="bullet is-done">
+                        <span class="icon-check" aria-hidden="true" />
+                    </div>
+                {:else}
+                    <div class="bullet" class:is-current={current} />
                 {/if}
+                <div class="steps-item-content">
+                    <span class="text">{step.text}</span>
+                    {#if step?.substeps}
+                        <ul class="steps-sub">
+                            {#each step.substeps as subStep, index}
+                                <svelte:self
+                                    isSub={true}
+                                    step={subStep}
+                                    current={currentSub === index}
+                                    completed={index < currentSub} />
+                            {/each}
+                        </ul>
+                    {/if}
+                </div>
             </div>
-        </div>
-    {/if}
+        {/if}
+    </button>
 </li>