a11y: trigger click when pressing enter on non-interactive elements

src/lib/components/copy.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
+    import { clickOnEnter } from '$lib/helpers/a11y';
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
@@ -21,6 +22,7 @@
 
 <span
     on:click|preventDefault={copy}
+    on:keyup={clickOnEnter}
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
     use:tooltip={{
         content,

src/lib/components/dropListLink.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
     export let href: string;
     export let icon: string = null;
 </script>
 
-<li class="drop-list-item" on:click>
+<li class="drop-list-item" on:click on:keyup={clickOnEnter}>
     <a {href} class="drop-button">
         <span class="text"><slot /></span>
         {#if icon}

src/lib/components/modal.svelte

@@ -3,6 +3,7 @@
     import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
     import { Alert } from '$lib/components';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
@@ -58,7 +59,12 @@
 <svelte:window on:keydown={handleKeydown} />
 
 {#if show}
-    <div class="modal-curtain" data-curtain on:click={handleBLur} transition:fade={transitionFade}>
+    <div
+        class="modal-curtain"
+        data-curtain
+        on:click={handleBLur}
+        on:keyup={clickOnEnter}
+        transition:fade={transitionFade}>
         <section
             class:is-small={size === 'small'}
             class:is-big={size === 'big'}

src/lib/components/step.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
     export let completed = false;
     export let current = false;
     export let currentSub = 0;
@@ -10,6 +12,7 @@
 
 <li
     on:click|preventDefault
+    on:keyup={clickOnEnter}
     class:steps-item={!isSub}
     class:steps-sub-item={isSub}
     style={`cursor: ${completed ? 'pointer' : 'default'};`}

src/lib/helpers/a11y.ts

@@ -0,0 +1,5 @@
+export function clickOnEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+        (event.currentTarget as HTMLElement).click();
+    }
+}

src/routes/console/project-[project]/authentication/security/+page.svelte

@@ -6,6 +6,7 @@
     import { project } from '../../store';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     const projectId = $project.$id;
     let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
@@ -113,7 +114,8 @@
                     </div>
                     <div
                         class="input-text-wrapper u-stretch"
-                        on:click={() => (isLimited = 'limited')}>
+                        on:click={() => (isLimited = 'limited')}
+                        on:keyup={clickOnEnter}>
                         <input
                             type="number"
                             name="limit"

src/routes/console/project-[project]/functions/function/[function]/_create.svelte

@@ -5,6 +5,7 @@
     import { createEventDispatcher } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let showCreate = false;
 
@@ -39,6 +40,7 @@
                 <span
                     class="tabs-button"
                     on:click={() => (showCli = true)}
+                    on:keyup={clickOnEnter}
                     class:is-selected={showCli}>
                     <span class="text">Files</span>
                 </span>
@@ -47,6 +49,7 @@
                 <span
                     class="tabs-button"
                     on:click={() => (showCli = false)}
+                    on:keyup={clickOnEnter}
                     class:is-selected={!showCli}>
                     <span class="text">Usage</span>
                 </span>