feat(site-kit): the footer's language row collapses into a menu - #52
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
평평하게 깔린 언어 행은 제품의 언어 수만큼 깁니다 — AskLinq 10개, VisionLinq·TraceLinq 14개, BookLinq 20개. 같은 가족 푸터가 제품마다 다른 무게를 지고 있었고, 20개짜리에서는 페이지에서 가장 무거운 덩어리였습니다.
이제 현재 언어의 자기 이름을 트리거로 하는
<details>메뉴입니다.접으면서도 지킨 것
<nav>랜드마크와 라벨aria-current(평평한 행이 표시하던 것)트리거를 "언어"가 아니라 언어 이름으로 한 이유
번역된 "Language"는 그 페이지를 못 읽는 사람에게 무의미합니다. 자기 언어의 이름은 알아봅니다. 그리고 그건 평평한 행이
aria-current로 강조하던 바로 그 정보입니다.세부
목록은 위로 열립니다(푸터는 페이지 맨 아래). 그림자는 자체 값 대신 헤더 메뉴가 쓰는
--dds-elevation-2를 씁니다 — 첫 판에rgb()폴백을 넣었다가 하드코딩 색 금지 가드에 걸려 알았습니다.검증
verify:site-kit:ui·check(docs sync·consumer 벤더링) 통과,footer.test.tsx11/11(신규 3: 접힌 기본 상태와 트리거 라벨, Esc 포커스 복귀, 위로 열리는 배치).소비
머지·발행되면 네 제품이 받습니다. AskLinq는
^범위라 자동, VisionLinq·BookLinq는 정확한 핀이라 bump PR이 하나씩 필요합니다. TraceLinq는 아직 자기 사본을 들고 있어 그 레포에서 이관해야 이 변경을 받습니다.