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

package.json

@@ -27,34 +27,34 @@
         "web-vitals": "^2.1.4"
     },
     "devDependencies": {
-        "@playwright/test": "^1.26.1",
+        "@playwright/test": "^1.27.1",
         "@sveltejs/adapter-static": "1.0.0-next.44",
-        "@sveltejs/kit": "1.0.0-next.512",
-        "@sveltejs/vite-plugin-svelte": "^1.0.8",
-        "@testing-library/dom": "^8.18.1",
+        "@sveltejs/kit": "1.0.0-next.516",
+        "@sveltejs/vite-plugin-svelte": "^1.0.9",
+        "@testing-library/dom": "^8.19.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "3.1.3",
         "@testing-library/user-event": "^14.4.3",
         "@types/prismjs": "^1.26.0",
         "@types/gtag.js": "^0.0.12",
-        "@typescript-eslint/eslint-plugin": "^5.39.0",
-        "@typescript-eslint/parser": "^5.39.0",
-        "@vitest/ui": "^0.23.4",
-        "eslint": "^8.24.0",
+        "@typescript-eslint/eslint-plugin": "^5.40.0",
+        "@typescript-eslint/parser": "^5.40.0",
+        "@vitest/ui": "^0.24.3",
+        "eslint": "^8.25.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
-        "prettier-plugin-svelte": "^2.7.1",
+        "prettier-plugin-svelte": "^2.8.0",
         "sass": "^1.55.0",
-        "svelte": "^3.50.1",
-        "svelte-check": "^2.9.1",
+        "svelte": "^3.51.0",
+        "svelte-check": "^2.9.2",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4",
-        "vite": "^3.1.4",
-        "vitest": "^0.23.4"
+        "vite": "^3.1.8",
+        "vitest": "^0.24.3"
     },
     "type": "module",
     "pre-commit": [

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,10 @@
+export function clickOnEnter(
+    event: KeyboardEvent & {
+        currentTarget: HTMLElement;
+    }
+) {
+    if (event.key === 'Enter' && event.target === event.currentTarget) {
+        event.preventDefault();
+        event.currentTarget.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>

tests/unit/components/copy.test.ts

@@ -19,3 +19,20 @@ test('copy to clipboard function called on click', async () => {
 
     expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('This is a test');
 });
+
+test('copy to clipboard function called on enter', async () => {
+    const { getByTestId } = render(Copy, { value });
+
+    Object.assign(window.navigator, {
+        clipboard: {
+            writeText: vi.fn().mockImplementation(() => Promise.resolve())
+        }
+    });
+
+    const button = getByTestId('copy-content');
+    await fireEvent.keyUp(button, {
+        key: 'Enter'
+    });
+
+    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith('This is a test');
+});

tests/unit/components/modal.test.ts

@@ -29,7 +29,7 @@ test('close modal by click', async () => {
     expect(component.show).toStrictEqual(false);
 });
 
-test('close modal by key', async () => {
+test('close modal by escape', async () => {
     const { queryByText, component } = render(Modal, {
         show: true
     });
@@ -38,3 +38,16 @@ test('close modal by key', async () => {
     await userEvent.keyboard('[Escape]');
     expect(component.show).toStrictEqual(false);
 });
+
+test('close modal by enter key on focus', async () => {
+    const { container, queryByText, component } = render(Modal, {
+        show: true
+    });
+
+    expect(queryByText('Content')).toBeInTheDocument();
+    await userEvent.keyboard('[Escape]');
+    await fireEvent.keyUp(container.querySelector('[data-curtain]'), {
+        key: 'Enter'
+    });
+    expect(component.show).toStrictEqual(false);
+});