web/updates: add alt text to navigation buttons

web/i18n/en/updates.json

@@ -0,0 +1,4 @@
+{
+    "button.next": "go to older changelog ({{ value }})",
+    "button.previous": "go to newer changelog ({{ value }})"
+}

web/src/lib/i18n/translations.ts

@@ -12,8 +12,8 @@ import languages from '$i18n/languages.json';
 const locFiles = import.meta.glob('$i18n/*/**/*.json');
 const parsedLocfiles: StructuredLocfileInfo = {};
 
-for (const [ path, loader ] of Object.entries(locFiles)) {
+for (const [path, loader] of Object.entries(locFiles)) {
-    const [,, lang, ...keyComponents ] = path.split('/');
+    const [, , lang, ...keyComponents] = path.split('/');
     const key = keyComponents.map(k => k.replace('.json', '')).join('.');
     parsedLocfiles[lang] = {
         ...parsedLocfiles[lang],
@@ -22,7 +22,9 @@ for (const [ path, loader ] of Object.entries(locFiles)) {
 }
 
 const defaultLocale = 'en';
-const config: Config = {
+const config: Config<{
+    value?: string;
+}> = {
     fallbackLocale: defaultLocale,
     translations: Object.keys(parsedLocfiles).reduce((obj, lang) => {
         return {
@@ -30,8 +32,8 @@ const config: Config = {
             [lang]: { languages }
         }
     }, {}),
-    loaders: Object.entries(parsedLocfiles).map(([ lang, keys ]) => {
+    loaders: Object.entries(parsedLocfiles).map(([lang, keys]) => {
-        return Object.entries(keys).map(([ key, importer ]) => {
+        return Object.entries(keys).map(([key, importer]) => {
             return {
                 locale: lang,
                 key,

web/src/routes/updates/+page.svelte

@@ -67,7 +67,7 @@
             wrapper.scrollTop += e.deltaY;
             e.preventDefault();
         }
-    }
+    };
 
     $: prev = versions[currentIndex - 1];
     $: next = versions[currentIndex + 1];
@@ -80,20 +80,16 @@
     </title>
 </svelte:head>
 
-<svelte:window
+<svelte:window on:keydown={handleKeydown} />
-    on:keydown={handleKeydown}
-/>
 
-<div
+<div class="news" tabindex="-1" data-focus-ring-hidden on:wheel={handleScroll}>
-    class="news"
-    tabindex="-1"
-    data-focus-ring-hidden
-    on:wheel={handleScroll}
->
     {#if changelog}
         <div id="left-button" class="button-wrapper-desktop">
             {#if prev}
-                <button on:click={loadPrev}>
+                <button
+                    on:click={loadPrev}
+                    aria-label={$t("updates.button.previous", { value: prev })}
+                >
                     <IconArrowLeft />
                     {prev || ""}
                 </button>
@@ -114,7 +110,10 @@
 
             <div class="button-wrapper-mobile" class:only-right={!prev}>
                 {#if prev}
-                    <button on:click={loadPrev}>
+                    <button
+                        on:click={loadPrev}
+                        aria-label={$t("updates.button.previous", { value: prev })}
+                    >
                         <IconArrowLeft />
                         {prev || ""}
                     </button>
@@ -124,6 +123,7 @@
                         on:click={loadNext}
                         on:focus={preloadNext}
                         on:mousemove={preloadNext}
+                        aria-label={$t("updates.button.next", { value: next })}
                     >
                         {next || ""}
                         <IconArrowRight />
@@ -137,6 +137,7 @@
                     on:click={loadNext}
                     on:focus={preloadNext}
                     on:mousemove={preloadNext}
+                    aria-label={$t("updates.button.next", { value: next })}
                 >
                     {next || ""}
                     <IconArrowRight />