web/updates: add alt text to navigation buttons

This commit is contained in:
wukko 2024-07-29 14:32:15 +06:00
parent 8b866ddf6f
commit 5fc893a273
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 24 additions and 17 deletions

4
web/i18n/en/updates.json Normal file
View file

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

View file

@ -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)) {
const [,, lang, ...keyComponents ] = path.split('/');
for (const [path, loader] of Object.entries(locFiles)) {
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 ]) => {
return Object.entries(keys).map(([ key, importer ]) => {
loaders: Object.entries(parsedLocfiles).map(([lang, keys]) => {
return Object.entries(keys).map(([key, importer]) => {
return {
locale: lang,
key,

View file

@ -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
on:keydown={handleKeydown}
/>
<svelte:window on:keydown={handleKeydown} />
<div
class="news"
tabindex="-1"
data-focus-ring-hidden
on:wheel={handleScroll}
>
<div 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 />