Skip to content

Commit 5bc2eee

Browse files
ashryanbeatsashryanbeats
authored
Merge pull request #19 from kyoto-tech/a11y
a11y updates
2 parents 7931cfb + 8c29dea commit 5bc2eee

File tree

7 files changed

+149
-70
lines changed

7 files changed

+149
-70
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"astro": "astro",
77
"astrocheck": "astro check",
88
"build": "astro build",
9-
"check": "npm run lint && npm run tsc && npm run astrocheck && npm run knip",
9+
"check": "npm run lint; npm run tsc; npm run astrocheck; npm run knip",
1010
"dev": "astro dev",
1111
"knip": "knip",
1212
"lint": "eslint \"**/*.{js,mjs,ts,tsx,astro}\" --ignore-pattern tmp/** --ignore-pattern scripts/** --ignore-pattern dist/** --no-warn-ignored",

‎src/components/LanguagePicker.astro‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,41 @@ import { languages } from '../i18n/ui';
33
import { getRelativeLocaleUrl } from 'astro:i18n';
44
55
const langsToFlags = {
6-
en: 'GB.svg',
7-
ja: 'JP.svg',
6+
en: "GB.svg",
7+
ja: "JP.svg"
88
};
99
1010
const activeLang = Astro.currentLocale;
11-
const visibleLangs = Object.entries(languages).filter(([lang]) => lang !== activeLang);
11+
const allLangs = Object.entries(languages);
1212
1313
---
1414
<ul class="absolute top-4 right-4 md:top-6 md:right-6 z-20 flex gap-2">
15-
{visibleLangs.map(([lang, label]) => (
16-
<li>
17-
<a
18-
href={getRelativeLocaleUrl(lang, "/")}
19-
class="block p-2 md:p-3 rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors shadow-lg ring-1 ring-white/30"
20-
title={label}
21-
>
22-
<img src={`/flags/${langsToFlags[lang]}`} alt={label} width="24" height="16" class="w-6 h-4 md:w-8 md:h-5" />
23-
</a>
24-
</li>
25-
))}
26-
</ul>
15+
{allLangs.map(([lang, label]) => {
16+
const isActive = lang === activeLang;
17+
18+
return (
19+
<li>
20+
<a
21+
href={getRelativeLocaleUrl(lang, "/")}
22+
class="flex min-h-11 min-w-[3rem] items-center gap-2 rounded-lg bg-white/20 px-3 py-2 md:px-3.5 md:py-2.5 backdrop-blur-sm hover:bg-white/30 transition-colors shadow-lg ring-1 ring-white/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
23+
title={label}
24+
aria-label={`Switch language to ${label}`}
25+
aria-current={isActive ? "true" : undefined}
26+
>
27+
<span class="sr-only">{label}</span>
28+
<img
29+
src={`/flags/${langsToFlags[lang]}`}
30+
alt=""
31+
aria-hidden="true"
32+
width="24"
33+
height="16"
34+
class="w-6 h-4 md:w-8 md:h-5"
35+
/>
36+
<span class="text-xs font-semibold uppercase tracking-wide text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.35)]">
37+
{lang === "ja" ? "日本語" : "EN"}
38+
</span>
39+
</a>
40+
</li>
41+
);
42+
})}
43+
</ul>

‎src/i18n/ui.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export const defaultLang = "en";
77

