Language picker #12006

wackerow · 2024-01-23T21:04:03Z

Description

Adds a new language selection menu to replace the "Languages" link in the navigation bar (or mobile menu), using Chakra-UI Menu component.

Language menu displays without changing the users route, rendering a list of all available locales
Language items show name in both current site language and the local language
Language items now display percentage of site available in that language, along with total word count, and a progress bar (Chakra-UI Progress component).
Auto-focuses to input to filter by target language in: english, that language, the current page language, or the language code itself
Languages are sorted in descending order by words translated
Browser preference featured at the top for quick-access
Keyboard navigation enabled

Translation callouts

Bottom has a callout to help us translate the site with "learn more" link to /contributing/translation-program
If filter query has no results, the message from the bottom of the /languages page is displayed as a call-to-action, again with a link the Translation Program

Data fetching

New script added to fetch progress data using @crowdin/crowdin-api-client, saving results to a data file
Adds a GitHub action cron job to run this script once a week, commit the results, and post as a PR
Crowdin API env var handled through GitHub secrets

Screenshot

Preview link

https://deploy-preview-12006--ethereumorg.netlify.app/

Related issue

Epic: Implement navigation redesign #11955

Related PRs

fix logic to fetch a display name for each locale in the LanguagePicker, both in the language of the current locale (source) and the language of that locale choice (target). Uses internal i18n translations if available, falling back to native Intl package if not available, and falling back to English name for locales that are not found elsewhere. Updates translations.ts to add "page-translations" next to "common" for all pages, and updates `existsNamespace` "primary namespace" argument to look at the index one higher (except for /languages page and pages that use "common" as primary ns)

add handleClose logic

netlify · 2024-01-23T21:04:08Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`4172a13`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/65c2c49d01de1200081bb37c
😎 Deploy Preview	https://deploy-preview-12006--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

commit first data fetch of translation progress

pettinarip

Second part of the review.

src/components/LanguagePicker/index.tsx

update isOpen/onOpen/onClose disclosure handling, export {t} from hook

wackerow · 2024-01-31T21:52:25Z

One thing I noticed that I'll note as a potential bug:

This is currently set up to auto-focus on the filter input when the menu is opened. It is also set up where pressing "Enter" from the filter input will automatically navigate to the first filter option available.

If a user clicks this menu from ANY non-English page, and then they press "Enter", they will automatically be taken to the English version of the site, since that always be the first result with an empty filter query... This may be easier to switch than we'd like, since it may be triggered by accident.

I'm not sure I see this as a blocker myself, but open to thoughts or suggestions on how we can keep this convenience without potentially inhibiting the UX. We could ditch the auto-focus, and/or the "Enter" shortcut to trigger first result.... Personally think I'd be more in favor of removing the "Enter" trigger (since user can still press "Down -> Enter"); or only allowing this shortcut ONLY IF the filter query is not empty.

pettinarip · 2024-02-01T09:53:49Z

@wackerow agreed. Given that we have changed the default Menu behavior, I think we should disabled the default "Enter" trigger and keep our implementation since now it is not just a list, it is more of a form where the "Enter" key plays a different role.

resolves RTL positioning bug

pettinarip

Great job @wackerow! a lot of work done here. Overall it works really well.

Small issue (or feature 🤔?? xD): the user can get a weird experience when scrolling and hovering the items. If you point to the top of the list, you might get some undesired scrolling to the top of the list. Don't expect this to be an easy fix so no bother on investigating this now. Just saying in case we want to try to fix it later.
https://github.com/ethereum/ethereum-org-website/assets/468158/6d599ce8-707e-4145-892c-cc4a18987fc0

pettinarip · 2024-02-07T13:01:31Z

src/data/translationProgress.json

Comment for next iterations: is it possible to add a new step to minimize this as much as we can? seems that there is room for improvements here.
This file will get bundled in the main app.js file that all the pages need to load impacting the overall client load performance.

pettinarip · 2024-02-07T14:01:09Z

src/components/LanguagePicker/index.tsx

