Migrate to Svelte 5 + ARIA compatibility

frontend/package.json

@@ -1,19 +1,18 @@
 {
-  "name": "frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.1",
-    "svelte": "^3.49.0",
-    "vite": "^3.0.7"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0"
-  }
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"svelte": "^5"
+	},
+	"dependencies": {
+		"@fortawesome/fontawesome-free": "^6.6.0"
+	}
 }

frontend/src/App.svelte

@@ -9,13 +9,13 @@ import Link from "./components/Link.svelte";
 
 import "@fortawesome/fontawesome-free/css/all.min.css";
 
-let url = "";
-let videoResult;
-let loading = false;
+let url = $state("");
+let videoResult = $state();
+let loading = $state(false);
 
-let showModal = false;
+let showModal = $state(false);
 
-let visibleToasts = [];
+let visibleToasts = $state([]);
 
 // Function to open the modal
 function openModal() {
@@ -171,10 +171,10 @@ const handleClose = (id) => {
     <h1 class="title"><span>Youtube Downloader</span></h1>
 
     <div class="main-box">
-        <form class="input-box" id="input" on:submit={handleSubmit}>
+        <form class="input-box" id="input" onsubmit={handleSubmit}>
             <i class="mag fa-solid fa-magnifying-glass"></i>
             <input autocomplete="off" bind:value={url} class="input" id="name" type="text" placeholder="Enter your URL here..."/>
-            <button class="btn" type="submit" disabled={loading}>
+            <button class="btn" type="submit" disabled={loading} aria-label="Submit">
                 <i class="btn-icon fa-solid fa-chevron-right"></i>
             </button>
         </form>

frontend/src/components/ExpandableToast.svelte

@@ -1,11 +1,9 @@
 
 <script>
-export let message = "";
-export let detail = "";
-export let onClose;
-export let id; // Add id to track each toast
+/** @type {{message?: string, detail?: string, onClose: any, id: any}} */
+let { message = "", detail = "", onClose, id } = $props();
 
-let isOpen = false;
+let isOpen = $state(false);
 
 function toggle() {
 	isOpen = !isOpen;
@@ -61,10 +59,10 @@ setTimeout(() => {
 
 
 <div class="toast">
-    <button class="close-button" on:click={() => onClose(id)}>✖</button>
+    <button class="close-button" onclick={() => onClose(id)}>✖</button>
     <div>{message}</div>
     <div class={`detail ${isOpen ? 'open' : ''}`}>
         {detail}
     </div>
-    <button class="collapse-button" on:click={toggle}>{isOpen ? 'Collapse' : 'Expand'}</button>
+    <button class="collapse-button" onclick={toggle}>{isOpen ? 'Collapse' : 'Expand'}</button>
 </div>

frontend/src/components/Link.svelte

@@ -1,10 +1,16 @@
 <script>
 import { OpenBrowser } from "../../wailsjs/go/controllers/App.js";
 import { onAccesibilityKeydown } from "../utils/accessibility.js";
-export let href;
-export let ref;
+/** @type {{href: any, ref: any, children?: import('svelte').Snippet}} */
+let { href, ref, children } = $props();
 </script>
 
-<span data-ref={ref} on:keydown={onAccesibilityKeydown} on:click={() => OpenBrowser(href)}>
-    <slot></slot>
+
+<span 
+    data-ref={ref} 
+    onkeydown={onAccesibilityKeydown} 
+    onclick={(event) => { event.preventDefault(); OpenBrowser(href); }} 
+    role="button" 
+    tabindex="0">
+    {@render children?.()}
 </span>

frontend/src/components/ThemeSwitcher.svelte

@@ -3,7 +3,7 @@ import { onMount } from "svelte";
 import { onAccesibilityKeydown } from "../utils/accessibility.js";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 
-let isDarkMode;
+let isDarkMode = $state();
 
 function setTheme(theme) {
 	document.querySelector("html").setAttribute("data-theme", theme);
@@ -37,6 +37,8 @@ function toggleTheme() {
 
 <style>
     .switcher {
+        border: 0;
+        background-color: transparent;
         position: fixed;
         top: 1rem;
         right: 1rem;
@@ -56,10 +58,10 @@ function toggleTheme() {
     }
 </style>
 
-<div class="switcher" on:click={toggleTheme} on:keydown={onAccesibilityKeydown}>
+<button class="switcher" onclick={toggleTheme} onkeydown={onAccesibilityKeydown}>
     {#if isDarkMode}
         <i class="fas fa-regular fa-moon"></i>
     {:else}
         <i class="fas fa-regular fa-sun"></i>
     {/if}
-</div>
+</button>

frontend/src/components/VideoModal.svelte

@@ -3,11 +3,11 @@ import { onAccesibilityKeydown } from "../utils/accessibility.js";
 import { DownloadVideo } from "../../wailsjs/go/controllers/App.js";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 
-export let onClose;
-export let videoInfo;
+/** @type {{onClose: any, videoInfo: any}} */
+let { onClose, videoInfo } = $props();
 
-let selectedOption;
-let currentTab = "video"; // Default tab is video
+let selectedOption = $state();
+let currentTab = $state("video"); // Default tab is video
 
 function onDownloadButtonClick() {
 	if (selectedOption) {
@@ -47,7 +47,8 @@ const audioOptions = audioExtOptions.map((ext) => ({
 }));
 
 // Switch between video and audio tab and reset the selected option
-function switchTab(tab) {
+function switchTab(event, tab) {
+	event.preventDefault();
 	currentTab = tab;
 	selectedOption = ""; // Reset the selected option when tab changes
 }
@@ -170,8 +171,14 @@ function switchTab(tab) {
     }
 </style>
 
-<div class="modal" on:click={onClose} on:keydown={onAccesibilityKeydown}>
-    <div class="modal-content" on:click|stopPropagation on:keydown={onAccesibilityKeydown}>
+<div
+    class="modal"
+    role="button"
+    tabindex="0"
+    onclick={onClose}
+    onkeydown={onAccesibilityKeydown}
+>
+    <div class="modal-content">
         <h2>{videoInfo.title}</h2>
         <div class="video-desc">
             <p><i class="fa-regular fa-user"></i> {videoInfo.uploader}</p>
@@ -182,12 +189,12 @@ function switchTab(tab) {
 
         <!-- Tab Bar -->
         <div class="tab-bar">
-            <div class="tab {currentTab === 'video' ? 'active' : ''}" on:keydown={onAccesibilityKeydown} on:click={() => switchTab('video')}>
+            <button class="tab {currentTab === 'video' ? 'active' : ''}" onkeydown={onAccesibilityKeydown} onclick={(e) => switchTab(e, 'video')}>
                 Video
-            </div>
-            <div class="tab {currentTab === 'audio' ? 'active' : ''}" on:keydown={onAccesibilityKeydown} on:click={() => switchTab('audio')}>
+            </button>
+            <button class="tab {currentTab === 'audio' ? 'active' : ''}" onkeydown={onAccesibilityKeydown} onclick={(e) => switchTab(e, 'audio')}>
                 Audio
-            </div>
+            </button>
         </div>
 
         <!-- Content based on selected tab -->
@@ -216,8 +223,8 @@ function switchTab(tab) {
             </div>
 
         <div class="button-bar">
-            <button class="download-btn" on:click={onDownloadButtonClick}>Download</button>
-            <button class="close-btn" on:click={onClose}>Close</button>
+            <button class="download-btn" onclick={onDownloadButtonClick}>Download</button>
+            <button class="close-btn" onclick={onClose}>Close</button>
         </div>
     </div>
 </div>

frontend/src/main.js

@@ -1,7 +1,8 @@
 import './style.css'
 import App from './App.svelte'
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')
 })