Fix some warnings

src/app.css

@@ -66,7 +66,15 @@ code {
     padding: 3px;
 }
 
-button, input {
+button {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-family: 'Barlow', sans-serif;
+}
+
+button:not(.link), input {
     border: 2px solid var(--color-primary);
     background: transparent;
     padding: 8px 16px;
@@ -75,7 +83,7 @@ button, input {
     cursor: pointer;
 }
 
-button.active, input.active {
+button:not(.link).active, input.active {
     background: var(--color-primary);
     color: white;
 }

src/lib/AssetBox.svelte

@@ -39,10 +39,6 @@
         margin-left: 16px;
         flex-shrink: 0;
     }
-    
-    .asset-photo a {
-        display: block;
-    }
 
     .asset-img {
         margin-left: 32px;

src/lib/BlogBox.svelte

@@ -4,7 +4,6 @@
 </script>
 
 <div class="blog-box">
-    <!-- TODO this should probably be h3 -->
     <h3>
         <a href="{href}">
             {title}

src/lib/BurgerButton.svelte

@@ -43,8 +43,12 @@
     }
 </style>
 
-<button class:open onclick={() => open = !open}
-    style="transition: color {duration}s ease-in-out; color: {open ? 'var(--color-bg)' : 'var(--color-primary)'};">
+<button
+    class:open
+    onclick={() => open = !open}
+    aria-label="{open ? 'close' : 'open'} menu"
+    style="transition: color {duration}s ease-in-out; color: {open ? 'var(--color-bg)' : 'var(--color-primary)'};"
+>
 	<svg width=32 height=32>
         <line id="top" x1=0 y1=9    x2=32 y2=9    style="transition: transform {duration}s ease-in-out, opacity {duration}s ease-in-out;"/>
 		<line id="mid" x1=0 y1=18.5 x2=32 y2=18.5 style="transition: transform {duration}s ease-in-out, opacity {duration}s ease-in-out;"/>

src/lib/Header.svelte

@@ -58,7 +58,7 @@
 					{#each menuItems as menuItem}
 						<li>
 							<a href="{menuItem.url}" onclick={() => burgerMenuOpen=false}>
-								<Loc cs="{menuItem.cs}" en="{menuItem.en}" />
+								<Loc cs={menuItem.cs} en={menuItem.en} />
 							</a>
 						</li>
 					{/each}
@@ -73,21 +73,24 @@
 				<!-- XXX this is a temporary hack -->
 				{#if menuItem.submenu}
 					<li>
-						<a
+						<button
+							class="link"
 							style="cursor: pointer;"
 							onclick={() => currentExpandedMenu = currentExpandedMenu?.url == menuItem.url ? null : menuItem}
+							onkeyup={() => currentExpandedMenu = currentExpandedMenu?.url == menuItem.url ? null : menuItem}
+							tabindex="0"
 						>
 							<Loc
 								cs="{menuItem.cs} &nbsp;{currentExpandedMenu == menuItem ? '▴' : '▾'}"
 								en="{menuItem.en} &nbsp;{currentExpandedMenu == menuItem ? '▴' : '▾'}"
 							/>
-						</a>
+						</button>
 						{#if currentExpandedMenu}
 							<ul class="dropdown" transition:slide>
 								{#each menuItem.submenu as subMenuItem}
 									<li>
 										<a href="{subMenuItem.url}" onclick={resetExpandedMenu}>
-											<Loc cs="{subMenuItem.cs}" en="{subMenuItem.en}" />
+											<Loc cs={subMenuItem.cs} en={subMenuItem.en} />
 										</a>
 									</li>
 								{/each}
@@ -97,7 +100,7 @@
 				{:else}
 					<li>
 						<a href="{menuItem.url}" onclick={resetExpandedMenu}>
-							<Loc cs="{menuItem.cs}" en="{menuItem.en}" />
+							<Loc cs={menuItem.cs} en={menuItem.en} />
 						</a>
 					</li>
 				{/if}
@@ -168,15 +171,21 @@
 		border-left: none;
 	}
 
-	a {
+	a, button {
 		color: inherit;
 		text-transform: uppercase;
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
+		border: none;
+		font-size: inherit;
+		padding: 0;
+		margin: 0;	
+		font-weight: normal;
+		font-family: 'Barlow', sans-serif;
 	}
 
-	a:hover {
+	a:hover, button:hover {
 		text-decoration: underline;
 	}
 

src/lib/InterviewAudio.svelte

@@ -6,14 +6,15 @@
 <script lang="ts">
     import IntersectionObserver from "svelte-intersection-observer";
 	import AudioPlayer from './AudioPlayer.svelte';
+	import type { InterviewData } from "$src/types";
     interface Props {
         data: InterviewData;
     }
 
     let { data }: Props = $props();
 
-    let element: HTMLElement = $state();
-    let intersecting: boolean = $state();
+    let element: HTMLElement | undefined = $state();
+    let intersecting: boolean | undefined = $state();
     let threshold: number = 1;
 </script>
 

src/lib/LanguageSwitcher.svelte

@@ -2,9 +2,9 @@
 	import { lang } from '../stores.js';
 	import { page } from '$app/stores';
 
-    let langValue: "en" | "cs" = $state();
+    let langValue: "en" | "cs" = $state("cs");
     lang.subscribe(value => {
-        langValue = value;
+        langValue = value as "en" | "cs";
     })
 
 	function setLangEn() {
@@ -20,9 +20,9 @@
     <!-- Currently only the homepage is localized -->
     {#if $page.url.pathname == '/'}
         {#if langValue == 'cs'}
-            <a onclick={setLangEn} onkeyup={setLangEn}>switch to english</a>
+            <button class="link" onclick={setLangEn} onkeyup={setLangEn}>switch to english</button>
         {:else}
-            <a onclick={setLangCs} onkeyup={setLangCs}>přepnout do češtiny</a>
+            <button class="link" onclick={setLangCs} onkeyup={setLangCs}>přepnout do češtiny</button>
         {/if}
     {/if}
 </div>
@@ -31,15 +31,17 @@
     div {
         margin-bottom: -12px;
     }
-	a {
+	button {
+        user-select: none;
 		color: inherit;
 		text-transform: uppercase;
 		text-decoration: none;
 		white-space: nowrap;
         cursor: pointer;
+        font-size: 90%;
 	}
 
-    a:hover {
+    button:hover {
         text-decoration: underline;
     }
 </style>

src/lib/Loc.svelte

@@ -7,9 +7,9 @@
 
     let { cs, en }: Props = $props();
 
-    let langValue: "en" | "cs" = $state();
+    let langValue: "en" | "cs" = $state("cs");
     lang.subscribe(value => {
-        langValue = value;
+        langValue = value as "en" | "cs";
     })
 </script>