Improve CJK names with a lang atttribute on multilingual name fields

CHANGELOG.md

@@ -57,6 +57,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Update the list of languages in the Wikipedia field ([#10489])
 * Add Ladin (language code `lld`) as an available option for multilingual names
 * Add 30 indigenous languages as dropdown options for multilingual names ([#10684], thanks [@k-yle])
+* Add `lang`uage attributes to input fields for multilingual names, as well as wikidata and wikipedia fields ([#10716], thanks [@mapmeld])
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
 * Fix walkthrough from showing tooltips on wrong location under certain circumstances ([#10650], [#10624], [#10634])
@@ -79,6 +80,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#10653]: https://github.com/openstreetmap/iD/issues/10653
 [#10683]: https://github.com/openstreetmap/iD/issues/10683
 [#10684]: https://github.com/openstreetmap/iD/pull/10684
+[#10716]: https://github.com/openstreetmap/iD/pull/10716
 [@winstonsung]: https://github.com/winstonsung/
 [@Nekzuris]: https://github.com/Nekzuris
 [@michaelabon]: https://github.com/michaelabon

modules/ui/fields/localized.js

@@ -470,6 +470,9 @@ export function uiFieldLocalized(field, context) {
             .attr('placeholder', function(d) {
                 return Array.isArray(d.value) ? t('inspector.multiple_values') : t('translate.localized_translation_name');
             })
+            .attr('lang', function (d) {
+                return d.lang;
+            })
             .classed('mixed', function(d) {
                 return Array.isArray(d.value);
             });

modules/ui/fields/wikidata.js

@@ -275,14 +275,17 @@ export function uiFieldWikidata(field, context) {
     }
 
     function setLabelForEntity() {
-        var label = '';
+        var label = {
+          value: ''
+        };
         if (_wikidataEntity) {
             label = entityPropertyForDisplay(_wikidataEntity, 'labels');
-            if (label.length === 0) {
-                label = _wikidataEntity.id.toString();
+            if (label.value.length === 0) {
+                label.value = _wikidataEntity.id.toString();
             }
         }
-        utilGetSetValue(_searchInput, label);
+        utilGetSetValue(_searchInput, label.value)
+            .attr('lang', label.language);
     }
 
 
@@ -319,10 +322,11 @@ export function uiFieldWikidata(field, context) {
 
             _selection.select('.preset-wikidata-description')
                 .style('display', function(){
-                    return description.length > 0 ? 'flex' : 'none';
+                    return description.value.length > 0 ? 'flex' : 'none';
                 })
                 .select('input')
-                .attr('value', description);
+                .attr('value', description.value)
+                .attr('lang', description.language);
 
             _selection.select('.preset-wikidata-identifier')
                 .style('display', function(){
@@ -355,19 +359,20 @@ export function uiFieldWikidata(field, context) {
     };
 
     function entityPropertyForDisplay(wikidataEntity, propKey) {
-        if (!wikidataEntity[propKey]) return '';
+        var blankResponse = { value: '' };
+        if (!wikidataEntity[propKey]) return blankResponse;
         var propObj = wikidataEntity[propKey];
         var langKeys = Object.keys(propObj);
-        if (langKeys.length === 0) return '';
+        if (langKeys.length === 0) return blankResponse;
         // sorted by priority, since we want to show the user's language first if possible
         var langs = wikidata.languagesToQuery();
         for (var i in langs) {
             var lang = langs[i];
             var valueObj = propObj[lang];
-            if (valueObj && valueObj.value && valueObj.value.length > 0) return valueObj.value;
+            if (valueObj && valueObj.value && valueObj.value.length > 0) return valueObj;
         }
         // default to any available value
-        return propObj[langKeys[0]].value;
+        return propObj[langKeys[0]];
     }
 
 

modules/ui/fields/wikipedia.js

@@ -204,7 +204,8 @@ export function uiFieldWikipedia(field, context) {
         value += '#' + anchor.replace(/_/g, ' ');
       }
       value = value.slice(0, 1).toUpperCase() + value.slice(1);
-      utilGetSetValue(_langInput, nativeLangName);
+      utilGetSetValue(_langInput, nativeLangName)
+        .attr('lang', langInfo[2]);
       utilGetSetValue(_titleInput, value);
     }
 
@@ -281,6 +282,7 @@ export function uiFieldWikipedia(field, context) {
     if (tagLangInfo) {
       const nativeLangName = tagLangInfo[1];
       utilGetSetValue(_langInput, nativeLangName);
+      _titleInput.attr('lang', tagLangInfo[2]); // for CJK and other display issues
       utilGetSetValue(_titleInput, tagArticleTitle + (anchor ? ('#' + anchor) : ''));
       _wikiURL = `${scheme}${tagLang}.${domain}/wiki/${wiki.encodePath(tagArticleTitle, anchor)}`;
     } else {

test/spec/ui/fields/localized.js

@@ -166,4 +166,14 @@ describe('iD.uiFieldLocalized', function() {
             done();
         }, 20);
     });
+
+    it('has a lang attribute on an existing multilingual name field', function(done) {
+      var localized = iD.uiFieldLocalized(field, context);
+      localized.tags({'name:de': 'Value'});
+      window.setTimeout(function() {
+        selection.call(localized);
+        expect(selection.selectAll('.localized-value').attr('lang')).to.eql('de');
+        done();
+      }, 20);
+    });
 });