feat!: Migrate Back button to Svelte 5 (#631)

# Motivation

Migrating component Back button to Svelte 5.

# Changes

- Migrate events in `Back` component, using `stopPropagation` wrapper.
- Adapt the usage in `Header` component: it will need to dispatch the
old event `nnsBack`. We will remove it when we migrate it to Svelte 5.

# Screenshots

Current tests are sufficient.

Author: AntonioVentilii

src/lib/components/Back.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
   import IconBack from "$lib/icons/IconBack.svelte";
   import { i18n } from "$lib/stores/i18n";
-  import { createEventDispatcher } from "svelte";
+  import { stopPropagation } from "$lib/utils/event-modifiers.utils";
+  import type { OnEventCallback } from "$lib/types/event-modifiers";
 
-  const dispatch = createEventDispatcher();
+  interface Props {
+    onBack: OnEventCallback;
+  }
+
+  let { onBack }: Props = $props();
 </script>
 
 <button
   class="back icon-only"
   data-tid="back"
-  on:click|stopPropagation={() => dispatch("nnsBack")}
+  onclick={stopPropagation(onBack)}
   aria-label={$i18n.core.back}><IconBack /></button
 >
 

src/lib/components/Header.svelte

@@ -3,15 +3,22 @@
   import MenuButton from "$lib/components/MenuButton.svelte";
   import Back from "$lib/components/Back.svelte";
   import { layoutContentTopHidden } from "$lib/stores/layout.store";
+  import { createEventDispatcher } from "svelte";
 
   export let back = false;
+
+  const dispatch = createEventDispatcher();
+
+  const onBack = () => {
+    dispatch("nnsBack");
+  };
 </script>
 
 <header data-tid="header-component" class:hidden={$layoutContentTopHidden}>
   <Toolbar>
     <svelte:fragment slot="start">
       {#if back}
-        <Back on:nnsBack />
+        <Back {onBack} />
       {:else}
         <MenuButton />
       {/if}

src/tests/lib/components/Back.spec.ts

@@ -6,8 +6,8 @@ describe("Back", () => {
   it("should forward the click event", () =>
     new Promise<void>((done) => {
       const { getByTestId } = render(Back, {
-        events: {
-          nnsBack: () => done(),
+        props: {
+          onBack: done,
         },
       });