88
export const ui = {
99
en: {
10+
"a11y.skipToMain": "Skip to main content",
11+
1012
"home.header.tagline": "Kyoto Tech Meetup",
1113
"home.header.title": "Connect, learn, and build together in Japan's cultural heart",
1214
"home.header.subtitle": "Gatherings for developers, designers, researchers, and founders exploring technology in Kyoto.",
@@ -54,11 +56,14 @@ export const ui = {
5456
"home.locations.description2": "Exact time and place are in each event invite and reminder email.",
5557

5658
"home.footer.copyright": "Kyoto Tech Meetup. Crafted by volunteers in Kyoto.",
59+
"home.footer.socialNavLabel": "Social links",
5760
"home.footer.github": "GitHub",
5861
"home.footer.discord": "Discord",
5962
"home.footer.meetup": "Meetup",
6063
},
6164
ja: {
65+
"a11y.skipToMain": "メインコンテンツへスキップ",
66+
6267
"home.header.tagline": "Kyoto Tech Meetup",
6368
"home.header.title": "日本の文化都市・京都でつながり、学び、ものづくりをしよう",
6469
"home.header.subtitle": "京都でテクノロジーを探求するデベロッパー、デザイナー、研究者、創業者のための集まりです。",
@@ -107,8 +112,9 @@ export const ui = {
107112
"home.locations.description2": "具体的な場所と時間は、各イベントの案内メールやリマインダーでお知らせします。",
108113

109114
"home.footer.copyright": "Kyoto Tech Meetup — 京都在住のボランティアによるコミュニティ運営。",
115+
"home.footer.socialNavLabel": "ソーシャルリンク",
110116
"home.footer.github": "GitHub",
111117
"home.footer.discord": "Discord",
112118
"home.footer.meetup": "Meetup"
113119
},
114-
} as const;
120+
} as const;

‎src/layouts/Layout.astro‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
---
22
import "../styles/global.css";
3-
const activeLang = Astro.currentLocale;
3+
import { useTranslations } from "../i18n/utils";
4+
5+
const activeLang = Astro.currentLocale as keyof typeof import("../i18n/ui").ui;
6+
const t = useTranslations(activeLang);
47
---
58

69
<!doctype html>
7-
<html lang={activeLang}>
8-
<head>
9-
<meta charset="UTF-8" />
10-
<meta name="viewport" content="width=device-width" />
11-
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
10+
<html lang={activeLang}>
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
1215
<meta name="generator" content={Astro.generator} />
1316
<meta
1417
name="description"
@@ -35,8 +38,9 @@ const activeLang = Astro.currentLocale;
3538
<meta name="twitter:image" content="https://kyoto-tech.github.io/og/kyoto-tech-meetup.png" />
3639
<meta name="twitter:image:alt" content="Community meetup in Kyoto for builders and technologists" />
3740
<title>Kyoto Tech Meetup</title>
38-
</head>
39-
<body>
40-
<slot />
41-
</body>
42-
</html>
41+
</head>
42+
<body>
43+
<a class="skip-link" href="#main-content">{t("a11y.skipToMain")}</a>
44+
<slot />
45+
</body>
46+
</html>

‎src/pages/index.astro‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const activities: Activity[] = [
117117
<LanguagePicker />
118118
</header>
119119

120-
<main class="space-y-0">
120+
<main id="main-content" class="space-y-0">
121121
<section id="why-join" class="bg-white/95 px-6 py-16 md:px-12">
122122
<div class="mx-auto max-w-5xl">
123123
<p class="text-sm font-semibold uppercase tracking-[0.3em] text-slate-500">{t("home.whyJoin.label")}</p>
@@ -182,41 +182,43 @@ const activities: Activity[] = [
182182
</section>
183183
</main>
184184

185-
<footer class="bg-stone-950 px-6 py-12 text-slate-100 md:px-12">
186-
<div class="mx-auto flex max-w-5xl flex-col gap-6 md:flex-row md:items-center md:justify-between">
187-
<p class="text-sm text-slate-300">© {new Date().getFullYear()} {t("home.footer.copyright")}</p>
188-
<ul class="flex flex-wrap gap-4 text-sm font-medium text-slate-200">
189-
<li>
190-
<a
191-
class="flex items-center gap-2 transition hover:text-white"
192-
href="https://github.com/kyoto-tech"
193-
target="_blank"
194-
rel="noreferrer"
195-
>
196-
<FaGithub className="text-lg" /> {t("home.footer.github")}
197-
</a>
198-
</li>
199-
<li>
200-
<a
201-
class="flex items-center gap-2 transition hover:text-white"
202-
href="https://discord.gg/mXFWEHDKeu"
203-
target="_blank"
204-
rel="noreferrer"
205-
>
206-
<FaDiscord className="text-lg" /> {t("home.footer.discord")}
207-
</a>
208-
</li>
209-
<li>
210-
<a
211-
class="flex items-center gap-2 transition hover:text-white"
212-
href={meetupUrl}
213-
target="_blank"
214-
rel="noreferrer"
215-
>
216-
<FaMeetup className="text-lg" /> {t("home.footer.meetup")}
217-
</a>
218-
</li>
219-
</ul>
220-
</div>
221-
</footer>
222-
</Layout>
185+
<footer class="bg-stone-950 px-6 py-12 text-slate-100 md:px-12">
186+
<div class="mx-auto flex max-w-5xl flex-col gap-6 md:flex-row md:items-center md:justify-between">
187+
<p class="text-sm text-slate-300">© {new Date().getFullYear()} {t("home.footer.copyright")}</p>
188+
<nav aria-label={t("home.footer.socialNavLabel")}>
189+
<ul class="flex flex-wrap gap-4 text-sm font-medium text-slate-200">
190+
<li>
191+
<a
192+
class="flex items-center gap-2 transition hover:text-white"
193+
href="https://github.com/kyoto-tech"
194+
target="_blank"
195+
rel="noreferrer"
196+
>
197+
<FaGithub className="text-lg" /> {t("home.footer.github")}
198+
</a>
199+
</li>
200+
<li>
201+
<a
202+
class="flex items-center gap-2 transition hover:text-white"
203+
href="https://discord.gg/mXFWEHDKeu"
204+
target="_blank"
205+
rel="noreferrer"
206+
>
207+
<FaDiscord className="text-lg" /> {t("home.footer.discord")}
208+
</a>
209+
</li>
210+
<li>
211+
<a
212+
class="flex items-center gap-2 transition hover:text-white"
213+
href={meetupUrl}
214+
target="_blank"
215+
rel="noreferrer"
216+
>
217+
<FaMeetup className="text-lg" /> {t("home.footer.meetup")}
218+
</a>
219+
</li>
220+
</ul>
221+
</nav>
222+
</div>
223+
</footer>
224+
</Layout>

0 commit comments

Comments
 (0)