+  useEventListener("keydown", (e) => {
+    if (e.key !== "\\") return
+    e.preventDefault()
+    inputRef.current?.focus()


Couldn't we simplify this autofocus when the menu is opened, not just when the keydown is pressed? I say this because we should also autofocus the input when the user clicks the button.

There is a pretty standard user behavior where you click the button and then just start typing. You can't do that right now.

I think this was the original idea and I saw it working before. Just calling it out.

pettinarip · 2024-02-07T14:05:50Z

src/components/LanguagePicker/index.tsx

+        onKeyDown={(e) => {
+          if (e.key === "Tab" || e.key === "\\") {
+            e.preventDefault()
+            ;(e.shiftKey ? inputRef : footerRef).current?.focus()


This is cool, but I have a feeling that most users will never notice that it exists. For future iterations, we could add a help icon/tooltip or a shortcuts summary that explains this.

pettinarip · 2024-02-07T14:09:52Z

src/components/LanguagePicker/index.tsx

+                onChange={(e) => setFilterValue(e.target.value)}
+                onBlur={(e) => {
+                  if (e.relatedTarget?.tagName.toLowerCase() === "div") {
+                    e.currentTarget.focus()


Couldn't understand what this is for, could you explain? (we could add a comment)

pettinarip · 2024-02-07T14:12:59Z

src/components/LanguagePicker/index.tsx

+        <Box
+          position="relative"


Not a blocker: wondering if we could treat this as an actual form

Suggested change

<Box

position="relative"

<Box

as="form"

position="relative"

We could have some a11y wins when we submit the form (also, would remove the need of the custom onKeyDown handler).

pettinarip · 2024-02-07T14:23:36Z

src/components/LanguagePicker/useLanguagePicker.tsx

+    const navLangs = typeof navigator !== "undefined" ? navigator.languages : []
+
+    // For each browser preference, reduce to the most specific match found in `locales` array
+    const allBrowserLocales: Lang[] = navLangs
+      .map(
+        (navLang) =>
+          locales?.reduce((acc, cur) => {
+            if (cur.toLowerCase() === navLang.toLowerCase()) return cur
+            if (
+              navLang.toLowerCase().startsWith(cur.toLowerCase()) &&
+              acc !== navLang
+            )
+              return cur
+            return acc
+          }, "") as Lang
+      )
+      .filter((i) => !!i) // Remove those without matches
+
+    // Remove duplicate matches
+    const browserLocales = Array.from(new Set(allBrowserLocales))


Refactor idea: move all this logic to a util function.

Suggested change

const navLangs = typeof navigator !== "undefined" ? navigator.languages : []

// For each browser preference, reduce to the most specific match found in `locales` array

const allBrowserLocales: Lang[] = navLangs

.map(

(navLang) =>

locales?.reduce((acc, cur) => {

if (cur.toLowerCase() === navLang.toLowerCase()) return cur

if (

navLang.toLowerCase().startsWith(cur.toLowerCase()) &&

acc !== navLang

)

return cur

return acc

}, "") as Lang

)

.filter((i) => !!i) // Remove those without matches

// Remove duplicate matches

const browserLocales = Array.from(new Set(allBrowserLocales))

const browserLocales = getBrowserLocales(locales)

pettinarip · 2024-02-07T14:29:33Z

src/components/LanguagePicker/useLanguagePicker.tsx

+
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
+const data = progressData as ProjectProgressData[]


I'd keep using progressData for its name, much clearer than the generic data.

We do have resolveJsonModule in our tsconfig so, this data should be typed already. If we need to force the ProjectProgressData type, we could do that in our global.d.ts using declare module.

pettinarip

LFG!! 🚀 🚀

wackerow · 2024-02-07T17:43:57Z

Thank you for noting these remaining issues! Will take note of these, but gonna bring it in in the meantime. Will merge these into the Radix-UI nav-menu PR (#12125) to clear conflicts

wackerow added 11 commits January 14, 2024 20:35

feat: add desktop locale-picker menu

75731c9

fix: pass direction to Chakra theme provider

027aab4

refactor: extract picker, fix display name logic

a9c9f88

style: update language picker per design

8bc2890

refactor: extract resuable Item, improve kbd nav

800da6e

fix: kbd input navigation for desktop lang picker

c4a43a8

feat: initial draft of mobile language picker

87d9030

fix: prevent closing with click on input

b125513

style: patch input color and mobile menu sizing

c25761e

fix: close mobile menu on language selection

7363217

add handleClose logic

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program labels Jan 23, 2024

wackerow added 2 commits January 23, 2024 13:08

Merge branch 'dev' into language-menu

d38f027

feat: add getTranslationProgress github action

cc8b5cb

commit first data fetch of translation progress

wackerow force-pushed the language-menu branch from 495e383 to 0e7706c Compare January 24, 2024 01:35

feat: implement translation progress and indicator

ac61dfd

wackerow force-pushed the language-menu branch from 0e7706c to ac61dfd Compare January 24, 2024 01:36

wackerow added 9 commits January 23, 2024 19:48

feat: add browser locale highlight

8c71b41

fix: nav lang state

47e3d40

refactor: show en, patch mobile styling, linting

b8d1cb5

refactor: save word/phrase counts with progress

9913e0d

style: limit desktop menu height to 75vh

e1c2c6f

refactor: improve nomenclature, extract type

5aadc07

feat: add NoResultsCallout

8eb8e3d

refactor: use closeOnSelect to keep menu open

956baf4

feat: kbd shortcut for language menu / color mode

e999e4a

wackerow added 2 commits January 30, 2024 20:00

patch: boolean prop optional

1fe9d66

i18n: extract LanguagePicker strings

4b3ccb5

wackerow marked this pull request as ready for review January 31, 2024 04:01

pettinarip reviewed Jan 31, 2024

View reviewed changes

src/components/LanguagePicker/index.tsx Outdated Show resolved Hide resolved

src/components/LanguagePicker/index.tsx Outdated Show resolved Hide resolved

wackerow added 7 commits January 31, 2024 07:41

refactor: use languages util, rm root access

62321eb

refactor: rm useEffect; type check for navigator

f0bbfe6

refactor: extract useLanguagePicker custom hook

5795512

feat: add Matomo event tracking

95953cd

update isOpen/onOpen/onClose disclosure handling, export {t} from hook

i18n: extract missing LanguagePicker strings

16612ec

Merge branch 'dev' into language-menu

f203c26

refactor: reuse existing type, rm redundant entry

2d6147b

wackerow added 10 commits February 1, 2024 09:49

feat: update matomo event tracking

0b2cf23

fix: remove initialFocusRef, add string namespace

b96e950

feat: browser preference badge

fe1ed8a

chore: deprecate isBrowserPreference

23e7fda

chore: add missing hook dependency

c4e3639

chore: clean up unused variables

2137963

feat: keyboard navigation updates

8c3576e

fix: mobile picker positioning

72470f0

resolves RTL positioning bug

feat: hide "languages" below lg breakpoint

cb54a46

fix: menu item styling

4172a13

pettinarip reviewed Feb 7, 2024

View reviewed changes

pettinarip approved these changes Feb 7, 2024

View reviewed changes

wackerow merged commit d3af5ac into dev Feb 7, 2024
10 checks passed

wackerow deleted the language-menu branch February 7, 2024 17:44

This was referenced Feb 14, 2024

Release candidate v8.1.0 #12180

Merged

Deploy v8.1.0 #12182

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Language picker #12006

Language picker #12006

wackerow commented Jan 23, 2024 •

edited

Loading

netlify bot commented Jan 23, 2024 •

edited

Loading

pettinarip left a comment

wackerow commented Jan 31, 2024

pettinarip commented Feb 1, 2024

pettinarip left a comment

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip Feb 7, 2024

pettinarip left a comment

wackerow commented Feb 7, 2024


		import { DEFAULT_LOCALE } from "@/lib/constants"

		const data = progressData as ProjectProgressData[]

Language picker #12006

Language picker #12006

Conversation

wackerow commented Jan 23, 2024 • edited Loading

Description

Translation callouts

Data fetching

Screenshot

Preview link

Related issue

Related PRs

netlify bot commented Jan 23, 2024 • edited Loading

✅ Deploy Preview for ethereumorg ready!

pettinarip left a comment

Choose a reason for hiding this comment

wackerow commented Jan 31, 2024

pettinarip commented Feb 1, 2024

pettinarip left a comment

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip Feb 7, 2024

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

wackerow commented Feb 7, 2024

wackerow commented Jan 23, 2024 •

edited

Loading

netlify bot commented Jan 23, 2024 •

edited

Loading