Merge pull request sugarlabs#5411 from kh-ub-ayb/selected-language

Added visual highlight for selected language in dropdown

Author: omsuneri

css/themes.css

@@ -143,6 +143,7 @@
 .dark #confirmation-message {
   color: #e2e2e2;
 }
+
 body {
   --border: #cccccc;
   --bg: #ffffff;
@@ -159,4 +160,16 @@ body.dark {
   --accent: #3fe0d1;
 }
 
-/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
+/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
+
+/* Selected language highlight in language dropdown */
+#languagedropdown li a.selected-language {
+  background-color: rgba(33, 150, 243, 0.15);
+  border-left: 3px solid #2196F3;
+  font-weight: 600;
+}
+
+.dark #languagedropdown li a.selected-language {
+  background-color: rgba(33, 150, 243, 0.25);
+  border-left: 3px solid #64B5F6;
+}

js/__tests__/toolbar.test.js

@@ -886,8 +886,25 @@ describe("Toolbar Class", () => {
 
     test("renderLanguageSelectIcon sets onclick and updates language selection", () => {
         const languageSelectIcon = { onclick: null };
-        const languageBox = { setAttribute: jest.fn() };
-        global.docById.mockReturnValue(languageSelectIcon);
+        const languageBox = { enUS_onclick: jest.fn() };
+
+        // Mock elements for all language IDs with classList
+        const mockLangElement = {
+            onclick: null,
+            classList: {
+                add: jest.fn(),
+                remove: jest.fn()
+            }
+        };
+
+        global.docById.mockImplementation(id => {
+            if (id === "languageSelectIcon") return languageSelectIcon;
+            // Return mock element with classList for any language ID
+            return mockLangElement;
+        });
+
+        global.localStorage.languagePreference = "enUS";
+
         toolbar.renderLanguageSelectIcon(languageBox);
         expect(languageSelectIcon.onclick).toBeInstanceOf(Function);
         languageSelectIcon.onclick();

js/toolbar.js

@@ -1178,9 +1178,81 @@ class Toolbar {
             "ur"
         ];
 
+        /**
+         * Updates the selected-language class to highlight the currently selected language.
+         * @param {string} selectedLang - The language code to highlight.
+         */
+        const updateSelectedLanguageHighlight = selectedLang => {
+            // Remove existing selection from all language items
+            languages.forEach(lang => {
+                const langElem = docById(lang);
+                if (langElem) {
+                    langElem.classList.remove("selected-language");
+                }
+            });
+
+            // Handle special cases for language preference storage values and browser language codes
+            let langToHighlight = selectedLang;
+
+            // Map browser language codes to dropdown IDs
+            const browserLangMap = {
+                "en-US": "enUS",
+                "en-GB": "enUK",
+                "en-UK": "enUK",
+                "zh-CN": "zhCN",
+                "zh": "zhCN"
+            };
+
+            // Check if it's a browser language code that needs mapping
+            if (selectedLang && browserLangMap[selectedLang]) {
+                langToHighlight = browserLangMap[selectedLang];
+            }
+
+            // Handle Japanese variants (ja-kanji, ja-kana stored vs ja/kana displayed)
+            if (selectedLang && selectedLang.startsWith("ja")) {
+                if (selectedLang === "ja-kana" || localStorage.kanaPreference === "kana") {
+                    langToHighlight = "kana";
+                } else {
+                    langToHighlight = "ja";
+                }
+            }
+
+            // Handle zh_CN to zhCN mapping (stored preference format)
+            if (selectedLang === "zh_CN") {
+                langToHighlight = "zhCN";
+            }
+
+            // Fallback: if language starts with "en" but not mapped, default to enUS
+            if (
+                selectedLang &&
+                selectedLang.startsWith("en") &&
+                !languages.includes(langToHighlight)
+            ) {
+                langToHighlight = "enUS";
+            }
+
+            const selectedElem = docById(langToHighlight);
+            if (selectedElem) {
+                selectedElem.classList.add("selected-language");
+            }
+        };
+
         languageSelectIcon.onclick = () => {
+            // Get current language preference
+            const currentLang = localStorage.languagePreference || navigator.language;
+
+            // Highlight the currently selected language
+            updateSelectedLanguageHighlight(currentLang);
+
+            // Set up click handlers for each language
             languages.forEach(lang => {
-                docById(lang).onclick = () => languageBox[`${lang}_onclick`](this.activity);
+                docById(lang).onclick = () => {
+                    // Update highlight to newly selected language
+                    updateSelectedLanguageHighlight(lang);
+
+                    // Call the original language change handler
+                    languageBox[`${lang}_onclick`](this.activity);
+                };
             });
         };
     }