From a4c6e583cbb203e2fca6aec70d205faa6cd634df Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 14 Oct 2022 18:32:49 +0200
Subject: [PATCH] a11y: trigger click when pressing enter on non-interactive
 elements

---
 src/lib/components/copy.svelte                            | 2 ++
 src/lib/components/dropListLink.svelte                    | 4 +++-
 src/lib/components/modal.svelte                           | 8 +++++++-
 src/lib/components/step.svelte                            | 3 +++
 src/lib/helpers/a11y.ts                                   | 5 +++++
 .../authentication/security/+page.svelte                  | 4 +++-
 .../functions/function/[function]/_create.svelte          | 3 +++
 7 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/helpers/a11y.ts

diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 7a70122c0..37cbfa029 100644
--- a/src/lib/components/copy.svelte
+++ b/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,
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index cfd60e79a..738a51134 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/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}
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 0d3eb143c..32aa1e9ed 100644
--- a/src/lib/components/modal.svelte
+++ b/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'}
diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte
index 7d2c5dffd..7c67654c2 100644
--- a/src/lib/components/step.svelte
+++ b/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'};`}
diff --git a/src/lib/helpers/a11y.ts b/src/lib/helpers/a11y.ts
new file mode 100644
index 000000000..be023b37c
--- /dev/null
+++ b/src/lib/helpers/a11y.ts
@@ -0,0 +1,5 @@
+export function clickOnEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+        (event.currentTarget as HTMLElement).click();
+    }
+}
diff --git a/src/routes/console/project-[project]/authentication/security/+page.svelte b/src/routes/console/project-[project]/authentication/security/+page.svelte
index 815537bd9..b7214fe74 100644
--- a/src/routes/console/project-[project]/authentication/security/+page.svelte
+++ b/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"
diff --git a/src/routes/console/project-[project]/functions/function/[function]/_create.svelte b/src/routes/console/project-[project]/functions/function/[function]/_create.svelte
index 27a7459de..a0dfd86f5 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/_create.svelte
+++ b/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>