chore: resolve lint errors and warnings

Signed-off-by: David Dal Busco <[email protected]>

.eslintrc.cjs

@@ -36,6 +36,7 @@ module.exports = {
 				caughtErrorsIgnorePattern: '^_'
 			}
 		],
-		'no-underscore-dangle': 'off'
+		'no-underscore-dangle': 'off',
+		'svelte/no-at-html-tags': 'off'
 	}
 };

src/frontend/src/lib/components/core/Busy.svelte

@@ -4,6 +4,7 @@
 	import { busy } from '$lib/stores/busy.store';
 	import Spinner from '$lib/components/ui/Spinner.svelte';
 	import { isNullish, nonNullish } from '$lib/utils/utils';
+	import { handleKeyPress } from '$lib/utils/keyboard.utils';
 
 	const close = () => {
 		if (isNullish($busy) || !$busy.close) {
@@ -15,7 +16,15 @@
 </script>
 
 {#if nonNullish($busy)}
-	<div transition:fade on:click={close} class:close={$busy.close}>
+	<div
+		role="button"
+		tabindex="-1"
+		aria-label={$i18n.core.close}
+		transition:fade
+		on:click={close}
+		class:close={$busy.close}
+		on:keypress={($event) => handleKeyPress({ $event, callback: close })}
+	>
 		<div class="content">
 			{#if $busy.spinner}
 				<div class="spinner">

src/frontend/src/lib/components/docs/DocForm.svelte

@@ -5,7 +5,6 @@
 	import { busy } from '$lib/stores/busy.store';
 	import { toasts } from '$lib/stores/toasts.store';
 	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
-	import type { Principal } from '@dfinity/principal';
 	import { createEventDispatcher, getContext } from 'svelte';
 	import { isNullish } from '$lib/utils/utils';
 	import { i18n } from '$lib/stores/i18n.store';
@@ -22,12 +21,10 @@
 
 	let action: DataStoreAction | undefined;
 	$: action = $docsStore?.action;
+
 	let collection: string | undefined;
 	$: collection = $store.rule?.[0];
 
-	let satelliteId: Principal;
-	$: satelliteId = $store.satelliteId;
-
 	let key: string | undefined;
 	$: key = $docsStore?.key;
 
@@ -109,7 +106,7 @@
 		<form on:submit|preventDefault={onSubmit}>
 			<div>
 				<div>
-					<label>{$i18n.document.field_doc_id_label}</label>
+					<label for="doc-id">{$i18n.document.field_doc_id_label}</label>
 					<div class="form-doc-id">
 						<input
 							id="doc-id"

src/frontend/src/lib/components/docs/DocFormField.svelte

@@ -12,7 +12,7 @@
 
 <div class="form-field">
 	<div class="form-field-item">
-		<label>{$i18n.document.field_name_label}</label>
+		<label for="field_name">{$i18n.document.field_name_label}</label>
 		<input
 			id="field_name"
 			type="text"
@@ -22,7 +22,7 @@
 		/>
 	</div>
 	<div class="form-field-item">
-		<label>{$i18n.document.field_type_label}</label>
+		<label for="field_type">{$i18n.document.field_type_label}</label>
 		<select id="field_type" name="field_type" bind:value={fieldType}>
 			<option value={DocFieldTypeEnum.BOOLEAN}>{$i18n.document.field_type_boolean}</option>
 			<option value={DocFieldTypeEnum.STRING}>{$i18n.document.field_type_string}</option>
@@ -31,7 +31,7 @@
 	</div>
 	<div class="form-field-item">
 		<div>
-			<label>{$i18n.document.field_value_label}</label>
+			<label for="value">{$i18n.document.field_value_label}</label>
 			<div class="value-input-wrapper">
 				{#if fieldType === DocFieldTypeEnum.NUMBER || fieldType === DocFieldTypeEnum.STRING}
 					<input

src/frontend/src/lib/components/modals/OrbiterTopUpModal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { missionControlStore } from '$lib/stores/mission-control.store';
 	import { nonNullish } from '$lib/utils/utils';
 	import CanisterTopUpModal from '$lib/components/modals/CanisterTopUpModal.svelte';
 	import { i18nFormat } from '$lib/utils/i18n.utils';

src/frontend/src/lib/components/ui/Json.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { isHash, stringifyJson, isPrincipal } from '$lib/utils/json.utils';
 	import { i18n } from '$lib/stores/i18n.store';
+	import { handleKeyPress } from '$lib/utils/keyboard.utils';
 
 	export let json: unknown | undefined = undefined;
 	export let defaultExpandedLevel = Infinity;
@@ -74,6 +75,7 @@
 			role="button"
 			aria-label={$i18n.core.toggle}
 			tabindex="0"
+			on:keypress={($event) => handleKeyPress({ $event, callback: toggle })}
 			on:click|stopPropagation={toggle}
 			>{keyLabel}
 			<span class="bracket">{openBracket} ... {closeBracket}</span>
@@ -90,6 +92,7 @@
 			role="button"
 			aria-label={$i18n.core.toggle}
 			tabindex="0"
+			on:keypress={($event) => handleKeyPress({ $event, callback: toggle })}
 			on:click|stopPropagation={toggle}
 			>{keyLabel}<span class="bracket open">{openBracket}</span></span
 		>

src/frontend/src/lib/components/ui/Menu.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { layoutMenuOpen } from '$lib/stores/layout.store';
 	import Logo from '$lib/components/presentation/Logo.svelte';
+	import { handleKeyPress } from '$lib/utils/keyboard.utils';
+
+	const close = () => layoutMenuOpen.set(false);
 </script>
 
 <div role="menu">
 	<div
 		class="inner"
 		data-tid="menu-inner"
 		class:open={$layoutMenuOpen}
-		on:click={() => layoutMenuOpen.set(false)}
+		on:keypress={($event) => handleKeyPress({ $event, callback: close })}
+		on:click={close}
+		role="button"
+		tabindex="-1"
 	>
 		<div class="logo">
 			<Logo color="white" />

src/frontend/src/lib/components/ui/Modal.svelte

@@ -5,6 +5,7 @@
 	import IconClose from '$lib/components/icons/IconClose.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { isBusy } from '$lib/stores/busy.store';
+	import { handleKeyPress } from '$lib/utils/keyboard.utils';
 
 	let visible = true;
 
@@ -32,7 +33,13 @@
 		aria-describedby="modalContent"
 		on:introend
 	>
-		<div class="backdrop" on:click|stopPropagation={close} />
+		<div
+			class="backdrop"
+			on:click|stopPropagation={close}
+			on:keypress={($event) => handleKeyPress({ $event, callback: close })}
+			role="button"
+			tabindex="-1"
+		/>
 		<div
 			transition:scale={{ delay: 25, duration: 150, easing: quintOut }}
 			class="wrapper"

src/frontend/src/lib/components/ui/Popover.svelte

@@ -3,6 +3,7 @@
 	import { quintOut } from 'svelte/easing';
 	import { i18n } from '$lib/stores/i18n.store';
 	import IconClose from '$lib/components/icons/IconClose.svelte';
+	import { handleKeyPress } from '$lib/utils/keyboard.utils';
 
 	export let anchor: HTMLElement | undefined = undefined;
 	export let visible = false;
@@ -41,10 +42,15 @@
 				? `--popover-right: ${innerWidth - right}px;`
 				: `--popover-left: ${left}px;`
 		}`}
-		on:click|stopPropagation
 		on:introend
 	>
-		<div class="backdrop" on:click|stopPropagation={() => (visible = false)} />
+		<div
+			class="backdrop"
+			on:click|stopPropagation={close}
+			on:keypress={($event) => handleKeyPress({ $event, callback: close })}
+			role="button"
+			tabindex="-1"
+		/>
 		<div
 			transition:scale={{ delay: 25, duration: 150, easing: quintOut }}
 			class="wrapper"

src/frontend/src/lib/constants/wallet.constants.ts

@@ -3,5 +3,7 @@ export const MEMO_CANISTER_CREATE = BigInt(0x41455243); // == 'CREA'
 /// At least for topup, it has to be exactly the memo used by the IC
 export const MEMO_CANISTER_TOP_UP = BigInt(0x50555054); // == 'TPUP'
 
+// eslint-disable-next-line @typescript-eslint/no-loss-of-precision
 export const MEMO_SATELLITE_CREATE_REFUND = BigInt(0x44464552544153); // == 'SATREFD'
+// eslint-disable-next-line @typescript-eslint/no-loss-of-precision
 export const MEMO_ORBITER_CREATE_REFUND = BigInt(0x4446455242524f); // == 'ORBREFD'

src/frontend/src/lib/utils/keyboard.utils.ts

@@ -0,0 +1,13 @@
+export const handleKeyPress = ({
+	$event: { code },
+	callback
+}: {
+	$event: KeyboardEvent;
+	callback: () => void;
+}) => {
+	if (!['Enter', 'Space'].includes(code)) {
+		return;
+	}
+
+	callback();
+};