From c91c54261fadd4519db221aa3241fc9e052bc8be Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Sun, 6 Sep 2026 19:55:12 +0900
Subject: [PATCH] feat(site-kit): the footer's language row collapses into a
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Laid out flat, the row is as long as the product's language list: ten locales
for one product, fourteen for two, twenty for another. The same family footer
was carrying a different visual weight in each, and in the twenty-locale case it
was the heaviest thing on the page.

It is now a `<details>` triggered by the current language's own name. What that
keeps:

- every locale anchor stays in the document whether the menu is open or closed,
  so a crawler follows them all and the menu needs no JavaScript;
- the `<nav>` landmark and its label;
- `aria-current` on the reader's language, which is what the flat row used to
  mark;
- Escape closes and returns focus to the trigger, the same behaviour the
  header's flag menu has.

The trigger is the language's own name rather than a translated word for
"Language": it is the one label still meaningful to a reader who cannot read the
page they landed on. The list opens upward — the footer is at the foot of the
page — and takes the header menu's elevation token rather than its own shadow.
---
 .changeset/site-kit-footer-locale-menu.md     |  7 ++
 .../src/solid/__tests__/footer.test.tsx       | 51 ++++++++++++-
 packages/site-kit/src/solid/chrome.tsx        | 76 ++++++++++++++++---
 packages/site-kit/styles.css                  | 17 ++++-
 4 files changed, 132 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/site-kit-footer-locale-menu.md

diff --git a/.changeset/site-kit-footer-locale-menu.md b/.changeset/site-kit-footer-locale-menu.md
new file mode 100644
index 0000000..6b94ee6
--- /dev/null
+++ b/.changeset/site-kit-footer-locale-menu.md
@@ -0,0 +1,7 @@
+---
+"@devslab/site-kit": minor
+---
+
+`SiteFooter`'s language row collapses into a `<details>` menu triggered by the current language's own name. Every locale anchor stays in the document open or closed, so crawlers still follow them and it works without JavaScript; Escape closes it and returns focus to the trigger, as the header's flag menu does. The flat row was a different length in every product — ten locales in one, twenty in another — so the same footer carried a different visual weight depending on how many languages the product sells in.
+
+`SiteFooter`의 언어 행이 `<details>` 메뉴로 접힙니다. 트리거는 **현재 언어의 자기 이름**입니다(페이지를 못 읽는 사람도 알아보는 유일한 라벨). 열려 있든 접혀 있든 로케일 앵커는 전부 문서에 남아 크롤러가 따라가고 JS 없이 동작하며, Esc로 닫고 포커스가 트리거로 돌아옵니다(헤더 국기 메뉴와 동일). 평평한 행은 제품마다 길이가 달라(10개·14개·20개) 같은 푸터가 파는 언어 수에 따라 다른 무게를 지고 있었습니다.
diff --git a/packages/site-kit/src/solid/__tests__/footer.test.tsx b/packages/site-kit/src/solid/__tests__/footer.test.tsx
index 7df95db..bdb9312 100644
--- a/packages/site-kit/src/solid/__tests__/footer.test.tsx
+++ b/packages/site-kit/src/solid/__tests__/footer.test.tsx
@@ -78,7 +78,9 @@ it("lists every family language, marking the current one, and reports the pick",
     locale={{ locale: "ko", hrefForLocale: (code: string) => `/${code}` }}
     onLocaleSelect={(code) => picked.push(code)}
   />);
-  const links = [...host.querySelectorAll<HTMLAnchorElement>(".site-footer__langs a")];
+  // Collapsed, but every anchor is in the document: a crawler follows them all
+  // and the menu works with no JavaScript.
+  const links = [...host.querySelectorAll<HTMLAnchorElement>(".site-footer__langs-list a")];
   expect(links).toHaveLength(FAMILY_LOCALES.LOCALES.length);
 
   const korean = links.find((a) => a.getAttribute("hreflang") === "ko")!;
