Merge pull request #81 from appwrite/chore-upgrade-svelte

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

Author: TorstenDittmann

package-lock.json

@@ -27,34 +27,34 @@
         "web-vitals": "^3.0.3"
     },
     "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": [

package.json

@@ -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/copy.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/dropListLink.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|self={clickOnEnter}
+        transition:fade={transitionFade}>
         <section
             class:is-small={size === 'small'}
             class:is-big={size === 'big'}

src/lib/components/modal.svelte

@@ -15,6 +15,10 @@
     export let groups: Writable<Map<string, Permission>>;
 
     const dispatch = createEventDispatcher();
+
+    $: if (showUser || showTeam || showCustom) {
+        showDropdown = false;
+    }
 </script>
 
 <DropList

src/lib/components/permissions/actions.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|self={clickOnEnter}
     class:steps-item={!isSub}
     class:steps-sub-item={isSub}
     style={`cursor: ${completed ? 'pointer' : 'default'};`}

src/lib/components/step.svelte

@@ -0,0 +1,10 @@
+export function clickOnEnter(
+    event: KeyboardEvent & {
+        currentTarget: EventTarget & HTMLElement;
+    }
+) {
+    if (event.key === 'Enter' && event.currentTarget.contains(event.target as Node)) {
+        event.preventDefault();
+        event.currentTarget.click();
+    }
+}

src/lib/helpers/a11y.ts

@@ -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|self={clickOnEnter}>
                         <input
                             type="number"
                             name="limit"

src/routes/console/project-[project]/authentication/security/+page.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>