@@ -102,7 +104,7 @@ it("honours a locale subset registry", () => {
     locale={{ locale: "en", hrefForLocale: (code: string) => `/${code}` }}
     localeRegistry={registry}
   />);
-  expect([...host.querySelectorAll(".site-footer__langs a")].map((a) => a.getAttribute("hreflang"))).toEqual(["ko", "en", "ja"]);
+  expect([...host.querySelectorAll(".site-footer__langs-list a")].map((a) => a.getAttribute("hreflang"))).toEqual(["ko", "en", "ja"]);
 });
 
 it("puts the family links after the brand, separated for sighted readers only", () => {
@@ -137,7 +139,8 @@ it("isolates the copyright so an RTL page does not reorder it, with or without a
 it("ships the rules the three rows need, so no consumer has to keep its own copy", () => {
   for (const rule of [
     ".site-footer__langs",
-    ".site-footer__langs a[aria-current=\"page\"]",
+    ".site-footer__langs-trigger",
+    ".site-footer__langs-list a[aria-current=\"page\"]",
     ".site-footer__row",
     ".site-footer__brand",
   ]) {
@@ -151,3 +154,45 @@ it("sizes the footer link row, so it does not inherit the body step", () => {
   // had added the rule locally.
   expect(STYLES).toMatch(/\.site-footer__links \{ font-size: var\(--dds-typo-body-2-font-size\); \}/);
 });
+
+it("collapses the language row behind the current language's own name", () => {
+  const { SiteFooter } = kit;
+  // The flat row was a different length in every product — ten locales in one,
+  // twenty in another — so the same footer carried a different weight depending
+  // on how many languages the product sells in.
+  const host = mount(() => <SiteFooter
+    {...base}
+    locale={{ locale: "ko", hrefForLocale: (code: string) => `/${code}` }}
+  />);
+  const details = host.querySelector<HTMLDetailsElement>(".site-footer__langs-menu")!;
+  expect(details.open).toBe(false);
+
+  const trigger = details.querySelector("summary")!;
+  // The reader who cannot read this page still recognises their own language's
+  // name, which is why the trigger is the name and not a translated "Language".
+  expect(trigger.textContent).toBe("한국어");
+  expect(trigger.getAttribute("aria-label")).toBe("Language: 한국어");
+
+  // The landmark survives the collapse.
+  const nav = host.querySelector(".site-footer__langs")!;
+  expect(nav.tagName).toBe("NAV");
+  expect(nav.getAttribute("aria-label")).toBe("Language");
+});
+
+it("closes on Escape and hands focus back to the trigger", () => {
+  const { SiteFooter } = kit;
+  const host = mount(() => <SiteFooter
+    {...base}
+    locale={{ locale: "en", hrefForLocale: (code: string) => `/${code}` }}
+  />);
+  const details = host.querySelector<HTMLDetailsElement>(".site-footer__langs-menu")!;
+  const trigger = details.querySelector<HTMLElement>("summary")!;
+  details.open = true;
+  details.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+  expect(details.open).toBe(false);
+  expect(document.activeElement).toBe(trigger);
+});
+
+it("opens the list upward, because the footer is at the foot of the page", () => {
+  expect(STYLES).toMatch(/\.site-footer__langs-list \{[^}]*inset-block-end/);
+});
diff --git a/packages/site-kit/src/solid/chrome.tsx b/packages/site-kit/src/solid/chrome.tsx
index b450cba..3c961d6 100644
--- a/packages/site-kit/src/solid/chrome.tsx
+++ b/packages/site-kit/src/solid/chrome.tsx
@@ -105,6 +105,64 @@ export function SiteHeader(props: SiteHeaderProps) {
   );
 }
 
+/**
+ * The footer's language row, collapsed.
+ *
+ * It used to be every language laid out flat, which is a different length in
+ * every product — ten for one, twenty for another — so the same footer carried
+ * a different visual weight depending on how many languages the product sells
+ * in. A `<details>` keeps all of them: the anchors are in the document whether
+ * it is open or not, so a crawler still follows every locale, and it works with
+ * no JavaScript. Same mechanism as the header's flag menu, including Escape
+ * returning focus to the trigger.
+ *
+ * The trigger is the current language's own name rather than a translated word
+ * for "language": it is the one label already meaningful to a reader who cannot
+ * read the page, and it is what the flat row marked with `aria-current`.
+ */
+function FooterLocaleMenu(props: {
+  state: LocaleState;
+  registry: LocaleRegistry<string>;
+  label: string;
+  /* Required key, optional value: the caller always passes it through, and
+     `exactOptionalPropertyTypes` rejects an explicit undefined on an optional. */
+  onSelect: ((locale: string) => void) | undefined;
+}) {
+  let details: HTMLDetailsElement | undefined;
+  let trigger: HTMLElement | undefined;
+  const current = () => props.registry.LOCALES.find((entry) => entry.code === props.state.locale);
+  const close = () => { if (details) details.open = false; };
+  const onKeyDown: JSX.EventHandler<HTMLDetailsElement, KeyboardEvent> = (event) => {
+    if (event.key !== "Escape" || !details?.open) return;
+    event.preventDefault();
+    close();
+    trigger?.focus();
+  };
+  return (
+    <nav class="site-footer__langs" aria-label={props.label}>
+      <details ref={details} class="site-footer__langs-menu" onKeyDown={onKeyDown}>
+        <summary ref={trigger} class="site-footer__langs-trigger" aria-label={`${props.label}: ${current()?.nativeName ?? props.state.locale}`}>
+          <span lang={current()?.code} dir={current()?.dir}>{current()?.nativeName ?? props.state.locale}</span>
+        </summary>
+        <ul class="site-footer__langs-list" role="list">
+          <For each={props.registry.LOCALES}>{(entry) => (
+            <li>
+              <a
+                href={props.state.hrefForLocale(entry.code as SiteLocale)}
+                hreflang={entry.code}
+                lang={entry.code}
+                dir={entry.dir}
+                aria-current={entry.code === props.state.locale ? "page" : undefined}
+                onClick={() => props.onSelect?.(entry.code)}
+              >{entry.nativeName}</a>
+            </li>
+          )}</For>
+        </ul>
+      </details>
+    </nav>
+  );
+}
+
 export interface SiteFooterProps {
   brand: SiteBrand;
   links: SiteLink[];
@@ -147,18 +205,12 @@ export function SiteFooter(props: SiteFooterProps) {
     <footer class="site-footer" aria-label={props.messages.footerLabel}>
       <div class="site-footer__inner">
         <Show when={props.locale}>{(locale) => (
-          <nav class="site-footer__langs" aria-label={props.messages.localeLabel}>
-            <For each={registry().LOCALES}>{(entry) => (
-              <a
-                href={locale().hrefForLocale(entry.code as SiteLocale)}
-                hreflang={entry.code}
-                lang={entry.code}
-                dir={entry.dir}
-                aria-current={entry.code === locale().locale ? "page" : undefined}
-                onClick={() => props.onLocaleSelect?.(entry.code)}
-              >{entry.nativeName}</a>
-            )}</For>
-          </nav>
+          <FooterLocaleMenu
+            state={locale()}
+            registry={registry()}
+            label={props.messages.localeLabel}
+            onSelect={props.onLocaleSelect}
+          />
         )}</Show>
         <div class="site-footer__row">
           <p class="site-footer__brand">
diff --git a/packages/site-kit/styles.css b/packages/site-kit/styles.css
index 111ba46..429c811 100644
--- a/packages/site-kit/styles.css
+++ b/packages/site-kit/styles.css
@@ -23,10 +23,19 @@
    inherited the 16px body and read a step larger than the same row on a
    sibling product's page. Every consumer that noticed fixed it locally. */
 .site-footer__links { font-size: var(--dds-typo-body-2-font-size); }
-.site-footer__langs { display: flex; flex-wrap: wrap; gap: var(--dds-space-8) var(--dds-space-16); font-size: var(--dds-typo-caption-font-size); }
-.site-footer__langs a { color: var(--dds-color-text-muted); text-decoration: none; }
-.site-footer__langs a:hover { color: var(--dds-color-text-primary); }
-.site-footer__langs a[aria-current="page"] { color: var(--dds-color-text-primary); font-weight: 600; }
+.site-footer__langs { font-size: var(--dds-typo-caption-font-size); }
+.site-footer__langs-menu { position: relative; display: inline-block; }
+.site-footer__langs-trigger { display: inline-flex; align-items: center; gap: var(--dds-space-4); color: var(--dds-color-text-muted); cursor: pointer; list-style: none; }
+.site-footer__langs-trigger::-webkit-details-marker { display: none; }
+.site-footer__langs-trigger::after { content: ""; inline-size: 0; block-size: 0; border-inline: 4px solid transparent; border-block-start: 4px solid currentColor; }
+.site-footer__langs-menu[open] .site-footer__langs-trigger,
+.site-footer__langs-trigger:hover { color: var(--dds-color-text-primary); }
+.site-footer__langs-trigger:focus-visible { outline: 2px solid var(--dds-color-border-focus); outline-offset: 2px; }
+/* The footer sits at the foot of the page, so the list opens upward. */
+.site-footer__langs-list { position: absolute; inset-block-end: calc(100% + var(--dds-space-8)); inset-inline-start: 0; z-index: 20; margin: 0; padding: var(--dds-space-8); max-block-size: 60vh; overflow-y: auto; display: grid; gap: var(--dds-space-4); min-inline-size: 12rem; list-style: none; border: 1px solid var(--dds-color-border-default); border-radius: var(--dds-radius-md); background: var(--dds-color-bg-default); box-shadow: var(--dds-elevation-2); }
+.site-footer__langs-list a { display: block; padding: var(--dds-space-4) var(--dds-space-8); border-radius: var(--dds-radius-sm); color: var(--dds-color-text-secondary); text-decoration: none; }
+.site-footer__langs-list a:hover { background: var(--dds-color-bg-subtle); color: var(--dds-color-text-primary); }
+.site-footer__langs-list a[aria-current="page"] { color: var(--dds-color-text-primary); font-weight: 600; }
 .site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dds-space-16) var(--dds-space-32); }
 .site-footer__brand { display: inline-flex; align-items: center; gap: var(--dds-space-8); margin: 0; color: var(--dds-color-text-secondary); }
 .site-footer__brand img, .site-footer__brand svg { block-size: 16px; inline-size: 16px; }