Revert t function to returning the plain string by default

Add `t.html` function for getting the string with the `lang` attribute

modules/core/localizer.js

@@ -8,7 +8,7 @@ let _t = _mainLocalizer.t;
 
 export {
     _mainLocalizer as localizer,
-    // export `t` function for ease-of-use
+    // export `t` functions for ease-of-use
     _t as t
 };
 
@@ -221,20 +221,17 @@ export function coreLocalizer() {
       return 'other';
     }
 
-    let _lastUsedTCode;
-
     /**
-    * Given a string identifier, try to find that string in the current
-    * language, and return it.  This function will be called recursively
-    * with locale `en` if a string can not be found in the requested language.
+    * Try to find that string in `locale` or the current `_localeCode` matching
+    * the given `stringId`. If no string can be found in the requested locale,
+    * we'll recurse down all the `_localeCodes` until one is found.
     *
     * @param  {string}   stringId      string identifier
     * @param  {object?}  replacements  token replacements and default string
     * @param  {string?}  locale        locale to use (defaults to currentLocale)
     * @return {string?}  localized string
     */
-    localizer.t = function(stringId, replacements, locale) {
-        _lastUsedTCode = null;
+    localizer.tInfo = function(stringId, replacements, locale) {
 
         locale = locale || _localeCode;
 
@@ -291,11 +288,10 @@ export function coreLocalizer() {
           }
           if (typeof result === 'string') {
             // found a localized string!
-            _lastUsedTCode = locale;
-            if (replacements && replacements.html === false) {
-                return result;
-            }
-            return `<span class="localized-text" lang="${locale}">${result}</span>`;
+            return {
+                text: result,
+                locale: locale
+            };
           }
         }
         // no localized string found...
@@ -305,21 +301,36 @@ export function coreLocalizer() {
         if (index >= 0 && index < _localeCodes.length - 1) {
             // eventually this will be 'en' or another locale with 100% coverage
             let fallback = _localeCodes[index + 1];
-            return localizer.t(stringId, replacements, fallback);
+            return localizer.tInfo(stringId, replacements, fallback);
         }
 
         if (replacements && 'default' in replacements) {
           // Fallback to a default value if one is specified in `replacements`
-          return replacements.default;
+          return {
+              text: replacements.default,
+              locale: null
+          };
         }
 
         const missing = `Missing ${locale} translation: ${stringId}`;
         if (typeof console !== 'undefined') console.error(missing);  // eslint-disable-line
 
-        return missing;
+        return {
+            text: missing,
+            locale: 'en'
+        };
     };
 
-    localizer.t.lastCode = () => _lastUsedTCode;
+    // Returns only the localized text, discarding the locale info
+    localizer.t = function(stringId, replacements, locale) {
+        return localizer.tInfo(stringId, replacements, locale).text;
+    };
+
+    // Returns the localized text wrapped in an HTML element encoding the locale info
+    localizer.t.html = function(stringId, replacements, locale) {
+        const info = localizer.tInfo(stringId, replacements, locale);
+        return `<span class="localized-text" lang="${info.locale || 'unknown'}">${info.text}</span>`;
+    };
 
     localizer.languageName = (code, options) => {
 

modules/modes/add_note.js

@@ -12,7 +12,7 @@ export function modeAddNote(context) {
         button: 'note',
         title: t('modes.add_note.title'),
         description: t('modes.add_note.description'),
-        key: t('modes.add_note.key', { html: false })
+        key: t('modes.add_note.key')
     };
 
     var behavior = behaviorDraw(context)

modules/modes/select.js

@@ -231,7 +231,7 @@ export function modeSelect(context, selectedIDs) {
         _behaviors.forEach(context.install);
 
         keybinding
-            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
             .on(['[', 'pgup'], previousVertex)
             .on([']', 'pgdown'], nextVertex)
             .on(['{', uiCmd('⌘['), 'home'], firstVertex)

modules/modes/select_data.js

@@ -72,7 +72,7 @@ export function modeSelectData(context, selectedDatum) {
         behaviors.forEach(context.install);
 
         keybinding
-            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

modules/modes/select_error.js

@@ -98,7 +98,7 @@ export function modeSelectError(context, selectedErrorID, selectedErrorService)
 
         behaviors.forEach(context.install);
         keybinding
-            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

modules/modes/select_note.js

@@ -108,7 +108,7 @@ export function modeSelectNote(context, selectedNoteID) {
         _behaviors.forEach(context.install);
 
         _keybinding
-            .on(t('inspector.zoom_to.key', { html: false }), mode.zoomToSelected)
+            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
             .on('⎋', esc, true);
 
         d3_select(document)

modules/operations/circularize.js

@@ -107,7 +107,7 @@ export function operationCircularize(context, selectedIDs) {
 
 
     operation.id = 'circularize';
-    operation.keys = [t('operations.circularize.key', { html: false })];
+    operation.keys = [t('operations.circularize.key')];
     operation.title = t('operations.circularize.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/continue.js

@@ -65,7 +65,7 @@ export function operationContinue(context, selectedIDs) {
 
 
     operation.id = 'continue';
-    operation.keys = [t('operations.continue.key', { html: false })];
+    operation.keys = [t('operations.continue.key')];
     operation.title = t('operations.continue.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/disconnect.js

@@ -183,7 +183,7 @@ export function operationDisconnect(context, selectedIDs) {
 
 
     operation.id = 'disconnect';
-    operation.keys = [t('operations.disconnect.key', { html: false })];
+    operation.keys = [t('operations.disconnect.key')];
     operation.title = t('operations.disconnect.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/extract.js

@@ -84,7 +84,7 @@ export function operationExtract(context, selectedIDs) {
 
 
     operation.id = 'extract';
-    operation.keys = [t('operations.extract.key', { html: false })];
+    operation.keys = [t('operations.extract.key')];
     operation.title = t('operations.extract.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/merge.js

@@ -88,7 +88,7 @@ export function operationMerge(context, selectedIDs) {
     };
 
     operation.id = 'merge';
-    operation.keys = [t('operations.merge.key', { html: false })];
+    operation.keys = [t('operations.merge.key')];
     operation.title = t('operations.merge.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/move.js

@@ -72,7 +72,7 @@ export function operationMove(context, selectedIDs) {
 
 
     operation.id = 'move';
-    operation.keys = [t('operations.move.key', { html: false })];
+    operation.keys = [t('operations.move.key')];
     operation.title = t('operations.move.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/orthogonalize.js

@@ -130,7 +130,7 @@ export function operationOrthogonalize(context, selectedIDs) {
 
 
     operation.id = 'orthogonalize';
-    operation.keys = [t('operations.orthogonalize.key', { html: false })];
+    operation.keys = [t('operations.orthogonalize.key')];
     operation.title = t('operations.orthogonalize.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/reverse.js

@@ -69,7 +69,7 @@ export function operationReverse(context, selectedIDs) {
 
 
     operation.id = 'reverse';
-    operation.keys = [t('operations.reverse.key', { html: false })];
+    operation.keys = [t('operations.reverse.key')];
     operation.title = t('operations.reverse.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/rotate.js

@@ -72,7 +72,7 @@ export function operationRotate(context, selectedIDs) {
 
 
     operation.id = 'rotate';
-    operation.keys = [t('operations.rotate.key', { html: false })];
+    operation.keys = [t('operations.rotate.key')];
     operation.title = t('operations.rotate.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/split.js

@@ -63,7 +63,7 @@ export function operationSplit(context, selectedIDs) {
 
 
     operation.id = 'split';
-    operation.keys = [t('operations.split.key', { html: false })];
+    operation.keys = [t('operations.split.key')];
     operation.title = t('operations.split.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/operations/straighten.js

@@ -135,7 +135,7 @@ export function operationStraighten(context, selectedIDs) {
 
 
     operation.id = 'straighten';
-    operation.keys = [t('operations.straighten.key', { html: false })];
+    operation.keys = [t('operations.straighten.key')];
     operation.title = t('operations.straighten.title');
     operation.behavior = behaviorOperation(context).which(operation);
 

modules/presets/category.js

@@ -33,7 +33,7 @@ export function presetCategory(categoryID, category, all) {
 
   _this.matchScore = () => -1;
 
-  _this.name = () => t(`presets.categories.${categoryID}.name`, { 'default': categoryID, html: false });
+  _this.name = () => t(`presets.categories.${categoryID}.name`, { 'default': categoryID });
 
   _this.terms = () => [];
 

modules/presets/field.js

@@ -21,15 +21,16 @@ export function presetField(fieldID, field) {
   };
 
   _this.t = (scope, options) => t(`presets.fields.${fieldID}.${scope}`, options);
+  _this.t.html = (scope, options) => t.html(`presets.fields.${fieldID}.${scope}`, options);
 
-  _this.label = () => _this.overrideLabel || _this.t('label', { 'default': fieldID, html: false });
+  _this.label = () => _this.overrideLabel || _this.t('label', { 'default': fieldID });
 
   const _placeholder = _this.placeholder;
-  _this.placeholder = () => _this.t('placeholder', { 'default': _placeholder, html: false });
+  _this.placeholder = () => _this.t('placeholder', { 'default': _placeholder });
 
   _this.originalTerms = (_this.terms || []).join();
 
-  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms, html: false })
+  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms })
     .toLowerCase().trim().split(/\s*,+\s*/);
 
 

modules/presets/preset.js

@@ -84,19 +84,24 @@ export function presetPreset(presetID, preset, addable, allFields, allPresets) {
     return t(textID, options);
   };
 
+  _this.t.html = (scope, options) => {
+    const textID = `presets.presets.${presetID}.${scope}`;
+    return t.html(textID, options);
+  };
+
 
   _this.name = () => {
     if (_this.suggestion) {
       let path = presetID.split('/');
       path.pop();  // remove brand name
       // NOTE: insert an en-dash, not a hyphen (to avoid conflict with fr - nl names in Brussels etc)
-      return _this.originalName + ' – ' + t('presets.presets.' + path.join('/') + '.name', { html: false });
+      return _this.originalName + ' – ' + t('presets.presets.' + path.join('/') + '.name');
     }
-    return _this.t('name', { 'default': _this.originalName, html: false });
+    return _this.t('name', { 'default': _this.originalName });
   };
 
 
-  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms, html: false })
+  _this.terms = () => _this.t('terms', { 'default': _this.originalTerms })
     .toLowerCase().trim().split(/\s*,+\s*/);
 
 

modules/services/streetside.js

@@ -789,7 +789,7 @@ export default {
 
     label
       .append('span')
-      .html(t('streetside.hires'));
+      .html(t.html('streetside.hires'));
 
 
     let captureInfo = line1
@@ -830,7 +830,7 @@ export default {
       .attr('target', '_blank')
       .attr('href', 'https://www.bing.com/maps?cp=' + d.loc[1] + '~' + d.loc[0] +
         '&lvl=17&dir=' + d.ca + '&style=x&v=2&sV=1')
-      .html(t('streetside.view_on_bing'));
+      .html(t.html('streetside.view_on_bing'));
 
     line2
       .append('a')
@@ -838,7 +838,7 @@ export default {
       .attr('target', '_blank')
       .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' +
         encodeURIComponent(d.key) + '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
-      .html(t('streetside.report'));
+      .html(t.html('streetside.report'));
 
 
     let bubbleIdQuadKey = d.key.toString(4);

modules/svg/mapillary_map_features.js

@@ -112,7 +112,7 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
             .append('title')
             .text(function(d) {
                 var id = d.value.replace(/--/g, '.').replace(/-/g, '_');
-                return t('mapillary_map_features.' + id, { html: false });
+                return t('mapillary_map_features.' + id);
             });
 
         enter

modules/ui/account.js

@@ -52,7 +52,7 @@ export function uiAccount(context) {
             logoutLink.append('a')
                 .attr('class', 'logout')
                 .attr('href', '#')
-                .html(t('logout'))
+                .html(t.html('logout'))
                 .on('click.logout', function() {
                     d3_event.preventDefault();
                     osm.logout();

modules/ui/changeset_editor.js

@@ -107,7 +107,7 @@ export function uiChangesetEditor(context) {
             .call(svgIcon('#iD-icon-alert', 'inline'))
             .attr('href', t('commit.google_warning_link'))
             .append('span')
-            .html(t('commit.google_warning'));
+            .html(t.html('commit.google_warning'));
 
         commentEnter
             .transition()

modules/ui/commit.js

@@ -223,7 +223,7 @@ export function uiCommit(context) {
             .append('div')
             .attr('class', 'header-block')
             .append('h3')
-            .html(t('commit.title'));
+            .html(t.html('commit.title'));
 
         headerTitle
             .append('div')
@@ -283,7 +283,7 @@ export function uiCommit(context) {
         prose = prose.enter()
             .append('p')
             .attr('class', 'commit-info')
-            .html(t('commit.upload_explanation'))
+            .html(t.html('commit.upload_explanation'))
             .merge(prose);
 
         // always check if this has changed, but only update prose.html()
@@ -311,7 +311,7 @@ export function uiCommit(context) {
                 .attr('target', '_blank');
 
             prose
-                .html(t('commit.upload_explanation_with_user', { user: userLink.html() }));
+                .html(t.html('commit.upload_explanation_with_user', { user: userLink.html() }));
         });
 
 
@@ -337,7 +337,7 @@ export function uiCommit(context) {
 
         labelEnter
             .append('span')
-            .html(t('commit.request_review'));
+            .html(t.html('commit.request_review'));
 
         // Update
         requestReview = requestReview
@@ -362,7 +362,7 @@ export function uiCommit(context) {
             .attr('class', 'secondary-action button cancel-button')
             .append('span')
             .attr('class', 'label')
-            .html(t('commit.cancel'));
+            .html(t.html('commit.cancel'));
 
         var uploadButton = buttonEnter
             .append('button')
@@ -370,7 +370,7 @@ export function uiCommit(context) {
 
         uploadButton.append('span')
             .attr('class', 'label')
-            .html(t('commit.save'));
+            .html(t.html('commit.save'));
 
         var uploadBlockerTooltipText = getUploadBlockerMessage();
 

modules/ui/commit_warnings.js

@@ -27,7 +27,7 @@ export function uiCommitWarnings(context) {
 
             containerEnter
                 .append('h3')
-                .html(severity === 'warning' ? t('commit.warnings') : t('commit.errors'));
+                .html(severity === 'warning' ? t.html('commit.warnings') : t.html('commit.errors'));
 
             containerEnter
                 .append('ul')

modules/ui/confirm.js

@@ -27,7 +27,7 @@ export function uiConfirm(selection) {
             .on('click.confirm', function() {
                 modalSelection.remove();
             })
-            .html(t('confirm.okay'))
+            .html(t.html('confirm.okay'))
             .node()
             .focus();
 

modules/ui/conflicts.js

@@ -66,7 +66,7 @@ export function uiConflicts(context) {
 
         headerEnter
             .append('h3')
-            .html(t('save.conflict.header'));
+            .html(t.html('save.conflict.header'));
 
         var bodyEnter = selection.selectAll('.body')
             .data([0])
@@ -77,7 +77,7 @@ export function uiConflicts(context) {
         var conflictsHelpEnter = bodyEnter
             .append('div')
             .attr('class', 'conflicts-help')
-            .html(t('save.conflict.help'));
+            .html(t.html('save.conflict.help'));
 
 
         // Download changes link
@@ -110,7 +110,7 @@ export function uiConflicts(context) {
         linkEnter
             .call(svgIcon('#iD-icon-load', 'inline'))
             .append('span')
-            .html(t('save.conflict.download_changes'));
+            .html(t.html('save.conflict.download_changes'));
 
 
         bodyEnter
@@ -123,7 +123,7 @@ export function uiConflicts(context) {
             .attr('class', 'conflicts-done')
             .attr('opacity', 0)
             .style('display', 'none')
-            .html(t('save.conflict.done'));
+            .html(t.html('save.conflict.done'));
 
         var buttonsEnter = bodyEnter
             .append('div')
@@ -133,13 +133,13 @@ export function uiConflicts(context) {
             .append('button')
             .attr('disabled', _conflictList.length > 1)
             .attr('class', 'action conflicts-button col6')
-            .html(t('save.title'))
+            .html(t.html('save.title'))
             .on('click.try_again', tryAgain);
 
         buttonsEnter
             .append('button')
             .attr('class', 'secondary-action conflicts-button col6')
-            .html(t('confirm.cancel'))
+            .html(t.html('confirm.cancel'))
             .on('click.cancel', cancel);
     }
 
@@ -177,7 +177,7 @@ export function uiConflicts(context) {
         conflictEnter
             .append('h4')
             .attr('class', 'conflict-count')
-            .html(t('save.conflict.count', { num: index + 1, total: _conflictList.length }));
+            .html(t.html('save.conflict.count', { num: index + 1, total: _conflictList.length }));
 
         conflictEnter
             .append('a')
@@ -215,7 +215,7 @@ export function uiConflicts(context) {
             .data(['previous', 'next'])
             .enter()
             .append('button')
-            .html(function(d) { return t('save.conflict.' + d); })
+            .html(function(d) { return t.html('save.conflict.' + d); })
             .attr('class', 'conflict-nav-button action col6')
             .attr('disabled', function(d, i) {
                 return (i === 0 && index === 0) ||

modules/ui/contributors.js

@@ -54,11 +54,11 @@ export function uiContributors(context) {
                 .html(othersNum);
 
             wrap.append('span')
-                .html(t('contributors.truncated_list', { n: othersNum, users: userList.html(), count: count.html() }));
+                .html(t.html('contributors.truncated_list', { n: othersNum, users: userList.html(), count: count.html() }));
 
         } else {
             wrap.append('span')
-                .html(t('contributors.list', { users: userList.html() }));
+                .html(t.html('contributors.list', { users: userList.html() }));
         }
 
         if (!u.length) {

modules/ui/data_editor.js

@@ -33,7 +33,7 @@ export function uiDataEditor(context) {
 
         headerEnter
             .append('h3')
-            .html(t('map_data.title'));
+            .html(t.html('map_data.title'));
 
 
         var body = selection.selectAll('.body')

modules/ui/data_header.js

@@ -32,7 +32,7 @@ export function uiDataHeader() {
         headerEnter
             .append('div')
             .attr('class', 'data-header-label')
-            .html(t('map_data.layers.custom.title'));
+            .html(t.html('map_data.layers.custom.title'));
     }
 
 

modules/ui/entity_editor.js

@@ -61,7 +61,7 @@ export function uiEntityEditor(context) {
             .merge(headerEnter);
 
         header.selectAll('h3')
-            .html(_entityIDs.length === 1 ? t('inspector.edit') : t('inspector.edit_features'));
+            .html(_entityIDs.length === 1 ? t.html('inspector.edit') : t.html('inspector.edit_features'));
 
         header.selectAll('.preset-reset')
             .on('click', function() {

modules/ui/feature_info.js

@@ -28,7 +28,7 @@ export function uiFeatureInfo(context) {
             selection.append('a')
                 .attr('class', 'chip')
                 .attr('href', '#')
-                .html(t('feature_info.hidden_warning', { count: count }))
+                .html(t.html('feature_info.hidden_warning', { count: count }))
                 .call(tooltipBehavior)
                 .on('click', function() {
                     tooltipBehavior.hide();

modules/ui/feature_list.js

@@ -35,7 +35,7 @@ export function uiFeatureList(context) {
 
         header
             .append('h3')
-            .html(t('inspector.feature_list'));
+            .html(t.html('inspector.feature_list'));
 
         var searchWrap = selection
             .append('div')
@@ -46,7 +46,7 @@ export function uiFeatureList(context) {
 
         var search = searchWrap
             .append('input')
-            .attr('placeholder', t('inspector.search', { html: false }))
+            .attr('placeholder', t('inspector.search'))
             .attr('type', 'search')
             .call(utilNoAuto)
             .on('keypress', keypress)
@@ -256,7 +256,7 @@ export function uiFeatureList(context) {
                 .attr('class', 'entity-name');
 
             list.selectAll('.no-results-item .entity-name')
-                .html(t('geocoder.no_results_worldwide'));
+                .html(t.html('geocoder.no_results_worldwide'));
 
             if (services.geocoder) {
               list.selectAll('.geocode-item')
@@ -269,7 +269,7 @@ export function uiFeatureList(context) {
                   .attr('class', 'label')
                   .append('span')
                   .attr('class', 'entity-name')
-                  .html(t('geocoder.search'));
+                  .html(t.html('geocoder.search'));
             }
 
             list.selectAll('.no-results-item')

modules/ui/field.js

@@ -142,7 +142,7 @@ export function uiField(context, presetField, entityIDs, options) {
                 labelEnter
                     .append('button')
                     .attr('class', 'remove-icon')
-                    .attr('title', t('icons.remove', { html: false }))
+                    .attr('title', t('icons.remove'))
                     .call(svgIcon('#iD-operation-delete'));
             }
 
@@ -150,7 +150,7 @@ export function uiField(context, presetField, entityIDs, options) {
                 labelEnter
                     .append('button')
                     .attr('class', 'modified-icon')
-                    .attr('title', t('icons.undo', { html: false }))
+                    .attr('title', t('icons.undo'))
                     .call(svgIcon((localizer.textDirection() === 'rtl') ? '#iD-icon-redo' : '#iD-icon-undo'));
             }
         }

modules/ui/field_help.js

@@ -197,7 +197,7 @@ export function uiFieldHelp(context, fieldName) {
         titleEnter
             .append('h2')
             .attr('class', ((localizer.textDirection() === 'rtl') ? 'fr' : 'fl'))
-            .html(t('help.field.' + fieldName + '.title'));
+            .html(t.html('help.field.' + fieldName + '.title'));
 
         titleEnter
             .append('button')

modules/ui/fields/access.js

@@ -40,7 +40,7 @@ export function uiFieldAccess(field, context) {
             .append('span')
             .attr('class', 'label preset-label-access')
             .attr('for', function(d) { return 'preset-input-access-' + d; })
-            .html(function(d) { return field.t('types.' + d); });
+            .html(function(d) { return field.t.html('types.' + d); });
 
         enter
             .append('div')
@@ -217,7 +217,7 @@ export function uiFieldAccess(field, context) {
             })
             .attr('placeholder', function(d) {
                 if (tags[d] && Array.isArray(tags[d])) {
-                    return t('inspector.multiple_values', { html: false });
+                    return t('inspector.multiple_values');
                 }
                 if (d === 'access') {
                     return 'yes';

modules/ui/fields/address.js

@@ -274,12 +274,12 @@ export function uiFieldAddress(field, context) {
     function updatePlaceholder(inputSelection) {
         return inputSelection.attr('placeholder', function(subfield) {
             if (_tags && Array.isArray(_tags[field.key + ':' + subfield.id])) {
-                return t('inspector.multiple_values', { html: false });
+                return t('inspector.multiple_values');
             }
             if (_countryCode) {
                 var localkey = subfield.id + '!' + _countryCode;
                 var tkey = addrField.strings.placeholders[localkey] ? localkey : subfield.id;
-                return addrField.t('placeholders.' + tkey, { html: false });
+                return addrField.t('placeholders.' + tkey);
             }
         });
     }

modules/ui/fields/check.js

@@ -83,7 +83,7 @@ export function uiFieldCheck(field, context) {
         var icon = pseudoDirection ? '#iD-icon-forward' : '#iD-icon-backward';
 
         selection.selectAll('.reverser-span')
-            .html(t('inspector.check.reverser'))
+            .html(t.html('inspector.check.reverser'))
             .call(svgIcon(icon, 'inline'));
 
         return selection;
@@ -212,7 +212,7 @@ export function uiFieldCheck(field, context) {
             .property('checked', isChecked(_value));
 
         text
-            .html(isMixed ? t('inspector.multiple_values') : textFor(_value))
+            .html(isMixed ? t.html('inspector.multiple_values') : textFor(_value))
             .classed('mixed', isMixed);
 
         label

modules/ui/fields/combo.js

@@ -147,7 +147,7 @@ export function uiFieldCombo(field, context) {
 
         if (_optstrings) {
             _comboData = Object.keys(_optstrings).map(function(k) {
-                var v = field.t('options.' + k, { 'default': _optstrings[k], html: false });
+                var v = field.t('options.' + k, { 'default': _optstrings[k] });
                 return {
                     key: k,
                     value: v,
@@ -240,7 +240,7 @@ export function uiFieldCombo(field, context) {
     function setPlaceholder(values) {
 
         if (_isMulti || _isSemi) {
-            _staticPlaceholder = field.placeholder() || t('inspector.add', { html: false });
+            _staticPlaceholder = field.placeholder() || t('inspector.add');
         } else {
             var vals = values
                 .map(function(d) { return d.value; })
@@ -256,7 +256,7 @@ export function uiFieldCombo(field, context) {
 
         var ph;
         if (!_isMulti && !_isSemi && _tags && Array.isArray(_tags[field.key])) {
-            ph = t('inspector.multiple_values', { html: false });
+            ph = t('inspector.multiple_values');
         } else {
             ph =  _staticPlaceholder;
         }
@@ -530,7 +530,7 @@ export function uiFieldCombo(field, context) {
                     return d.isMixed;
                 })
                 .attr('title', function(d) {
-                    return d.isMixed ? t('inspector.unshared_value_tooltip', { html: false }) : null;
+                    return d.isMixed ? t('inspector.unshared_value_tooltip') : null;
                 });
 
             if (allowDragAndDrop) {
@@ -554,7 +554,7 @@ export function uiFieldCombo(field, context) {
 
             utilGetSetValue(_input, !isMixed ? displayValue(tags[field.key]) : '')
                 .attr('title', isMixed ? mixedValues.join('\n') : undefined)
-                .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : _staticPlaceholder || '')
+                .attr('placeholder', isMixed ? t('inspector.multiple_values') : _staticPlaceholder || '')
                 .classed('mixed', isMixed);
         }
     };

modules/ui/fields/cycleway.js

@@ -49,7 +49,7 @@ export function uiFieldCycleway(field, context) {
             .append('span')
             .attr('class', 'label preset-label-cycleway')
             .attr('for', function(d) { return 'preset-input-cycleway-' + stripcolon(d); })
-            .html(function(d) { return field.t('types.' + d); });
+            .html(function(d) { return field.t.html('types.' + d); });
 
         enter
             .append('div')
@@ -149,7 +149,7 @@ export function uiFieldCycleway(field, context) {
             })
             .attr('placeholder', function(d) {
                 if (Array.isArray(tags.cycleway) || Array.isArray(tags[d])) {
-                    return t('inspector.multiple_values', { html: false });
+                    return t('inspector.multiple_values');
                 }
                 return field.placeholder();
             })

modules/ui/fields/input.js

@@ -111,7 +111,7 @@ export function uiFieldText(field, context) {
                     var domainResults = /^https?:\/\/(.{1,}?)\//.exec(field.urlFormat);
                     if (domainResults.length >= 2 && domainResults[1]) {
                         var domain = domainResults[1];
-                        return t('icons.view_on', { domain: domain, html: false });
+                        return t('icons.view_on', { domain: domain });
                     }
                     return '';
                 })
@@ -200,7 +200,7 @@ export function uiFieldText(field, context) {
 
         utilGetSetValue(input, !isMixed && tags[field.key] ? tags[field.key] : '')
             .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined)
-            .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : (field.placeholder() || t('inspector.unknown', { html: false })))
+            .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
 
         if (outlinkButton && !outlinkButton.empty()) {

modules/ui/fields/localized.js

@@ -512,7 +512,7 @@ export function uiFieldLocalized(field, context) {
                 text
                     .append('span')
                     .attr('class', 'label-textvalue')
-                    .html(t('translate.localized_translation_label'));
+                    .html(t.html('translate.localized_translation_label'));
 
                 text
                     .append('span')
@@ -543,7 +543,7 @@ export function uiFieldLocalized(field, context) {
                     .attr('class', 'localized-lang')
                     .attr('id', domId)
                     .attr('type', 'text')
-                    .attr('placeholder', t('translate.localized_translation_language', { html: false }))
+                    .attr('placeholder', t('translate.localized_translation_language'))
                     .on('blur', changeLang)
                     .on('change', changeLang)
                     .call(langCombo);
@@ -590,7 +590,7 @@ export function uiFieldLocalized(field, context) {
                 return Array.isArray(d.value) ? d.value.filter(Boolean).join('\n') : null;
             })
             .attr('placeholder', function(d) {
-                return Array.isArray(d.value) ? t('inspector.multiple_values', { html: false }) : t('translate.localized_translation_name', { html: false });
+                return Array.isArray(d.value) ? t('inspector.multiple_values') : t('translate.localized_translation_name');
             })
             .classed('mixed', function(d) {
                 return Array.isArray(d.value);
@@ -617,7 +617,7 @@ export function uiFieldLocalized(field, context) {
 
         utilGetSetValue(input, typeof tags[field.key] === 'string' ? tags[field.key] : '')
             .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined)
-            .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : field.placeholder())
+            .attr('placeholder', isMixed ? t('inspector.multiple_values') : field.placeholder())
             .classed('mixed', isMixed);
 
         calcMultilingual(tags);

modules/ui/fields/maxspeed.js

@@ -129,7 +129,7 @@ export function uiFieldMaxspeed(field, context) {
 
         utilGetSetValue(input, typeof value === 'string' ? value : '')
             .attr('title', isMixed ? value.filter(Boolean).join('\n') : null)
-            .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : field.placeholder())
+            .attr('placeholder', isMixed ? t('inspector.multiple_values') : field.placeholder())
             .classed('mixed', isMixed);
     };
 

modules/ui/fields/radio.js

@@ -59,12 +59,12 @@ export function uiFieldRadio(field, context) {
             .append('input')
             .attr('type', 'radio')
             .attr('name', field.id)
-            .attr('value', function(d) { return field.t('options.' + d, { 'default': d, html: false }); })
+            .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); })
             .attr('checked', false);
 
         enter
             .append('span')
-            .html(function(d) { return field.t('options.' + d, { 'default': d }); });
+            .html(function(d) { return field.t.html('options.' + d, { 'default': d }); });
 
         labels = labels
             .merge(enter);
@@ -129,7 +129,7 @@ export function uiFieldRadio(field, context) {
             .append('span')
             .attr('class', 'label structure-label-type')
             .attr('for', 'preset-input-' + selected)
-            .html(t('inspector.radio.structure.type'));
+            .html(t.html('inspector.radio.structure.type'));
 
         typeEnter
             .append('div')
@@ -174,7 +174,7 @@ export function uiFieldRadio(field, context) {
             .append('span')
             .attr('class', 'label structure-label-layer')
             .attr('for', 'preset-input-layer')
-            .html(t('inspector.radio.structure.layer'));
+            .html(t.html('inspector.radio.structure.layer'));
 
         layerEnter
             .append('div')
@@ -290,14 +290,14 @@ export function uiFieldRadio(field, context) {
             })
             .classed('mixed', isMixed)
             .attr('title', function(d) {
-                return isMixed(d) ? t('inspector.unshared_value_tooltip', { html: false }) : null;
+                return isMixed(d) ? t('inspector.unshared_value_tooltip') : null;
             });
 
 
         var selection = radios.filter(function() { return this.checked; });
 
         if (selection.empty()) {
-            placeholder.html(t('inspector.none'));
+            placeholder.html(t.html('inspector.none'));
         } else {
             placeholder.html(selection.attr('value'));
             _oldType[selection.datum()] = tags[selection.datum()];

modules/ui/fields/restrictions.js

@@ -124,7 +124,7 @@ export function uiFieldRestrictions(field, context) {
         distControlEnter
             .append('span')
             .attr('class', 'restriction-control-label restriction-distance-label')
-            .html(t('restriction.controls.distance') + ':');
+            .html(t.html('restriction.controls.distance') + ':');
 
         distControlEnter
             .append('input')
@@ -167,7 +167,7 @@ export function uiFieldRestrictions(field, context) {
         viaControlEnter
             .append('span')
             .attr('class', 'restriction-control-label restriction-via-way-label')
-            .html(t('restriction.controls.via') + ':');
+            .html(t.html('restriction.controls.via') + ':');
 
         viaControlEnter
             .append('input')
@@ -487,7 +487,7 @@ export function uiFieldRestrictions(field, context) {
                 var clickSelect = (!_fromWayID || _fromWayID !== way.id);
                 help
                     .append('div')      // "Click to select FROM {fromName}." / "FROM {fromName}"
-                    .html(t('restriction.help.' + (clickSelect ? 'select_from_name' : 'from_name'), {
+                    .html(t.html('restriction.help.' + (clickSelect ? 'select_from_name' : 'from_name'), {
                         from: placeholders.from,
                         fromName: displayName(way.id, vgraph)
                     }));
@@ -521,7 +521,7 @@ export function uiFieldRestrictions(field, context) {
 
                 help
                     .append('div')      // "FROM {fromName} TO {toName}"
-                    .html(t('restriction.help.from_name_to_name', {
+                    .html(t.html('restriction.help.from_name_to_name', {
                         from: placeholders.from,
                         fromName: displayName(datum.from.way, vgraph),
                         to: placeholders.to,
@@ -539,7 +539,7 @@ export function uiFieldRestrictions(field, context) {
 
                     help
                         .append('div')      // "VIA {viaNames}"
-                        .html(t('restriction.help.via_names', {
+                        .html(t.html('restriction.help.via_names', {
                             via: placeholders.via,
                             viaNames: names.join(', ')
                         }));
@@ -548,7 +548,7 @@ export function uiFieldRestrictions(field, context) {
                 if (!indirect) {
                     help
                         .append('div')      // Click for "No Right Turn"
-                        .html(t('restriction.help.toggle', { turn: nextText.trim() }));
+                        .html(t.html('restriction.help.toggle', { turn: nextText.trim() }));
                 }
 
                 highlightPathsFrom(null);
@@ -566,7 +566,7 @@ export function uiFieldRestrictions(field, context) {
                 if (_fromWayID) {
                     help
                         .append('div')      // "FROM {fromName}"
-                        .html(t('restriction.help.from_name', {
+                        .html(t.html('restriction.help.from_name', {
                             from: placeholders.from,
                             fromName: displayName(_fromWayID, vgraph)
                         }));
@@ -574,7 +574,7 @@ export function uiFieldRestrictions(field, context) {
                 } else {
                     help
                         .append('div')      // "Click to select a FROM segment."
-                        .html(t('restriction.help.select_from', {
+                        .html(t.html('restriction.help.select_from', {
                             from: placeholders.from
                         }));
                 }

modules/ui/fields/textarea.js

@@ -61,7 +61,7 @@ export function uiFieldTextarea(field, context) {
 
         utilGetSetValue(input, !isMixed && tags[field.key] ? tags[field.key] : '')
             .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : undefined)
-            .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : (field.placeholder() || t('inspector.unknown', { html: false })))
+            .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
     };
 

modules/ui/fields/wikidata.js

@@ -93,7 +93,7 @@ export function uiFieldWikidata(field, context) {
         searchRowEnter
             .append('button')
             .attr('class', 'form-field-button wiki-link')
-            .attr('title', t('icons.view_on', { domain: 'wikidata.org', html: false }))
+            .attr('title', t('icons.view_on', { domain: 'wikidata.org' }))
             .call(svgIcon('#iD-icon-out-link'))
             .on('click', function() {
                 d3_event.preventDefault();
@@ -117,7 +117,7 @@ export function uiFieldWikidata(field, context) {
         enter
             .append('span')
             .attr('class', 'label')
-            .html(function(d) { return t('wikidata.' + d); });
+            .html(function(d) { return t.html('wikidata.' + d); });
 
         enter
             .append('input')
@@ -129,7 +129,7 @@ export function uiFieldWikidata(field, context) {
         enter
             .append('button')
             .attr('class', 'form-field-button')
-            .attr('title', t('icons.copy', { html: false }))
+            .attr('title', t('icons.copy'))
             .call(svgIcon('#iD-operation-copy'))
             .on('click', function() {
                 d3_event.preventDefault();
@@ -290,7 +290,7 @@ export function uiFieldWikidata(field, context) {
         var isMixed = Array.isArray(tags[field.key]);
         _searchInput
             .attr('title', isMixed ? tags[field.key].filter(Boolean).join('\n') : null)
-            .attr('placeholder', isMixed ? t('inspector.multiple_values', { html: false }) : '')
+            .attr('placeholder', isMixed ? t('inspector.multiple_values') : '')
             .classed('mixed', isMixed);
 
         _qid = typeof tags[field.key] === 'string' && tags[field.key] || '';

modules/ui/fields/wikipedia.js

@@ -87,7 +87,7 @@ export function uiFieldWikipedia(field, context) {
       .append('input')
       .attr('type', 'text')
       .attr('class', 'wiki-lang')
-      .attr('placeholder', t('translate.localized_translation_language', { html: false }))
+      .attr('placeholder', t('translate.localized_translation_language'))
       .call(utilNoAuto)
       .call(langCombo)
       .merge(_langInput);
@@ -128,7 +128,7 @@ export function uiFieldWikipedia(field, context) {
     link = link.enter()
       .append('button')
       .attr('class', 'form-field-button wiki-link')
-      .attr('title', t('icons.view_on', { domain: 'wikipedia.org', html: false }))
+      .attr('title', t('icons.view_on', { domain: 'wikipedia.org' }))
       .call(svgIcon('#iD-icon-out-link'))
       .merge(link);
 

modules/ui/form_fields.js

@@ -83,7 +83,7 @@ export function uiFormFields(context) {
 
         moreEnter
             .append('span')
-            .html(t('inspector.add_fields'));
+            .html(t.html('inspector.add_fields'));
 
         more = moreEnter
             .merge(more);

modules/ui/full_screen.js

@@ -64,7 +64,7 @@ export function uiFullScreen(context) {
         if (!isSupported()) return;
 
         // button = selection.append('button')
-        //     .attr('title', t('full_screen', { html: false }))
+        //     .attr('title', t('full_screen'))
         //     .on('click', fullScreen)
         //     .call(tooltip);
 

modules/ui/geolocate.js

@@ -62,7 +62,7 @@ export function uiGeolocate(context) {
             zoomTo();
         } else {
             context.ui().flash
-                .html(t('geolocate.location_unavailable'))
+                .html(t.html('geolocate.location_unavailable'))
                 .iconName('#iD-icon-geolocate')();
         }
 
@@ -92,6 +92,6 @@ export function uiGeolocate(context) {
                 .keys([t('geolocate.key')])
             );
 
-        context.keybinding().on(t('geolocate.key', { html: false }), click);
+        context.keybinding().on(t('geolocate.key'), click);
     };
 }

modules/ui/improveOSM_comments.js

@@ -61,7 +61,7 @@ export function uiImproveOsmComments() {
         metadataEnter
           .append('div')
             .attr('class', 'comment-date')
-            .html(d => t('note.status.commented', { when: localeDateString(d.timestamp) }));
+            .html(d => t.html('note.status.commented', { when: localeDateString(d.timestamp) }));
 
         mainEnter
           .append('div')

modules/ui/improveOSM_details.js

@@ -43,7 +43,7 @@ export function uiImproveOsmDetails(context) {
 
     descriptionEnter
       .append('h4')
-        .html(() => t('QA.keepRight.detail_description'));
+        .html(t.html('QA.keepRight.detail_description'));
 
     descriptionEnter
       .append('div')

modules/ui/improveOSM_editor.js

@@ -36,7 +36,7 @@ export function uiImproveOsmEditor(context) {
 
     headerEnter
       .append('h3')
-        .html(t('QA.improveOSM.title'));
+        .html(t.html('QA.improveOSM.title'));
 
     let body = selection.selectAll('.body')
       .data([0]);
@@ -80,12 +80,12 @@ export function uiImproveOsmEditor(context) {
     saveSectionEnter
       .append('h4')
         .attr('class', '.qa-save-header')
-        .html(t('note.newComment'));
+        .html(t.html('note.newComment'));
 
     saveSectionEnter
       .append('textarea')
         .attr('class', 'new-comment-input')
-        .attr('placeholder', t('QA.keepRight.comment_placeholder', { html: false }))
+        .attr('placeholder', t('QA.keepRight.comment_placeholder'))
         .attr('maxlength', 1000)
         .property('value', d => d.newComment)
         .call(utilNoAuto)
@@ -135,7 +135,7 @@ export function uiImproveOsmEditor(context) {
     buttonEnter
       .append('button')
         .attr('class', 'button comment-button action')
-        .html(t('QA.keepRight.save_comment'));
+        .html(t.html('QA.keepRight.save_comment'));
 
     buttonEnter
       .append('button')

modules/ui/info.js

@@ -123,10 +123,10 @@ export function uiInfo(context) {
         redraw();
 
         context.keybinding()
-            .on(uiCmd('⌘' + t('info_panels.key', { html: false })), info.toggle);
+            .on(uiCmd('⌘' + t('info_panels.key')), info.toggle);
 
         ids.forEach(function(k) {
-            var key = t('info_panels.' + k + '.key', { default: null, html: false });
+            var key = t('info_panels.' + k + '.key', { default: null });
             if (!key) return;
             context.keybinding()
                 .on(uiCmd('⌘⇧' + key), function() { info.toggle(k); });

modules/ui/init.js

@@ -127,7 +127,7 @@ export function uiInit(context) {
 
         map
             .on('hitMinZoom.ui', function() {
-                ui.flash.html(t('cannot_zoom'))();
+                ui.flash.html(t.html('cannot_zoom'))();
             });
 
         container
@@ -348,7 +348,7 @@ export function uiInit(context) {
         var panPixels = 80;
         context.keybinding()
             .on('⌫', function() { d3_event.preventDefault(); })
-            .on([t('sidebar.key', { html: false }), '`', '²', '@'], ui.sidebar.toggle)   // #5663, #6864 - common QWERTY, AZERTY
+            .on([t('sidebar.key'), '`', '²', '@'], ui.sidebar.toggle)   // #5663, #6864 - common QWERTY, AZERTY
             .on('←', pan([panPixels, 0]))
             .on('↑', pan([0, panPixels]))
             .on('→', pan([-panPixels, 0]))
@@ -357,7 +357,7 @@ export function uiInit(context) {
             .on(uiCmd('⌥↑'), pan([0, map.dimensions()[1]]))
             .on(uiCmd('⌥→'), pan([-map.dimensions()[0], 0]))
             .on(uiCmd('⌥↓'), pan([0, -map.dimensions()[1]]))
-            .on(uiCmd('⌘' + t('background.key', { html: false })), function quickSwitch() {
+            .on(uiCmd('⌘' + t('background.key')), function quickSwitch() {
                 if (d3_event) {
                     d3_event.stopImmediatePropagation();
                     d3_event.preventDefault();
@@ -370,12 +370,12 @@ export function uiInit(context) {
                     context.background().baseLayerSource(previousBackground);
                 }
             })
-            .on(t('area_fill.wireframe.key', { html: false }), function toggleWireframe() {
+            .on(t('area_fill.wireframe.key'), function toggleWireframe() {
                 d3_event.preventDefault();
                 d3_event.stopPropagation();
                 context.map().toggleWireframe();
             })
-            .on(uiCmd('⌥' + t('area_fill.wireframe.key', { html: false })), function toggleOsmData() {
+            .on(uiCmd('⌥' + t('area_fill.wireframe.key')), function toggleOsmData() {
                 d3_event.preventDefault();
                 d3_event.stopPropagation();
 
@@ -391,7 +391,7 @@ export function uiInit(context) {
                     }
                 }
             })
-            .on(t('map_data.highlight_edits.key', { html: false }), function toggleHighlightEdited() {
+            .on(t('map_data.highlight_edits.key'), function toggleHighlightEdited() {
                 d3_event.preventDefault();
                 context.map().toggleHighlightEdited();
             });

modules/ui/intro/area.js

@@ -13,7 +13,7 @@ import { t } from '../../core/localizer';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { helpString, icon, pad, transitionTime } from './helper';
+import { helpHtml, icon, pad, transitionTime } from './helper';
 
 
 export function uiIntroArea(context, reveal) {
@@ -60,7 +60,7 @@ export function uiIntroArea(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-area',
-                helpString('intro.areas.add_playground'));
+                helpHtml('intro.areas.add_playground'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -91,7 +91,7 @@ export function uiIntroArea(context, reveal) {
 
         timeout(function() {
             var textId = context.lastPointerType() === 'mouse' ? 'starting_node_click' : 'starting_node_tap';
-            var startDrawString = helpString('intro.areas.start_playground') + helpString('intro.areas.' + textId);
+            var startDrawString = helpHtml('intro.areas.start_playground') + helpHtml('intro.areas.' + textId);
             revealPlayground(playground,
                 startDrawString, { duration: 250 }
             );
@@ -125,14 +125,14 @@ export function uiIntroArea(context, reveal) {
 
         _areaID = null;
         revealPlayground(playground,
-            helpString('intro.areas.continue_playground'),
+            helpHtml('intro.areas.continue_playground'),
             { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    helpString('intro.areas.continue_playground'),
+                    helpHtml('intro.areas.continue_playground'),
                     { duration: 0 }
                 );
             });
@@ -169,8 +169,8 @@ export function uiIntroArea(context, reveal) {
 
         _areaID = null;
 
-        var finishString = helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
-            helpString('intro.areas.finish_playground');
+        var finishString = helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpHtml('intro.areas.finish_playground');
         revealPlayground(playground,
             finishString, { duration: 250 }
         );
@@ -223,7 +223,7 @@ export function uiIntroArea(context, reveal) {
                 .on('keyup.intro', checkPresetSearch);
 
             reveal('.preset-search-input',
-                helpString('intro.areas.search_playground', { preset: playgroundPreset.name() })
+                helpHtml('intro.areas.search_playground', { preset: playgroundPreset.name() })
             );
         }, 400);  // after preset list pane visible..
 
@@ -247,7 +247,7 @@ export function uiIntroArea(context, reveal) {
                     .on('keyup.intro', checkPresetSearch);
 
                 reveal('.preset-search-input',
-                    helpString('intro.areas.search_playground', { preset: playgroundPreset.name() })
+                    helpHtml('intro.areas.search_playground', { preset: playgroundPreset.name() })
                 );
 
                 context.history().on('change.intro', null);
@@ -259,7 +259,7 @@ export function uiIntroArea(context, reveal) {
 
             if (first.classed('preset-leisure-playground')) {
                 reveal(first.select('.preset-list-button').node(),
-                    helpString('intro.areas.choose_playground', { preset: playgroundPreset.name() }),
+                    helpHtml('intro.areas.choose_playground', { preset: playgroundPreset.name() }),
                     { duration: 300 }
                 );
 
@@ -331,7 +331,7 @@ export function uiIntroArea(context, reveal) {
 
             timeout(function() {
                 reveal('.more-fields .combobox-input',
-                    helpString('intro.areas.add_field', {
+                    helpHtml('intro.areas.add_field', {
                         name: nameField.label(),
                         description: descriptionField.label()
                     }),
@@ -399,7 +399,7 @@ export function uiIntroArea(context, reveal) {
         }, 300);
 
         reveal('div.combobox',
-            helpString('intro.areas.choose_field', { field: descriptionField.label() }),
+            helpHtml('intro.areas.choose_field', { field: descriptionField.label() }),
             { duration: 300 }
         );
 
@@ -436,7 +436,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'inline') }),
+            helpHtml('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'inline') }),
             { duration: 300 }
         );
 
@@ -460,8 +460,8 @@ export function uiIntroArea(context, reveal) {
         context.container().select('.inspector-wrap .panewrap').style('right', '0%');
 
         reveal('.entity-editor-pane',
-            helpString('intro.areas.retry_add_field', { field: descriptionField.label() }), {
-            buttonText: t('intro.ok'),
+            helpHtml('intro.areas.retry_add_field', { field: descriptionField.label() }), {
+            buttonText: t.html('intro.ok'),
             buttonCallback: function() { continueTo(clickAddField); }
         });
 
@@ -479,9 +479,9 @@ export function uiIntroArea(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            helpString('intro.areas.play', { next: t('intro.lines.title') }), {
+            helpHtml('intro.areas.play', { next: t('intro.lines.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-line',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
             }
         );

modules/ui/intro/building.js

@@ -9,7 +9,7 @@ import { t } from '../../core/localizer';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilArrayUniq, utilRebind } from '../../util';
-import { helpString, icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
+import { helpHtml, icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroBuilding(context, reveal) {
@@ -65,7 +65,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-area',
-                helpString('intro.buildings.add_building'));
+                helpHtml('intro.buildings.add_building'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -95,8 +95,8 @@ export function uiIntroBuilding(context, reveal) {
         context.map().zoomEase(20, 500);
 
         timeout(function() {
-            var startString = helpString('intro.buildings.start_building') +
-                helpString('intro.buildings.building_corner_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
+            var startString = helpHtml('intro.buildings.start_building') +
+                helpHtml('intro.buildings.building_corner_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
             revealHouse(house, startString);
 
             context.map().on('move.intro drawn.intro', function() {
@@ -125,9 +125,9 @@ export function uiIntroBuilding(context, reveal) {
 
         _houseID = null;
 
-        var continueString = helpString('intro.buildings.continue_building') + '{br}' +
-            helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
-            helpString('intro.buildings.finish_building');
+        var continueString = helpHtml('intro.buildings.continue_building') + '{br}' +
+            helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpHtml('intro.buildings.finish_building');
 
         revealHouse(house, continueString);
 
@@ -168,13 +168,13 @@ export function uiIntroBuilding(context, reveal) {
     function retryHouse() {
         var onClick = function() { continueTo(addHouse); };
 
-        revealHouse(house, helpString('intro.buildings.retry_building'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+        revealHouse(house, helpHtml('intro.buildings.retry_building'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, helpString('intro.buildings.retry_building'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+            revealHouse(house, helpHtml('intro.buildings.retry_building'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
             );
         });
 
@@ -204,7 +204,7 @@ export function uiIntroBuilding(context, reveal) {
             var button = context.container().select('.preset-category-building .preset-list-button');
 
             reveal(button.node(),
-                helpString('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
+                helpHtml('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
             );
 
             button.on('click.intro', function() {
@@ -253,7 +253,7 @@ export function uiIntroBuilding(context, reveal) {
             var button = context.container().select('.preset-building-house .preset-list-button');
 
             reveal(button.node(),
-                helpString('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
+                helpHtml('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
                 { duration: 300 }
             );
 
@@ -300,7 +300,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
+                helpHtml('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
@@ -335,7 +335,7 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         context.map().on('move.intro drawn.intro', function() {
-            var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_building' : 'edit_menu_building_touch'));
+            var rightclickString = helpHtml('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_building' : 'edit_menu_building_touch'));
             revealHouse(house, rightclickString, { duration: 0 });
         });
 
@@ -363,7 +363,7 @@ export function uiIntroBuilding(context, reveal) {
         var wasChanged = false;
 
         reveal('.edit-menu',
-            helpString('intro.buildings.square_building'),
+            helpHtml('intro.buildings.square_building'),
             { padding: 50 }
         );
 
@@ -380,7 +380,7 @@ export function uiIntroBuilding(context, reveal) {
             if (!wasChanged && !node) { return continueTo(rightClickHouse); }
 
             reveal('.edit-menu',
-                helpString('intro.buildings.square_building'),
+                helpHtml('intro.buildings.square_building'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -411,8 +411,8 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickSquare() {
         context.enter(modeBrowse(context));
 
-        revealHouse(house, helpString('intro.buildings.retry_square'), {
-            buttonText: t('intro.ok'),
+        revealHouse(house, helpHtml('intro.buildings.retry_square'), {
+            buttonText: t.html('intro.ok'),
             buttonCallback: function() { continueTo(rightClickHouse); }
         });
 
@@ -425,8 +425,8 @@ export function uiIntroBuilding(context, reveal) {
     function doneSquare() {
         context.history().checkpoint('doneSquare');
 
-        revealHouse(house, helpString('intro.buildings.done_square'), {
-            buttonText: t('intro.ok'),
+        revealHouse(house, helpHtml('intro.buildings.done_square'), {
+            buttonText: t.html('intro.ok'),
             buttonCallback: function() { continueTo(addTank); }
         });
 
@@ -447,7 +447,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('button.add-area',
-                helpString('intro.buildings.add_tank')
+                helpHtml('intro.buildings.add_tank')
             );
 
             context.on('enter.intro', function(mode) {
@@ -471,8 +471,8 @@ export function uiIntroBuilding(context, reveal) {
         _tankID = null;
 
         timeout(function() {
-            var startString = helpString('intro.buildings.start_tank') +
-                helpString('intro.buildings.tank_edge_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
+            var startString = helpHtml('intro.buildings.start_tank') +
+                helpHtml('intro.buildings.tank_edge_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
             revealTank(tank, startString);
 
             context.map().on('move.intro drawn.intro', function() {
@@ -501,9 +501,9 @@ export function uiIntroBuilding(context, reveal) {
 
         _tankID = null;
 
-        var continueString = helpString('intro.buildings.continue_tank') + '{br}' +
-            helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
-            helpString('intro.buildings.finish_tank');
+        var continueString = helpHtml('intro.buildings.continue_tank') + '{br}' +
+            helpHtml('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpHtml('intro.buildings.finish_tank');
 
         revealTank(tank, continueString);
 
@@ -551,7 +551,7 @@ export function uiIntroBuilding(context, reveal) {
                 .on('keyup.intro', checkPresetSearch);
 
             reveal('.preset-search-input',
-                helpString('intro.buildings.search_tank', { preset: tankPreset.name() })
+                helpHtml('intro.buildings.search_tank', { preset: tankPreset.name() })
             );
         }, 400);  // after preset list pane visible..
 
@@ -575,7 +575,7 @@ export function uiIntroBuilding(context, reveal) {
                     .on('keyup.intro', checkPresetSearch);
 
                 reveal('.preset-search-input',
-                    helpString('intro.buildings.search_tank', { preset: tankPreset.name() })
+                    helpHtml('intro.buildings.search_tank', { preset: tankPreset.name() })
                 );
 
                 context.history().on('change.intro', null);
@@ -587,7 +587,7 @@ export function uiIntroBuilding(context, reveal) {
 
             if (first.classed('preset-man_made-storage_tank')) {
                 reveal(first.select('.preset-list-button').node(),
-                    helpString('intro.buildings.choose_tank', { preset: tankPreset.name() }),
+                    helpHtml('intro.buildings.choose_tank', { preset: tankPreset.name() }),
                     { duration: 300 }
                 );
 
@@ -628,7 +628,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
+                helpHtml('intro.buildings.close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
@@ -659,7 +659,7 @@ export function uiIntroBuilding(context, reveal) {
                 }, 50);  // after menu visible
             });
 
-            var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_tank' : 'edit_menu_tank_touch'));
+            var rightclickString = helpHtml('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_tank' : 'edit_menu_tank_touch'));
 
             revealTank(tank, rightclickString);
 
@@ -693,7 +693,7 @@ export function uiIntroBuilding(context, reveal) {
         var wasChanged = false;
 
         reveal('.edit-menu',
-            helpString('intro.buildings.circle_tank'),
+            helpHtml('intro.buildings.circle_tank'),
             { padding: 50 }
         );
 
@@ -710,7 +710,7 @@ export function uiIntroBuilding(context, reveal) {
             if (!wasChanged && !node) { return continueTo(rightClickTank); }
 
             reveal('.edit-menu',
-                helpString('intro.buildings.circle_tank'),
+                helpHtml('intro.buildings.circle_tank'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -741,8 +741,8 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickCircle() {
         context.enter(modeBrowse(context));
 
-        revealTank(tank, helpString('intro.buildings.retry_circle'), {
-            buttonText: t('intro.ok'),
+        revealTank(tank, helpHtml('intro.buildings.retry_circle'), {
+            buttonText: t.html('intro.ok'),
             buttonCallback: function() { continueTo(rightClickTank); }
         });
 
@@ -755,9 +755,9 @@ export function uiIntroBuilding(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            helpString('intro.buildings.play', { next: t('intro.startediting.title') }), {
+            helpHtml('intro.buildings.play', { next: t('intro.startediting.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-startEditing',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
             }
         );

modules/ui/intro/helper.js

@@ -44,10 +44,10 @@ export function icon(name, svgklass, useklass) {
 
 var helpStringReplacements;
 
-// Returns the localized string for `id` with a standardized set of icon, key, and
+// Returns the localized HTML element for `id` with a standardized set of icon, key, and
 // label replacements suitable for tutorials and documentation. Optionally supplemented
 // with custom `replacements`
-export function helpString(id, replacements) {
+export function helpHtml(id, replacements) {
     // only load these the first time
     if (!helpStringReplacements) helpStringReplacements = {
         // insert icons corresponding to various UI elements
@@ -84,40 +84,40 @@ export function helpString(id, replacements) {
         shift: uiCmd.display('⇧'),
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
-        esc: t('shortcuts.key.esc'),
-        space: t('shortcuts.key.space'),
-        add_note_key: t('modes.add_note.key', { html: false }),
-        help_key: t('help.key', { html: false }),
-        shortcuts_key: t('shortcuts.toggle.key', { html: false }),
+        esc: t.html('shortcuts.key.esc'),
+        space: t.html('shortcuts.key.space'),
+        add_note_key: t.html('modes.add_note.key'),
+        help_key: t.html('help.key'),
+        shortcuts_key: t.html('shortcuts.toggle.key'),
 
         // reference localized UI labels directly so that they'll always match
-        save: t('save.title'),
-        undo: t('undo.title'),
-        redo: t('redo.title'),
-        upload: t('commit.save'),
-        point: t('modes.add_point.title'),
-        line: t('modes.add_line.title'),
-        area: t('modes.add_area.title'),
-        note: t('modes.add_note.label'),
-        delete: t('operations.delete.title'),
-        move: t('operations.move.title'),
-        orthogonalize: t('operations.orthogonalize.title'),
-        circularize: t('operations.circularize.title'),
-        merge: t('operations.merge.title'),
-        disconnect: t('operations.disconnect.title'),
-        split: t('operations.split.title'),
-        map_data: t('map_data.title'),
-        osm_notes: t('map_data.layers.notes.title'),
-        fields: t('inspector.fields'),
-        tags: t('inspector.tags'),
-        relations: t('inspector.relations'),
-        new_relation: t('inspector.new_relation'),
-        turn_restrictions: t('presets.fields.restrictions.label'),
-        background_settings: t('background.description'),
-        imagery_offset: t('background.fix_misalignment'),
-        start_the_walkthrough: t('splash.walkthrough'),
-        help: t('help.title'),
-        ok: t('intro.ok')
+        save: t.html('save.title'),
+        undo: t.html('undo.title'),
+        redo: t.html('redo.title'),
+        upload: t.html('commit.save'),
+        point: t.html('modes.add_point.title'),
+        line: t.html('modes.add_line.title'),
+        area: t.html('modes.add_area.title'),
+        note: t.html('modes.add_note.label'),
+        delete: t.html('operations.delete.title'),
+        move: t.html('operations.move.title'),
+        orthogonalize: t.html('operations.orthogonalize.title'),
+        circularize: t.html('operations.circularize.title'),
+        merge: t.html('operations.merge.title'),
+        disconnect: t.html('operations.disconnect.title'),
+        split: t.html('operations.split.title'),
+        map_data: t.html('map_data.title'),
+        osm_notes: t.html('map_data.layers.notes.title'),
+        fields: t.html('inspector.fields'),
+        tags: t.html('inspector.tags'),
+        relations: t.html('inspector.relations'),
+        new_relation: t.html('inspector.new_relation'),
+        turn_restrictions: t.html('presets.fields.restrictions.label'),
+        background_settings: t.html('background.description'),
+        imagery_offset: t.html('background.fix_misalignment'),
+        start_the_walkthrough: t.html('splash.walkthrough'),
+        help: t.html('help.title'),
+        ok: t.html('intro.ok')
     };
 
     var reps;
@@ -127,7 +127,7 @@ export function helpString(id, replacements) {
         reps = helpStringReplacements;
     }
 
-    return t(id, reps)
+    return t.html(id, reps)
          // use keyboard key styling for shortcuts
         .replace(/\`(.*?)\`/g, '<kbd>$1</kbd>');
 }

modules/ui/intro/intro.js

@@ -191,7 +191,7 @@ export function uiIntro(context) {
 
     buttons
       .append('span')
-      .html(d => t(d.title));
+      .html(d => t.html(d.title));
 
     buttons
       .append('span')

modules/ui/intro/line.js

@@ -11,7 +11,7 @@ import { geoSphericalDistance } from '../../geo';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { helpString, icon, pad, selectMenuItem, transitionTime } from './helper';
+import { helpHtml, icon, pad, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroLine(context, reveal) {
@@ -66,7 +66,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-line',
-                helpString('intro.lines.add_line'));
+                helpHtml('intro.lines.add_line'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -97,9 +97,9 @@ export function uiIntroLine(context, reveal) {
         box.height = box.height + 100;
 
         var textId = context.lastPointerType() === 'mouse' ? 'start_line' : 'start_line_tap';
-        var startLineString = helpString('intro.lines.missing_road') + '{br}' +
-            helpString('intro.lines.line_draw_info') +
-            helpString('intro.lines.' + textId);
+        var startLineString = helpHtml('intro.lines.missing_road') + '{br}' +
+            helpHtml('intro.lines.line_draw_info') +
+            helpHtml('intro.lines.' + textId);
         reveal(box, startLineString);
 
         context.map().on('move.intro drawn.intro', function() {
@@ -133,7 +133,7 @@ export function uiIntroLine(context, reveal) {
             var box = pad(tulipRoadMidpoint, padding, context);
             box.height = box.height * 2;
             reveal(box,
-                helpString('intro.lines.intersect', { name: t('intro.graph.name.flower-street') })
+                helpHtml('intro.lines.intersect', { name: t('intro.graph.name.flower-street') })
             );
 
             context.map().on('move.intro drawn.intro', function() {
@@ -141,7 +141,7 @@ export function uiIntroLine(context, reveal) {
                 box = pad(tulipRoadMidpoint, padding, context);
                 box.height = box.height * 2;
                 reveal(box,
-                    helpString('intro.lines.intersect', { name: t('intro.graph.name.flower-street') }),
+                    helpHtml('intro.lines.intersect', { name: t('intro.graph.name.flower-street') }),
                     { duration: 0 }
                 );
             });
@@ -191,7 +191,7 @@ export function uiIntroLine(context, reveal) {
 
         var box = pad(tulipRoadIntersection, 80, context);
         reveal(box,
-            helpString('intro.lines.retry_intersect', { name: t('intro.graph.name.flower-street') })
+            helpHtml('intro.lines.retry_intersect', { name: t('intro.graph.name.flower-street') })
         );
 
         timeout(chapter.restart, 3000);
@@ -205,9 +205,9 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerEase(tulipRoadIntersection, 500);
 
-        var continueLineText = helpString('intro.lines.continue_line') + '{br}' +
-            helpString('intro.lines.finish_line_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
-            helpString('intro.lines.finish_road');
+        var continueLineText = helpHtml('intro.lines.continue_line') + '{br}' +
+            helpHtml('intro.lines.finish_line_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpHtml('intro.lines.finish_road');
 
         reveal('.surface', continueLineText);
 
@@ -245,7 +245,7 @@ export function uiIntroLine(context, reveal) {
             context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
 
             reveal(button.node(),
-                helpString('intro.lines.choose_category_road', { category: roadCategory.name() })
+                helpHtml('intro.lines.choose_category_road', { category: roadCategory.name() })
             );
 
             button.on('click.intro', function() {
@@ -285,7 +285,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal(subgrid.node(),
-                helpString('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
+                helpHtml('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
                 { tooltipBox: '.preset-highway-residential .preset-list-button', duration: 300 }
             );
         }, 300);
@@ -313,7 +313,7 @@ export function uiIntroLine(context, reveal) {
             var button = context.container().select('.entity-editor-pane .preset-list-button');
 
             reveal(button.node(),
-                helpString('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
+                helpHtml('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
             );
 
             button.on('click.intro', function() {
@@ -338,7 +338,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'inline') }),
+                helpHtml('intro.lines.name_road', { button: icon('#iD-icon-close', 'inline') }),
                 { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);
@@ -354,8 +354,8 @@ export function uiIntroLine(context, reveal) {
         context.history().checkpoint('doneAddLine');
 
         timeout(function() {
-            reveal('.surface', helpString('intro.lines.did_name_road'), {
-                buttonText: t('intro.ok'),
+            reveal('.surface', helpHtml('intro.lines.did_name_road'), {
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { continueTo(updateLine); }
             });
         }, 500);
@@ -381,15 +381,15 @@ export function uiIntroLine(context, reveal) {
             var box = pad(woodRoadDragMidpoint, padding, context);
             var advance = function() { continueTo(addNode); };
 
-            reveal(box, helpString('intro.lines.update_line'),
-                { buttonText: t('intro.ok'), buttonCallback: advance }
+            reveal(box, helpHtml('intro.lines.update_line'),
+                { buttonText: t.html('intro.ok'), buttonCallback: advance }
             );
 
             context.map().on('move.intro drawn.intro', function() {
                 var padding = 250 * Math.pow(2, context.map().zoom() - 19);
                 var box = pad(woodRoadDragMidpoint, padding, context);
-                reveal(box, helpString('intro.lines.update_line'),
-                    { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
+                reveal(box, helpHtml('intro.lines.update_line'),
+                    { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: advance }
                 );
             });
         }, msec + 100);
@@ -409,7 +409,7 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 40 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadAddNode, padding, context);
-        var addNodeString = helpString('intro.lines.add_node' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
+        var addNodeString = helpHtml('intro.lines.add_node' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
         reveal(box, addNodeString);
 
         context.map().on('move.intro drawn.intro', function() {
@@ -448,8 +448,8 @@ export function uiIntroLine(context, reveal) {
         }
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        var startDragString = helpString('intro.lines.start_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')) +
-            helpString('intro.lines.drag_to_intersection');
+        var startDragString = helpHtml('intro.lines.start_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')) +
+            helpHtml('intro.lines.drag_to_intersection');
         reveal(box, startDragString);
 
         context.map().on('move.intro drawn.intro', function() {
@@ -480,8 +480,8 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        var finishDragString = helpString('intro.lines.spot_looks_good') +
-            helpString('intro.lines.finish_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
+        var finishDragString = helpHtml('intro.lines.spot_looks_good') +
+            helpHtml('intro.lines.finish_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
         reveal(box, finishDragString);
 
         context.map().on('move.intro drawn.intro', function() {
@@ -520,7 +520,7 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 80 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragMidpoint, padding, context);
-        reveal(box, helpString('intro.lines.start_drag_midpoint'));
+        reveal(box, helpHtml('intro.lines.start_drag_midpoint'));
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -528,7 +528,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 80 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragMidpoint, padding, context);
-            reveal(box, helpString('intro.lines.start_drag_midpoint'), { duration: 0 });
+            reveal(box, helpHtml('intro.lines.start_drag_midpoint'), { duration: 0 });
         });
 
         context.history().on('change.intro', function(changed) {
@@ -567,8 +567,8 @@ export function uiIntroLine(context, reveal) {
             continueTo(deleteLines);
         };
 
-        reveal(box, helpString('intro.lines.continue_drag_midpoint'),
-            { buttonText: t('intro.ok'), buttonCallback: advance }
+        reveal(box, helpHtml('intro.lines.continue_drag_midpoint'),
+            { buttonText: t.html('intro.ok'), buttonCallback: advance }
         );
 
         context.map().on('move.intro drawn.intro', function() {
@@ -578,8 +578,8 @@ export function uiIntroLine(context, reveal) {
             var padding = 100 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragEndpoint, padding, context);
             box.height += 400;
-            reveal(box, helpString('intro.lines.continue_drag_midpoint'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
+            reveal(box, helpHtml('intro.lines.continue_drag_midpoint'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: advance }
             );
         });
 
@@ -611,8 +611,8 @@ export function uiIntroLine(context, reveal) {
             box.height += 400;
             var advance = function() { continueTo(rightClickIntersection); };
 
-            reveal(box, helpString('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
-                { buttonText: t('intro.ok'), buttonCallback: advance }
+            reveal(box, helpHtml('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
+                { buttonText: t.html('intro.ok'), buttonCallback: advance }
             );
 
             context.map().on('move.intro drawn.intro', function() {
@@ -620,8 +620,8 @@ export function uiIntroLine(context, reveal) {
                 var box = pad(deleteLinesLoc, padding, context);
                 box.top -= 200;
                 box.height += 400;
-                reveal(box, helpString('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
-                    { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
+                reveal(box, helpHtml('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
+                    { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: advance }
                 );
             });
 
@@ -647,11 +647,11 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerZoomEase(eleventhAvenueEnd, 18, 500);
 
-        var rightClickString = helpString('intro.lines.split_street', {
+        var rightClickString = helpHtml('intro.lines.split_street', {
                 street1: t('intro.graph.name.11th-avenue'),
                 street2: t('intro.graph.name.washington-street')
             }) +
-            helpString('intro.lines.' + (context.lastPointerType() === 'mouse' ? 'rightclick_intersection' : 'edit_menu_intersection_touch'));
+            helpHtml('intro.lines.' + (context.lastPointerType() === 'mouse' ? 'rightclick_intersection' : 'edit_menu_intersection_touch'));
 
         timeout(function() {
             var padding = 60 * Math.pow(2, context.map().zoom() - 18);
@@ -708,7 +708,7 @@ export function uiIntroLine(context, reveal) {
         var wasChanged = false;
         _washingtonSegmentID = null;
 
-        reveal('.edit-menu', helpString('intro.lines.split_intersection',
+        reveal('.edit-menu', helpHtml('intro.lines.split_intersection',
             { street: t('intro.graph.name.washington-street') }),
             { padding: 50 }
         );
@@ -717,7 +717,7 @@ export function uiIntroLine(context, reveal) {
             var node = selectMenuItem(context, 'split').node();
             if (!wasChanged && !node) { return continueTo(rightClickIntersection); }
 
-            reveal('.edit-menu', helpString('intro.lines.split_intersection',
+            reveal('.edit-menu', helpHtml('intro.lines.split_intersection',
                 { street: t('intro.graph.name.washington-street') }),
                 { duration: 0, padding: 50 }
             );
@@ -751,15 +751,15 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 60 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(eleventhAvenueEnd, padding, context);
-        reveal(box, helpString('intro.lines.retry_split'),
-            { buttonText: t('intro.ok'), buttonCallback: advance }
+        reveal(box, helpHtml('intro.lines.retry_split'),
+            { buttonText: t.html('intro.ok'), buttonCallback: advance }
         );
 
         context.map().on('move.intro drawn.intro', function() {
             var padding = 60 * Math.pow(2, context.map().zoom() - 18);
             var box = pad(eleventhAvenueEnd, padding, context);
-            reveal(box, helpString('intro.lines.retry_split'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
+            reveal(box, helpHtml('intro.lines.retry_split'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: advance }
             );
         });
 
@@ -786,7 +786,7 @@ export function uiIntroLine(context, reveal) {
         var padding = 200 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(twelfthAvenue, padding, context);
         box.width = box.width / 2;
-        reveal(box, helpString(string, { street1: street, street2: street }),
+        reveal(box, helpHtml(string, { street1: street, street2: street }),
             { duration: 500 }
         );
 
@@ -797,7 +797,7 @@ export function uiIntroLine(context, reveal) {
                 var padding = 200 * Math.pow(2, context.map().zoom() - 18);
                 var box = pad(twelfthAvenue, padding, context);
                 box.width = box.width / 2;
-                reveal(box, helpString(string, { street1: street, street2: street }),
+                reveal(box, helpHtml(string, { street1: street, street2: street }),
                     { duration: 0 }
                 );
             });
@@ -867,9 +867,9 @@ export function uiIntroLine(context, reveal) {
             }
 
             reveal(box,
-                helpString('intro.lines.multi_select',
+                helpHtml('intro.lines.multi_select',
                     { selected: selected, other1: other }) + ' ' +
-                helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
+                helpHtml('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
                     { selected: selected, other2: other })
             );
 
@@ -889,9 +889,9 @@ export function uiIntroLine(context, reveal) {
                 }
 
                 reveal(box,
-                    helpString('intro.lines.multi_select',
+                    helpHtml('intro.lines.multi_select',
                         { selected: selected, other1: other }) + ' ' +
-                    helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
+                    helpHtml('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
                         { selected: selected, other2: other }),
                     { duration: 0 }
                 );
@@ -933,8 +933,8 @@ export function uiIntroLine(context, reveal) {
         var padding = 200 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(twelfthAvenue, padding, context);
 
-        var rightClickString = helpString('intro.lines.multi_select_success') +
-            helpString('intro.lines.multi_' + (context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch'));
+        var rightClickString = helpHtml('intro.lines.multi_select_success') +
+            helpHtml('intro.lines.multi_' + (context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch'));
         reveal(box, rightClickString);
 
         context.map().on('move.intro drawn.intro', function() {
@@ -995,13 +995,13 @@ export function uiIntroLine(context, reveal) {
         if (!node) return continueTo(multiRightClick);
 
         reveal('.edit-menu',
-            helpString('intro.lines.multi_delete'),
+            helpHtml('intro.lines.multi_delete'),
             { padding: 50 }
         );
 
         context.map().on('move.intro drawn.intro', function() {
             reveal('.edit-menu',
-                helpString('intro.lines.multi_delete'),
+                helpHtml('intro.lines.multi_delete'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -1034,8 +1034,8 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 200 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(twelfthAvenue, padding, context);
-        reveal(box, helpString('intro.lines.retry_delete'), {
-            buttonText: t('intro.ok'),
+        reveal(box, helpHtml('intro.lines.retry_delete'), {
+            buttonText: t.html('intro.ok'),
             buttonCallback: function() { continueTo(multiSelect); }
         });
 
@@ -1048,9 +1048,9 @@ export function uiIntroLine(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            helpString('intro.lines.play', { next: t('intro.buildings.title') }), {
+            helpHtml('intro.lines.play', { next: t('intro.buildings.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-building',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
             }
         );

modules/ui/intro/navigation.js

@@ -10,7 +10,7 @@ import { t } from '../../core/localizer';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { helpString, icon, pointBox, transitionTime } from './helper';
+import { helpHtml, icon, pointBox, transitionTime } from './helper';
 
 
 export function uiIntroNavigation(context, reveal) {
@@ -59,7 +59,7 @@ export function uiIntroNavigation(context, reveal) {
             var centerStart = context.map().center();
 
             var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch';
-            var dragString = helpString('intro.navigation.map_info') + '{br}' + helpString('intro.navigation.' + textId);
+            var dragString = helpHtml('intro.navigation.map_info') + '{br}' + helpHtml('intro.navigation.' + textId);
             reveal('.surface', dragString);
             context.map().on('drawn.intro', function() {
                 reveal('.surface', dragString, { duration: 0 });
@@ -86,7 +86,7 @@ export function uiIntroNavigation(context, reveal) {
         var zoomStart = context.map().zoom();
 
         var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch';
-        var zoomString = helpString('intro.navigation.' + textId);
+        var zoomString = helpHtml('intro.navigation.' + textId);
 
         reveal('.surface', zoomString);
 
@@ -111,13 +111,13 @@ export function uiIntroNavigation(context, reveal) {
     function features() {
         var onClick = function() { continueTo(pointsLinesAreas); };
 
-        reveal('.surface', helpString('intro.navigation.features'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+        reveal('.surface', helpHtml('intro.navigation.features'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', helpString('intro.navigation.features'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+            reveal('.surface', helpHtml('intro.navigation.features'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
             );
         });
 
@@ -130,13 +130,13 @@ export function uiIntroNavigation(context, reveal) {
     function pointsLinesAreas() {
         var onClick = function() { continueTo(nodesWays); };
 
-        reveal('.surface', helpString('intro.navigation.points_lines_areas'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+        reveal('.surface', helpHtml('intro.navigation.points_lines_areas'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', helpString('intro.navigation.points_lines_areas'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+            reveal('.surface', helpHtml('intro.navigation.points_lines_areas'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
             );
         });
 
@@ -149,13 +149,13 @@ export function uiIntroNavigation(context, reveal) {
     function nodesWays() {
         var onClick = function() { continueTo(clickTownHall); };
 
-        reveal('.surface', helpString('intro.navigation.nodes_ways'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+        reveal('.surface', helpHtml('intro.navigation.nodes_ways'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', helpString('intro.navigation.nodes_ways'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+            reveal('.surface', helpHtml('intro.navigation.nodes_ways'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
             );
         });
 
@@ -179,13 +179,13 @@ export function uiIntroNavigation(context, reveal) {
             if (!entity) return;
             var box = pointBox(entity.loc, context);
             var textId = context.lastPointerType() === 'mouse' ? 'click_townhall' : 'tap_townhall';
-            reveal(box, helpString('intro.navigation.' + textId));
+            reveal(box, helpHtml('intro.navigation.' + textId));
 
             context.map().on('move.intro drawn.intro', function() {
                 var entity = context.hasEntity(hallId);
                 if (!entity) return;
                 var box = pointBox(entity.loc, context);
-                reveal(box, helpString('intro.navigation.' + textId), { duration: 0 });
+                reveal(box, helpHtml('intro.navigation.' + textId), { duration: 0 });
             });
 
             context.on('enter.intro', function() {
@@ -218,16 +218,16 @@ export function uiIntroNavigation(context, reveal) {
         var box = pointBox(entity.loc, context);
         var onClick = function() { continueTo(editorTownHall); };
 
-        reveal(box, helpString('intro.navigation.selected_townhall'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+        reveal(box, helpHtml('intro.navigation.selected_townhall'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('move.intro drawn.intro', function() {
             var entity = context.hasEntity(hallId);
             if (!entity) return;
             var box = pointBox(entity.loc, context);
-            reveal(box, helpString('intro.navigation.selected_townhall'),
-                { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+            reveal(box, helpHtml('intro.navigation.selected_townhall'),
+                { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
             );
         });
 
@@ -254,8 +254,8 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(presetTownHall); };
 
         reveal('.entity-editor-pane',
-            helpString('intro.navigation.editor_townhall'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+            helpHtml('intro.navigation.editor_townhall'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.on('exit.intro', function() {
@@ -292,8 +292,8 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(fieldsTownHall); };
 
         reveal('.entity-editor-pane .section-feature-type',
-            helpString('intro.navigation.preset_townhall', { preset: preset.name() }),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+            helpHtml('intro.navigation.preset_townhall', { preset: preset.name() }),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.on('exit.intro', function() {
@@ -326,8 +326,8 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(closeTownHall); };
 
         reveal('.entity-editor-pane .section-preset-fields',
-            helpString('intro.navigation.fields_townhall'),
-            { buttonText: t('intro.ok'), buttonCallback: onClick }
+            helpHtml('intro.navigation.fields_townhall'),
+            { buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         context.on('exit.intro', function() {
@@ -356,7 +356,7 @@ export function uiIntroNavigation(context, reveal) {
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
-            helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') })
+            helpHtml('intro.navigation.close_townhall', { button: icon(href, 'inline') })
         );
 
         context.on('exit.intro', function() {
@@ -369,7 +369,7 @@ export function uiIntroNavigation(context, reveal) {
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
-                helpString('intro.navigation.close_townhall', { button: icon(href, 'inline') }),
+                helpHtml('intro.navigation.close_townhall', { button: icon(href, 'inline') }),
                 { duration: 0 }
             );
         });
@@ -392,7 +392,7 @@ export function uiIntroNavigation(context, reveal) {
 
         timeout(function() {
             reveal('.search-header input',
-                helpString('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
+                helpHtml('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
             );
 
             context.container().select('.search-header input')
@@ -408,7 +408,7 @@ export function uiIntroNavigation(context, reveal) {
 
         if (!firstName.empty() && firstName.html() === name) {
             reveal(first.node(),
-                helpString('intro.navigation.choose_street', { name: name }),
+                helpHtml('intro.navigation.choose_street', { name: name }),
                 { duration: 300 }
             );
 
@@ -442,8 +442,8 @@ export function uiIntroNavigation(context, reveal) {
         box.height = 500;
 
         reveal(box,
-            helpString('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
-            { duration: 600, buttonText: t('intro.ok'), buttonCallback: onClick }
+            helpHtml('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
+            { duration: 600, buttonText: t.html('intro.ok'), buttonCallback: onClick }
         );
 
         timeout(function() {
@@ -453,8 +453,8 @@ export function uiIntroNavigation(context, reveal) {
                 var box = pointBox(entity.loc, context);
                 box.height = 500;
                 reveal(box,
-                    helpString('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
-                    { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
+                    helpHtml('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
+                    { duration: 0, buttonText: t.html('intro.ok'), buttonCallback: onClick }
                 );
             });
         }, 600);  // after reveal.
@@ -491,8 +491,8 @@ export function uiIntroNavigation(context, reveal) {
         var selector = '.entity-editor-pane button.close svg use';
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
-        reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
-            helpString('intro.navigation.editor_street', {
+        reveal('.entity-editor-pane', helpHtml('intro.navigation.street_different_fields') + '{br}' +
+            helpHtml('intro.navigation.editor_street', {
                 button: icon(href, 'inline'),
                 field1: onewayField.label(),
                 field2: maxspeedField.label()
@@ -507,8 +507,8 @@ export function uiIntroNavigation(context, reveal) {
             var selector = '.entity-editor-pane button.close svg use';
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
-            reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
-                helpString('intro.navigation.editor_street', {
+            reveal('.entity-editor-pane', helpHtml('intro.navigation.street_different_fields') + '{br}' +
+                helpHtml('intro.navigation.editor_street', {
                     button: icon(href, 'inline'),
                     field1: onewayField.label(),
                     field2: maxspeedField.label()
@@ -527,9 +527,9 @@ export function uiIntroNavigation(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            helpString('intro.navigation.play', { next: t('intro.points.title') }), {
+            helpHtml('intro.navigation.play', { next: t('intro.points.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-point',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
             }
         );

modules/ui/intro/point.js

@@ -10,7 +10,7 @@ import { actionChangePreset } from '../../actions/change_preset';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { helpString, icon, pointBox, pad, selectMenuItem, transitionTime } from './helper';
+import { helpHtml, icon, pointBox, pad, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroPoint(context, reveal) {
@@ -48,7 +48,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-point',
-                helpString('intro.points.points_info') + '{br}' + helpString('intro.points.add_point'));
+                helpHtml('intro.points.points_info') + '{br}' + helpHtml('intro.points.add_point'));
 
             _pointID = null;
 
@@ -78,11 +78,11 @@ export function uiIntroPoint(context, reveal) {
 
         var pointBox = pad(building, 150, context);
         var textId = context.lastPointerType() === 'mouse' ? 'place_point' : 'place_point_touch';
-        reveal(pointBox, helpString('intro.points.' + textId));
+        reveal(pointBox, helpHtml('intro.points.' + textId));
 
         context.map().on('move.intro drawn.intro', function() {
             pointBox = pad(building, 150, context);
-            reveal(pointBox, helpString('intro.points.' + textId), { duration: 0 });
+            reveal(pointBox, helpHtml('intro.points.' + textId), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -112,7 +112,7 @@ export function uiIntroPoint(context, reveal) {
             .on('keyup.intro', checkPresetSearch);
 
         reveal('.preset-search-input',
-            helpString('intro.points.search_cafe', { preset: cafePreset.name() })
+            helpHtml('intro.points.search_cafe', { preset: cafePreset.name() })
         );
 
         context.on('enter.intro', function(mode) {
@@ -133,7 +133,7 @@ export function uiIntroPoint(context, reveal) {
                     .on('keyup.intro', checkPresetSearch);
 
                 reveal('.preset-search-input',
-                    helpString('intro.points.search_cafe', { preset: cafePreset.name() })
+                    helpHtml('intro.points.search_cafe', { preset: cafePreset.name() })
                 );
 
                 context.history().on('change.intro', null);
@@ -150,7 +150,7 @@ export function uiIntroPoint(context, reveal) {
                     .on('keyup.intro', null);
 
                 reveal(first.select('.preset-list-button').node(),
-                    helpString('intro.points.choose_cafe', { preset: cafePreset.name() }),
+                    helpHtml('intro.points.choose_cafe', { preset: cafePreset.name() }),
                     { duration: 300 }
                 );
 
@@ -176,9 +176,9 @@ export function uiIntroPoint(context, reveal) {
         }
 
         timeout(function() {
-            reveal('.entity-editor-pane', helpString('intro.points.feature_editor'), {
+            reveal('.entity-editor-pane', helpHtml('intro.points.feature_editor'), {
                 tooltipClass: 'intro-points-describe',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { continueTo(addName); }
             });
         }, 400);
@@ -203,7 +203,7 @@ export function uiIntroPoint(context, reveal) {
         // reset pane, in case user happened to change it..
         context.container().select('.inspector-wrap .panewrap').style('right', '0%');
 
-        var addNameString = helpString('intro.points.fields_info') + '{br}' + helpString('intro.points.add_name');
+        var addNameString = helpHtml('intro.points.fields_info') + '{br}' + helpHtml('intro.points.add_name');
 
         timeout(function() {
             // It's possible for the user to add a name in a previous step..
@@ -213,7 +213,7 @@ export function uiIntroPoint(context, reveal) {
             if (entity.tags.name) {
                 var tooltip = reveal('.entity-editor-pane', addNameString, {
                     tooltipClass: 'intro-points-describe',
-                    buttonText: t('intro.ok'),
+                    buttonText: t.html('intro.ok'),
                     buttonCallback: function() { continueTo(addCloseEditor); }
                 });
                 tooltip.select('.instruction').style('display', 'none');
@@ -254,7 +254,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.points.add_close', { button: icon(href, 'inline') })
+            helpHtml('intro.points.add_close', { button: icon(href, 'inline') })
         );
 
         function continueTo(nextStep) {
@@ -281,14 +281,14 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             var box = pointBox(entity.loc, context);
-            reveal(box, helpString('intro.points.reselect'), { duration: 600 });
+            reveal(box, helpHtml('intro.points.reselect'), { duration: 600 });
 
             timeout(function() {
                 context.map().on('move.intro drawn.intro', function() {
                     var entity = context.hasEntity(_pointID);
                     if (!entity) return chapter.restart();
                     var box = pointBox(entity.loc, context);
-                    reveal(box, helpString('intro.points.reselect'), { duration: 0 });
+                    reveal(box, helpHtml('intro.points.reselect'), { duration: 0 });
                 });
             }, 600); // after reveal..
 
@@ -324,7 +324,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         timeout(function() {
-            reveal('.entity-editor-pane', helpString('intro.points.update'),
+            reveal('.entity-editor-pane', helpHtml('intro.points.update'),
                 { tooltipClass: 'intro-points-describe' }
             );
         }, 400);
@@ -351,7 +351,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'inline') })
+                helpHtml('intro.points.update_close', { button: icon('#iD-icon-close', 'inline') })
             );
         }, 500);
 
@@ -371,14 +371,14 @@ export function uiIntroPoint(context, reveal) {
 
         var box = pointBox(entity.loc, context);
         var textId = context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch';
-        reveal(box, helpString('intro.points.' + textId), { duration: 600 });
+        reveal(box, helpHtml('intro.points.' + textId), { duration: 600 });
 
         timeout(function() {
             context.map().on('move.intro', function() {
                 var entity = context.hasEntity(_pointID);
                 if (!entity) return chapter.restart();
                 var box = pointBox(entity.loc, context);
-                reveal(box, helpString('intro.points.' + textId), { duration: 0 });
+                reveal(box, helpHtml('intro.points.' + textId), { duration: 0 });
             });
         }, 600); // after reveal
 
@@ -411,14 +411,14 @@ export function uiIntroPoint(context, reveal) {
         if (!node) { return continueTo(rightClickPoint); }
 
         reveal('.edit-menu',
-            helpString('intro.points.delete'),
+            helpHtml('intro.points.delete'),
             { padding: 50 }
         );
 
         timeout(function() {
             context.map().on('move.intro', function() {
                 reveal('.edit-menu',
-                    helpString('intro.points.delete'),
+                    helpHtml('intro.points.delete'),
                     { duration: 0,  padding: 50 }
                 );
             });
@@ -451,7 +451,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         reveal('.top-toolbar button.undo-button',
-            helpString('intro.points.undo')
+            helpHtml('intro.points.undo')
         );
 
         function continueTo(nextStep) {
@@ -464,9 +464,9 @@ export function uiIntroPoint(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            helpString('intro.points.play', { next: t('intro.areas.title') }), {
+            helpHtml('intro.points.play', { next: t('intro.areas.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-area',
-                buttonText: t('intro.ok'),
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
             }
         );

modules/ui/intro/start_editing.js

@@ -4,7 +4,7 @@ import {
 } from 'd3-selection';
 
 import { t } from '../../core/localizer';
-import { helpString } from './helper';
+import { helpHtml } from './helper';
 import { uiModal } from '../modal';
 import { utilRebind } from '../../util/rebind';
 
@@ -20,8 +20,8 @@ export function uiIntroStartEditing(context, reveal) {
 
     function showHelp() {
         reveal('.map-control.help-control',
-            helpString('intro.startediting.help'), {
-                buttonText: t('intro.ok'),
+            helpHtml('intro.startediting.help'), {
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { shortcuts(); }
             }
         );
@@ -29,8 +29,8 @@ export function uiIntroStartEditing(context, reveal) {
 
     function shortcuts() {
         reveal('.map-control.help-control',
-            helpString('intro.startediting.shortcuts'), {
-                buttonText: t('intro.ok'),
+            helpHtml('intro.startediting.shortcuts'), {
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { showSave(); }
             }
         );
@@ -39,8 +39,8 @@ export function uiIntroStartEditing(context, reveal) {
     function showSave() {
         context.container().selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
         reveal('.top-toolbar button.save',
-            helpString('intro.startediting.save'), {
-                buttonText: t('intro.ok'),
+            helpHtml('intro.startediting.save'), {
+                buttonText: t.html('intro.ok'),
                 buttonCallback: function() { showStart(); }
             }
         );
@@ -72,7 +72,7 @@ export function uiIntroStartEditing(context, reveal) {
 
             startbutton
                 .append('h2')
-                .html(t('intro.startediting.start'));
+                .html(t.html('intro.startediting.start'));
 
         dispatch.call('startEditing');
     }

modules/ui/intro/welcome.js

@@ -1,6 +1,6 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 
-import { helpString } from './helper';
+import { helpHtml } from './helper';
 import { t } from '../../core/localizer';
 import { utilRebind } from '../../util/rebind';
 
@@ -16,22 +16,22 @@ export function uiIntroWelcome(context, reveal) {
     function welcome() {
         context.map().centerZoom([-85.63591, 41.94285], 19);
         reveal('.intro-nav-wrap .chapter-welcome',
-            helpString('intro.welcome.welcome'),
-            { buttonText: t('intro.ok'), buttonCallback: practice }
+            helpHtml('intro.welcome.welcome'),
+            { buttonText: t.html('intro.ok'), buttonCallback: practice }
         );
     }
 
     function practice() {
         reveal('.intro-nav-wrap .chapter-welcome',
-            helpString('intro.welcome.practice'),
-            { buttonText: t('intro.ok'), buttonCallback: words }
+            helpHtml('intro.welcome.practice'),
+            { buttonText: t.html('intro.ok'), buttonCallback: words }
         );
     }
 
     function words() {
         reveal('.intro-nav-wrap .chapter-welcome',
-            helpString('intro.welcome.words'),
-            { buttonText: t('intro.ok'), buttonCallback: chapters }
+            helpHtml('intro.welcome.words'),
+            { buttonText: t.html('intro.ok'), buttonCallback: chapters }
         );
     }
 
@@ -39,7 +39,7 @@ export function uiIntroWelcome(context, reveal) {
     function chapters() {
         dispatch.call('done');
         reveal('.intro-nav-wrap .chapter-navigation',
-            helpString('intro.welcome.chapters', { next: t('intro.navigation.title') })
+            helpHtml('intro.welcome.chapters', { next: t('intro.navigation.title') })
         );
     }
 

modules/ui/keepRight_details.js

@@ -48,7 +48,7 @@ export function uiKeepRightDetails(context) {
 
     descriptionEnter
       .append('h4')
-        .html(() => t('QA.keepRight.detail_description'));
+        .html(t.html('QA.keepRight.detail_description'));
 
     descriptionEnter
       .append('div')

modules/ui/keepRight_editor.js

@@ -35,7 +35,7 @@ export function uiKeepRightEditor(context) {
 
     headerEnter
       .append('h3')
-        .html(t('QA.keepRight.title'));
+        .html(t.html('QA.keepRight.title'));
 
 
     let body = selection.selectAll('.body')
@@ -90,12 +90,12 @@ export function uiKeepRightEditor(context) {
     saveSectionEnter
       .append('h4')
         .attr('class', '.qa-save-header')
-        .html(t('QA.keepRight.comment'));
+        .html(t.html('QA.keepRight.comment'));
 
     saveSectionEnter
       .append('textarea')
         .attr('class', 'new-comment-input')
-        .attr('placeholder', t('QA.keepRight.comment_placeholder', { html: false }))
+        .attr('placeholder', t('QA.keepRight.comment_placeholder'))
         .attr('maxlength', 1000)
         .property('value', d => d.newComment || d.comment)
         .call(utilNoAuto)
@@ -146,7 +146,7 @@ export function uiKeepRightEditor(context) {
     buttonEnter
       .append('button')
         .attr('class', 'button comment-button action')
-        .html(t('QA.keepRight.save_comment'));
+        .html(t.html('QA.keepRight.save_comment'));
 
     buttonEnter
       .append('button')

modules/ui/map_in_map.js

@@ -320,7 +320,7 @@ export function uiMapInMap(context) {
         redraw();
 
         context.keybinding()
-            .on(t('background.minimap.key', { html: false }), toggle);
+            .on(t('background.minimap.key'), toggle);
     }
 
     return mapInMap;

modules/ui/note_comments.js

@@ -54,7 +54,7 @@ export function uiNoteComments() {
                         .attr('target', '_blank');
                 }
                 selection
-                    .html(function(d) { return d.user || t('note.anonymous'); });
+                    .html(function(d) { return d.user || t.html('note.anonymous'); });
             });
 
         metadataEnter

modules/ui/note_editor.js

@@ -54,7 +54,7 @@ export function uiNoteEditor(context) {
 
         headerEnter
             .append('h3')
-            .html(t('note.title'));
+            .html(t.html('note.title'));
 
 
         var body = selection.selectAll('.body')
@@ -155,7 +155,7 @@ export function uiNoteEditor(context) {
         var commentTextarea = noteSaveEnter
             .append('textarea')
             .attr('class', 'new-comment-input')
-            .attr('placeholder', t('note.inputPlaceholder', { html: false }))
+            .attr('placeholder', t('note.inputPlaceholder'))
             .attr('maxlength', 1000)
             .property('value', function(d) { return d.newComment; })
             .call(utilNoAuto)
@@ -257,14 +257,14 @@ export function uiNoteEditor(context) {
 
         authEnter
             .append('span')
-            .html(t('note.login'));
+            .html(t.html('note.login'));
 
         authEnter
             .append('a')
             .attr('target', '_blank')
             .call(svgIcon('#iD-icon-out-link', 'inline'))
             .append('span')
-            .html(t('login'))
+            .html(t.html('login'))
             .on('click.note-login', function() {
                 d3_event.preventDefault();
                 osm.authenticate();
@@ -285,7 +285,7 @@ export function uiNoteEditor(context) {
         prose = prose.enter()
             .append('p')
             .attr('class', 'note-save-prose')
-            .html(t('note.upload_explanation'))
+            .html(t.html('note.upload_explanation'))
             .merge(prose);
 
         osm.userDetails(function(err, user) {
@@ -308,7 +308,7 @@ export function uiNoteEditor(context) {
                 .attr('target', '_blank');
 
             prose
-                .html(t('note.upload_explanation_with_user', { user: userLink.html() }));
+                .html(t.html('note.upload_explanation_with_user', { user: userLink.html() }));
         });
     }
 
@@ -334,12 +334,12 @@ export function uiNoteEditor(context) {
             buttonEnter
                 .append('button')
                 .attr('class', 'button cancel-button secondary-action')
-                .html(t('confirm.cancel'));
+                .html(t.html('confirm.cancel'));
 
             buttonEnter
                 .append('button')
                 .attr('class', 'button save-button action')
-                .html(t('note.save'));
+                .html(t.html('note.save'));
 
         } else {
             buttonEnter
@@ -349,7 +349,7 @@ export function uiNoteEditor(context) {
             buttonEnter
                 .append('button')
                 .attr('class', 'button comment-button action')
-                .html(t('note.comment'));
+                .html(t.html('note.comment'));
         }
 
 

modules/ui/note_report.js

@@ -30,7 +30,7 @@ export function uiNoteReport() {
 
         linkEnter
             .append('span')
-            .html(t('note.report'));
+            .html(t.html('note.report'));
     }
 
 

modules/ui/notice.js

@@ -28,7 +28,7 @@ export function uiNotice(context) {
             .call(svgIcon('#iD-icon-plus', 'pre-text'))
             .append('span')
             .attr('class', 'label')
-            .html(t('zoom_in_edit'));
+            .html(t.html('zoom_in_edit'));
 
 
         function disableTooHigh() {

modules/ui/osmose_details.js

@@ -45,7 +45,7 @@ export function uiOsmoseDetails(context) {
 
       div
         .append('h4')
-          .html(() => t('QA.keepRight.detail_description'));
+          .html(t.html('QA.keepRight.detail_description'));
 
       div
         .append('p')
@@ -73,7 +73,7 @@ export function uiOsmoseDetails(context) {
 
       div
         .append('h4')
-          .html(() => t('QA.osmose.fix_title'));
+          .html(t.html('QA.osmose.fix_title'));
 
       div
         .append('p')
@@ -91,7 +91,7 @@ export function uiOsmoseDetails(context) {
 
       div
         .append('h4')
-          .html(() => t('QA.osmose.trap_title'));
+          .html(t.html('QA.osmose.trap_title'));
 
       div
         .append('p')
@@ -118,7 +118,7 @@ export function uiOsmoseDetails(context) {
         if (d.detail) {
           detailsDiv
             .append('h4')
-              .html(() => t('QA.osmose.detail_title'));
+              .html(t.html('QA.osmose.detail_title'));
 
           detailsDiv
             .append('p')
@@ -131,7 +131,7 @@ export function uiOsmoseDetails(context) {
         // Create list of linked issue elements
         elemsDiv
           .append('h4')
-            .html(() => t('QA.osmose.elems_title'));
+            .html(t.html('QA.osmose.elems_title'));
 
         elemsDiv
           .append('ul').selectAll('li')

modules/ui/osmose_editor.js

@@ -35,7 +35,7 @@ export function uiOsmoseEditor(context) {
 
     headerEnter
       .append('h3')
-        .html(t('QA.osmose.title'));
+        .html(t.html('QA.osmose.title'));
 
     let body = selection.selectAll('.body')
       .data([0]);
@@ -117,7 +117,7 @@ export function uiOsmoseEditor(context) {
       .merge(buttonEnter);
 
     buttonSection.select('.close-button')
-      .html(() => t('QA.keepRight.close'))
+      .html(t.html('QA.keepRight.close'))
       .on('click.close', function(d) {
         this.blur();    // avoid keeping focus on the button - #4641
         const qaService = services.osmose;
@@ -128,7 +128,7 @@ export function uiOsmoseEditor(context) {
       });
 
     buttonSection.select('.ignore-button')
-      .html(() => t('QA.keepRight.ignore'))
+      .html(t.html('QA.keepRight.ignore'))
       .on('click.ignore', function(d) {
         this.blur();    // avoid keeping focus on the button - #4641
         const qaService = services.osmose;

modules/ui/panels/background.js

@@ -46,7 +46,7 @@ export function uiPanelBackground(context) {
                 .append('li')
                 .attr('class', 'background-info-list-' + k)
                 .classed('hide', !metadata[k])
-                .html(t('info_panels.background.' + k) + ':')
+                .html(t.html('info_panels.background.' + k) + ':')
                 .append('span')
                 .attr('class', 'background-info-span-' + k)
                 .html(metadata[k]);
@@ -58,7 +58,7 @@ export function uiPanelBackground(context) {
 
         selection
             .append('a')
-            .html(t('info_panels.background.' + toggleTiles))
+            .html(t.html('info_panels.background.' + toggleTiles))
             .attr('href', '#')
             .attr('class', 'button button-toggle-tiles')
             .on('click', function() {
@@ -74,7 +74,7 @@ export function uiPanelBackground(context) {
             var toggleVintage = showsVintage ? 'hide_vintage' : 'show_vintage';
             selection
                 .append('a')
-                .html(t('info_panels.background.' + toggleVintage))
+                .html(t.html('info_panels.background.' + toggleVintage))
                 .attr('href', '#')
                 .attr('class', 'button button-toggle-vintage')
                 .on('click', function() {
@@ -163,7 +163,7 @@ export function uiPanelBackground(context) {
 
     panel.id = 'background';
     panel.title = t('info_panels.background.title');
-    panel.key = t('info_panels.background.key', { html: false });
+    panel.key = t('info_panels.background.key');
 
 
     return panel;

modules/ui/panels/history.js

@@ -21,7 +21,7 @@ export function uiPanelHistory(context) {
         if (!userName) {
             selection
                 .append('span')
-                .html(t('info_panels.history.unknown'));
+                .html(t.html('info_panels.history.unknown'));
             return;
         }
 
@@ -57,7 +57,7 @@ export function uiPanelHistory(context) {
         if (!changeset) {
             selection
                 .append('span')
-                .html(t('info_panels.history.unknown'));
+                .html(t.html('info_panels.history.unknown'));
             return;
         }
 
@@ -118,7 +118,7 @@ export function uiPanelHistory(context) {
         selection
             .append('h4')
             .attr('class', 'history-heading')
-            .html(singular || t('info_panels.selected', { n: selected.length }));
+            .html(singular || t.html('info_panels.selected', { n: selected.length }));
 
         if (!singular) return;
 
@@ -134,7 +134,7 @@ export function uiPanelHistory(context) {
         if (!note || note.isNew()) {
             selection
                 .append('div')
-                .html(t('info_panels.history.note_no_history'));
+                .html(t.html('info_panels.history.note_no_history'));
             return;
         }
 
@@ -143,20 +143,20 @@ export function uiPanelHistory(context) {
 
         list
             .append('li')
-            .html(t('info_panels.history.note_comments') + ':')
+            .html(t.html('info_panels.history.note_comments') + ':')
             .append('span')
             .html(note.comments.length);
 
         if (note.comments.length) {
             list
                 .append('li')
-                .html(t('info_panels.history.note_created_date') + ':')
+                .html(t.html('info_panels.history.note_created_date') + ':')
                 .append('span')
                 .html(displayTimestamp(note.comments[0].date));
 
             list
                 .append('li')
-                .html(t('info_panels.history.note_created_user') + ':')
+                .html(t.html('info_panels.history.note_created_user') + ':')
                 .call(displayUser, note.comments[0].user);
         }
 
@@ -168,7 +168,7 @@ export function uiPanelHistory(context) {
                 .attr('href', osm.noteURL(note))
                 .call(svgIcon('#iD-icon-out-link', 'inline'))
                 .append('span')
-                .html(t('info_panels.history.note_link_text'));
+                .html(t.html('info_panels.history.note_link_text'));
         }
     }
 
@@ -177,7 +177,7 @@ export function uiPanelHistory(context) {
         if (!entity || entity.isNew()) {
             selection
                 .append('div')
-                .html(t('info_panels.history.no_history'));
+                .html(t.html('info_panels.history.no_history'));
             return;
         }
 
@@ -191,7 +191,7 @@ export function uiPanelHistory(context) {
                 .attr('class', 'view-history-on-osm')
                 .attr('href', osm.historyURL(entity))
                 .attr('target', '_blank')
-                .attr('title', t('info_panels.history.link_text', { html: false }))
+                .attr('title', t('info_panels.history.link_text'))
                 .html('OSM');
         }
         links
@@ -207,24 +207,24 @@ export function uiPanelHistory(context) {
 
         list
             .append('li')
-            .html(t('info_panels.history.version') + ':')
+            .html(t.html('info_panels.history.version') + ':')
             .append('span')
             .html(entity.version);
 
         list
             .append('li')
-            .html(t('info_panels.history.last_edit') + ':')
+            .html(t.html('info_panels.history.last_edit') + ':')
             .append('span')
             .html(displayTimestamp(entity.timestamp));
 
         list
             .append('li')
-            .html(t('info_panels.history.edited_by') + ':')
+            .html(t.html('info_panels.history.edited_by') + ':')
             .call(displayUser, entity.user);
 
         list
             .append('li')
-            .html(t('info_panels.history.changeset') + ':')
+            .html(t.html('info_panels.history.changeset') + ':')
             .call(displayChangeset, entity.changeset);
     }
 
@@ -250,7 +250,7 @@ export function uiPanelHistory(context) {
 
     panel.id = 'history';
     panel.title = t('info_panels.history.title');
-    panel.key = t('info_panels.history.key', { html: false });
+    panel.key = t('info_panels.history.key');
 
 
     return panel;

modules/ui/panels/location.js

@@ -69,7 +69,7 @@ export function uiPanelLocation(context) {
 
     panel.id = 'location';
     panel.title = t('info_panels.location.title');
-    panel.key = t('info_panels.location.key', { html: false });
+    panel.key = t('info_panels.location.key');
 
 
     return panel;

modules/ui/panels/measurement.js

@@ -120,7 +120,7 @@ export function uiPanelMeasurement(context) {
         if (geometry) {
             list
                 .append('li')
-                .html(t('info_panels.measurement.geometry') + ':')
+                .html(t.html('info_panels.measurement.geometry') + ':')
                 .append('span')
                 .html(
                     closed ? t('info_panels.measurement.closed_' + geometry) : t('geometry.' + geometry)
@@ -130,7 +130,7 @@ export function uiPanelMeasurement(context) {
         if (totalNodeCount) {
             list
                 .append('li')
-                .html(t('info_panels.measurement.node_count') + ':')
+                .html(t.html('info_panels.measurement.node_count') + ':')
                 .append('span')
                 .html(totalNodeCount.toLocaleString(localeCode));
         }
@@ -138,7 +138,7 @@ export function uiPanelMeasurement(context) {
         if (area) {
             list
                 .append('li')
-                .html(t('info_panels.measurement.area') + ':')
+                .html(t.html('info_panels.measurement.area') + ':')
                 .append('span')
                 .html(displayArea(area, isImperial));
         }
@@ -155,7 +155,7 @@ export function uiPanelMeasurement(context) {
         if (location) {
             coordItem = list
                 .append('li')
-                .html(t('info_panels.measurement.location') + ':');
+                .html(t.html('info_panels.measurement.location') + ':');
             coordItem.append('span')
                 .html(dmsCoordinatePair(location));
             coordItem.append('span')
@@ -165,7 +165,7 @@ export function uiPanelMeasurement(context) {
         if (centroid) {
             coordItem = list
                 .append('li')
-                .html(t('info_panels.measurement.centroid') + ':');
+                .html(t.html('info_panels.measurement.centroid') + ':');
             coordItem.append('span')
                 .html(dmsCoordinatePair(centroid));
             coordItem.append('span')
@@ -175,7 +175,7 @@ export function uiPanelMeasurement(context) {
         if (center) {
             coordItem = list
                 .append('li')
-                .html(t('info_panels.measurement.center') + ':');
+                .html(t.html('info_panels.measurement.center') + ':');
             coordItem.append('span')
                 .html(dmsCoordinatePair(center));
             coordItem.append('span')
@@ -186,7 +186,7 @@ export function uiPanelMeasurement(context) {
             var toggle  = isImperial ? 'imperial' : 'metric';
             selection
                 .append('a')
-                .html(t('info_panels.measurement.' + toggle))
+                .html(t.html('info_panels.measurement.' + toggle))
                 .attr('href', '#')
                 .attr('class', 'button button-toggle-units')
                 .on('click', function() {
@@ -219,7 +219,7 @@ export function uiPanelMeasurement(context) {
 
     panel.id = 'measurement';
     panel.title = t('info_panels.measurement.title');
-    panel.key = t('info_panels.measurement.key', { html: false });
+    panel.key = t('info_panels.measurement.key');
 
 
     return panel;

modules/ui/panes/background.js

@@ -10,7 +10,7 @@ import { uiSectionOverlayList } from '../sections/overlay_list';
 export function uiPaneBackground(context) {
 
     var backgroundPane = uiPane('background', context)
-        .key(t('background.key', { html: false }))
+        .key(t('background.key'))
         .title(t('background.title'))
         .description(t('background.description'))
         .iconName('iD-icon-layers')

modules/ui/panes/help.js

@@ -9,7 +9,7 @@ import { uiPane } from '../pane';
 
 import { t, localizer } from '../../core/localizer';
 import { uiTooltip } from '../tooltip';
-import { helpString } from '../intro/helper';
+import { helpHtml } from '../intro/helper';
 
 export function uiPaneHelp(context) {
 
@@ -244,7 +244,7 @@ export function uiPaneHelp(context) {
             var subkey = helpkey + '.' + part;
             var depth = headings[subkey];                              // is this subkey a heading?
             var hhh = depth ? Array(depth + 1).join('#') + ' ' : '';   // if so, prepend with some ##'s
-            return all + hhh + helpString(subkey, helpPaneReplacements) + '\n\n';
+            return all + hhh + helpHtml(subkey, helpPaneReplacements) + '\n\n';
         }, '');
 
         return {
@@ -257,7 +257,7 @@ export function uiPaneHelp(context) {
     });
 
     var helpPane = uiPane('help', context)
-        .key(t('help.key', { html: false }))
+        .key(t('help.key'))
         .title(t('help.title'))
         .description(t('help.title'))
         .iconName('iD-icon-help');
@@ -364,7 +364,7 @@ export function uiPaneHelp(context) {
 
         shortcuts
             .append('div')
-            .html(t('shortcuts.title'));
+            .html(t.html('shortcuts.title'));
 
         var walkthrough = toc
             .append('li')
@@ -381,7 +381,7 @@ export function uiPaneHelp(context) {
 
         walkthrough
             .append('div')
-            .html(t('splash.walkthrough'));
+            .html(t.html('splash.walkthrough'));
 
 
         var helpContent = content

modules/ui/panes/issues.js

@@ -10,7 +10,7 @@ import { uiSectionValidationStatus } from '../sections/validation_status';
 export function uiPaneIssues(context) {
 
     var issuesPane = uiPane('issues', context)
-        .key(t('issues.key', { html: false }))
+        .key(t('issues.key'))
         .title(t('issues.title'))
         .description(t('issues.title'))
         .iconName('iD-icon-alert')

modules/ui/panes/map_data.js

@@ -10,7 +10,7 @@ import { uiSectionPhotoOverlays } from '../sections/photo_overlays';
 export function uiPaneMapData(context) {
 
     var mapDataPane = uiPane('map-data', context)
-        .key(t('map_data.key', { html: false }))
+        .key(t('map_data.key'))
         .title(t('map_data.title'))
         .description(t('map_data.description'))
         .iconName('iD-icon-data')

modules/ui/panes/preferences.js

@@ -6,7 +6,7 @@ import { uiSectionPrivacy } from '../sections/privacy';
 export function uiPanePreferences(context) {
 
   let preferencesPane = uiPane('preferences', context)
-    .key(t('preferences.key', { html: false }))
+    .key(t('preferences.key'))
     .title(t('preferences.title'))
     .description(t('preferences.description'))
     .iconName('fas-user-cog')

modules/ui/preset_list.js

@@ -38,7 +38,7 @@ export function uiPresetList(context) {
 
         var message = messagewrap
             .append('h3')
-            .html(t('inspector.choose'));
+            .html(t.html('inspector.choose'));
 
         messagewrap
             .append('button')
@@ -124,7 +124,7 @@ export function uiPresetList(context) {
         var search = searchWrap
             .append('input')
             .attr('class', 'preset-search-input')
-            .attr('placeholder', t('inspector.search', { html: false }))
+            .attr('placeholder', t('inspector.search'))
             .attr('type', 'search')
             .call(utilNoAuto)
             .on('keydown', initialKeydown)

modules/ui/restore.js

@@ -17,13 +17,13 @@ export function uiRestore(context) {
       .append('div')
       .attr('class', 'modal-section')
       .append('h3')
-      .html(t('restore.heading'));
+      .html(t.html('restore.heading'));
 
     introModal
       .append('div')
       .attr('class','modal-section')
       .append('p')
-      .html(t('restore.description'));
+      .html(t.html('restore.description'));
 
     let buttonWrap = introModal
       .append('div')
@@ -45,7 +45,7 @@ export function uiRestore(context) {
 
     restore
       .append('div')
-      .html(t('restore.restore'));
+      .html(t.html('restore.restore'));
 
     let reset = buttonWrap
       .append('button')
@@ -63,7 +63,7 @@ export function uiRestore(context) {
 
     reset
       .append('div')
-      .html(t('restore.reset'));
+      .html(t.html('restore.reset'));
 
     restore.node().focus();
   };

modules/ui/sections/background_display_options.js

@@ -70,7 +70,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
 
         slidersEnter
             .append('h5')
-            .html(function(d) { return t('background.' + d); })
+            .html(function(d) { return t.html('background.' + d); })
             .append('span')
             .attr('class', function(d) { return 'display-option-value display-option-value-' + d; });
 
@@ -92,7 +92,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
 
         sildersControlEnter
             .append('button')
-            .attr('title', t('background.reset', { html: false }))
+            .attr('title', t('background.reset'))
             .attr('class', function(d) { return 'display-option-reset display-option-reset-' + d; })
             .on('click', function(d) {
                 if (d3_event.button !== 0) return;
@@ -105,7 +105,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
             .append('a')
             .attr('class', 'display-option-resetlink')
             .attr('href', '#')
-            .html(t('background.reset_all'))
+            .html(t.html('background.reset_all'))
             .on('click', function() {
                 for (var i = 0; i < _sliders.length; i++) {
                     updateValue(_sliders[i],1);

modules/ui/sections/background_list.js

@@ -57,7 +57,7 @@ export function uiSectionBackgroundList(context) {
             .append('label')
             .call(uiTooltip()
                 .title(t('background.minimap.tooltip'))
-                .keys([t('background.minimap.key', { html: false })])
+                .keys([t('background.minimap.key')])
                 .placement('top')
             );
 
@@ -71,7 +71,7 @@ export function uiSectionBackgroundList(context) {
 
         minimapLabelEnter
             .append('span')
-            .html(t('background.minimap.description'));
+            .html(t.html('background.minimap.description'));
 
 
         var panelLabelEnter = bgExtrasListEnter
@@ -80,7 +80,7 @@ export function uiSectionBackgroundList(context) {
             .append('label')
             .call(uiTooltip()
                 .title(t('background.panel.tooltip'))
-                .keys([uiCmd('⌘⇧' + t('info_panels.background.key', { html: false }))])
+                .keys([uiCmd('⌘⇧' + t('info_panels.background.key'))])
                 .placement('top')
             );
 
@@ -94,7 +94,7 @@ export function uiSectionBackgroundList(context) {
 
         panelLabelEnter
             .append('span')
-            .html(t('background.panel.description'));
+            .html(t.html('background.panel.description'));
 
         var locPanelLabelEnter = bgExtrasListEnter
             .append('li')
@@ -102,7 +102,7 @@ export function uiSectionBackgroundList(context) {
             .append('label')
             .call(uiTooltip()
                 .title(t('background.location_panel.tooltip'))
-                .keys([uiCmd('⌘⇧' + t('info_panels.location.key', { html: false }))])
+                .keys([uiCmd('⌘⇧' + t('info_panels.location.key'))])
                 .placement('top')
             );
 
@@ -116,7 +116,7 @@ export function uiSectionBackgroundList(context) {
 
         locPanelLabelEnter
             .append('span')
-            .html(t('background.location_panel.description'));
+            .html(t.html('background.location_panel.description'));
 
 
         // "Info / Report a Problem" link
@@ -130,7 +130,7 @@ export function uiSectionBackgroundList(context) {
             .call(svgIcon('#iD-icon-out-link', 'inline'))
             .attr('href', 'https://github.com/openstreetmap/iD/blob/develop/FAQ.md#how-can-i-report-an-issue-with-background-imagery')
             .append('span')
-            .html(t('background.imagery_problem_faq'));
+            .html(t.html('background.imagery_problem_faq'));
 
         _backgroundList
             .call(drawListItems, 'radio', chooseBackground, function(d) { return !d.isHidden() && !d.overlay; });
@@ -150,7 +150,7 @@ export function uiSectionBackgroundList(context) {
                 item.call(uiTooltip()
                     .placement(placement)
                     .title('<div>' + t('background.switch') + '</div>')
-                    .keys([uiCmd('⌘' + t('background.key', { html: false }))])
+                    .keys([uiCmd('⌘' + t('background.key'))])
                 );
             } else if (description || isOverflowing) {
                 item.call(uiTooltip()

modules/ui/sections/background_offset.js

@@ -161,7 +161,7 @@ export function uiSectionBackgroundOffset(context) {
         containerEnter
             .append('div')
             .attr('class', 'nudge-instructions')
-            .html(t('background.offset'));
+            .html(t.html('background.offset'));
 
         var nudgeEnter = containerEnter
             .append('div')
@@ -189,7 +189,7 @@ export function uiSectionBackgroundOffset(context) {
 
         containerEnter
             .append('button')
-            .attr('title', t('background.reset', { html: false }))
+            .attr('title', t('background.reset'))
             .attr('class', 'nudge-reset disabled')
             .on('contextmenu', cancelEvent)
             .on('click', function() {

modules/ui/sections/changes.js

@@ -74,7 +74,7 @@ export function uiSectionChanges(context) {
         buttons
             .append('span')
             .attr('class', 'change-type')
-            .html(function(d) { return t('commit.' + d.changeType) + ' '; });
+            .html(function(d) { return t.html('commit.' + d.changeType) + ' '; });
 
         buttons
             .append('strong')
@@ -132,7 +132,7 @@ export function uiSectionChanges(context) {
         linkEnter
             .call(svgIcon('#iD-icon-load', 'inline'))
             .append('span')
-            .html(t('commit.download_changes'));
+            .html(t.html('commit.download_changes'));
 
 
         function mouseover(d) {

modules/ui/sections/data_layers.js

@@ -97,7 +97,7 @@ export function uiSectionDataLayers(context) {
                     d3_select(this)
                         .call(uiTooltip()
                             .title(t('map_data.layers.' + d.id + '.tooltip'))
-                            .keys([uiCmd('⌥' + t('area_fill.wireframe.key', { html: false }))])
+                            .keys([uiCmd('⌥' + t('area_fill.wireframe.key'))])
                             .placement('bottom')
                         );
                 } else {
@@ -116,7 +116,7 @@ export function uiSectionDataLayers(context) {
 
         labelEnter
             .append('span')
-            .html(function(d) { return t('map_data.layers.' + d.id + '.title'); });
+            .html(function(d) { return t.html('map_data.layers.' + d.id + '.title'); });
 
 
         // Update
@@ -167,7 +167,7 @@ export function uiSectionDataLayers(context) {
 
         labelEnter
             .append('span')
-            .html(function(d) { return t('map_data.layers.' + d.id + '.title'); });
+            .html(function(d) { return t.html('map_data.layers.' + d.id + '.title'); });
 
 
         // Update
@@ -325,7 +325,7 @@ export function uiSectionDataLayers(context) {
 
         labelEnter
             .append('span')
-            .html(t('map_data.layers.custom.title'));
+            .html(t.html('map_data.layers.custom.title'));
 
         liEnter
             .append('button')
@@ -400,7 +400,7 @@ export function uiSectionDataLayers(context) {
             .append('label')
             .call(uiTooltip()
                 .title(t('map_data.history_panel.tooltip'))
-                .keys([uiCmd('⌘⇧' + t('info_panels.history.key', { html: false }))])
+                .keys([uiCmd('⌘⇧' + t('info_panels.history.key'))])
                 .placement('top')
             );
 
@@ -414,7 +414,7 @@ export function uiSectionDataLayers(context) {
 
         historyPanelLabelEnter
             .append('span')
-            .html(t('map_data.history_panel.title'));
+            .html(t.html('map_data.history_panel.title'));
 
         var measurementPanelLabelEnter = panelsListEnter
             .append('li')
@@ -422,7 +422,7 @@ export function uiSectionDataLayers(context) {
             .append('label')
             .call(uiTooltip()
                 .title(t('map_data.measurement_panel.tooltip'))
-                .keys([uiCmd('⌘⇧' + t('info_panels.measurement.key', { html: false }))])
+                .keys([uiCmd('⌘⇧' + t('info_panels.measurement.key'))])
                 .placement('top')
             );
 
@@ -436,7 +436,7 @@ export function uiSectionDataLayers(context) {
 
         measurementPanelLabelEnter
             .append('span')
-            .html(t('map_data.measurement_panel.title'));
+            .html(t.html('map_data.measurement_panel.title'));
     }
 
     context.layers().on('change.uiSectionDataLayers', section.reRender);

modules/ui/sections/entity_issues.js

@@ -110,7 +110,7 @@ export function uiSectionEntityIssues(context) {
         var infoButton = labelsEnter
             .append('button')
             .attr('class', 'issue-info-button')
-            .attr('title', t('icons.information', { html: false }))
+            .attr('title', t('icons.information'))
             .call(svgIcon('#iD-icon-inspect'));
 
         infoButton
@@ -160,7 +160,7 @@ export function uiSectionEntityIssues(context) {
                         .call(d.reference);
                 } else {
                     d3_select(this)
-                        .html(t('inspector.no_documentation_key'));
+                        .html(t.html('inspector.no_documentation_key'));
                 }
             });
 

modules/ui/sections/map_features.js

@@ -32,7 +32,7 @@ export function uiSectionMapFeatures(context) {
             .append('a')
             .attr('class', 'feature-list-link')
             .attr('href', '#')
-            .html(t('issues.disable_all'))
+            .html(t.html('issues.disable_all'))
             .on('click', function() {
                 context.features().disableAll();
             });
@@ -41,7 +41,7 @@ export function uiSectionMapFeatures(context) {
             .append('a')
             .attr('class', 'feature-list-link')
             .attr('href', '#')
-            .html(t('issues.enable_all'))
+            .html(t.html('issues.enable_all'))
             .on('click', function() {
                 context.features().enableAll();
             });
@@ -88,7 +88,7 @@ export function uiSectionMapFeatures(context) {
 
         label
             .append('span')
-            .html(function(d) { return t(name + '.' + d + '.description'); });
+            .html(function(d) { return t.html(name + '.' + d + '.description'); });
 
         // Update
         items = items

modules/ui/sections/map_style_options.js

@@ -51,8 +51,8 @@ export function uiSectionMapStyleOptions(context) {
                     return t(name + '.' + d + '.tooltip');
                 })
                 .keys(function(d) {
-                    var key = (d === 'wireframe' ? t('area_fill.wireframe.key', { html: false }) : null);
-                    if (d === 'highlight_edits') key = t('map_data.highlight_edits.key', { html: false });
+                    var key = (d === 'wireframe' ? t('area_fill.wireframe.key') : null);
+                    if (d === 'highlight_edits') key = t('map_data.highlight_edits.key');
                     return key ? [key] : null;
                 })
                 .placement('top')
@@ -69,7 +69,7 @@ export function uiSectionMapStyleOptions(context) {
 
         label
             .append('span')
-            .html(function(d) { return t(name + '.' + d + '.description'); });
+            .html(function(d) { return t.html(name + '.' + d + '.description'); });
 
         // Update
         items = items

modules/ui/sections/privacy.js

@@ -45,7 +45,7 @@ export function uiSectionPrivacy(context) {
 
       thirdPartyIconsEnter
         .append('span')
-        .html(t('preferences.privacy.third_party_icons.description'));
+        .html(t.html('preferences.privacy.third_party_icons.description'));
 
 
       // Privacy Policy link
@@ -59,7 +59,7 @@ export function uiSectionPrivacy(context) {
         .call(svgIcon('#iD-icon-out-link', 'inline'))
         .attr('href', 'https://github.com/openstreetmap/iD/blob/release/PRIVACY.md')
         .append('span')
-        .html(t('preferences.privacy.privacy_link'));
+        .html(t.html('preferences.privacy.privacy_link'));
 
       update();
 

modules/ui/sections/raw_member_editor.js

@@ -199,14 +199,14 @@ export function uiSectionRawMemberEditor(context) {
 
                     label
                         .append('button')
-                        .attr('title', t('icons.remove', { html: false }))
+                        .attr('title', t('icons.remove'))
                         .attr('class', 'remove member-delete')
                         .call(svgIcon('#iD-operation-delete'));
 
                     label
                         .append('button')
                         .attr('class', 'member-zoom')
-                        .attr('title', t('icons.zoom_to', { html: false }))
+                        .attr('title', t('icons.zoom_to'))
                         .call(svgIcon('#iD-icon-framed-dot', 'monochrome'))
                         .on('click', zoomToMember);
 
@@ -218,17 +218,17 @@ export function uiSectionRawMemberEditor(context) {
                     labelText
                         .append('span')
                         .attr('class', 'member-entity-type')
-                        .html(t('inspector.' + d.type, { id: d.id }));
+                        .html(t.html('inspector.' + d.type, { id: d.id }));
 
                     labelText
                         .append('span')
                         .attr('class', 'member-entity-name')
-                        .html(t('inspector.incomplete', { id: d.id }));
+                        .html(t.html('inspector.incomplete', { id: d.id }));
 
                     label
                         .append('button')
                         .attr('class', 'member-download')
-                        .attr('title', t('icons.download', { html: false }))
+                        .attr('title', t('icons.download'))
                         .call(svgIcon('#iD-icon-load'))
                         .on('click', downloadMember);
                 }
@@ -245,7 +245,7 @@ export function uiSectionRawMemberEditor(context) {
                 return d.domId;
             })
             .property('type', 'text')
-            .attr('placeholder', t('inspector.role', { html: false }))
+            .attr('placeholder', t('inspector.role'))
             .call(utilNoAuto);
 
         if (taginfo) {

modules/ui/sections/raw_membership_editor.js

@@ -281,7 +281,7 @@ export function uiSectionRawMembershipEditor(context) {
         labelEnter
             .append('button')
             .attr('class', 'member-zoom')
-            .attr('title', t('icons.zoom_to', { html: false }))
+            .attr('title', t('icons.zoom_to'))
             .call(svgIcon('#iD-icon-framed-dot', 'monochrome'))
             .on('click', zoomToRelation);
 
@@ -296,7 +296,7 @@ export function uiSectionRawMembershipEditor(context) {
                 return d.domId;
             })
             .property('type', 'text')
-            .attr('placeholder', t('inspector.role', { html: false }))
+            .attr('placeholder', t('inspector.role'))
             .call(utilNoAuto)
             .property('value', function(d) { return d.member.role; })
             .on('blur', changeRole)
@@ -325,7 +325,7 @@ export function uiSectionRawMembershipEditor(context) {
 
         newLabelEnter
             .append('input')
-            .attr('placeholder', t('inspector.choose_relation', { html: false }))
+            .attr('placeholder', t('inspector.choose_relation'))
             .attr('type', 'text')
             .attr('class', 'member-entity-input')
             .call(utilNoAuto);
@@ -347,7 +347,7 @@ export function uiSectionRawMembershipEditor(context) {
             .append('input')
             .attr('class', 'member-role')
             .property('type', 'text')
-            .attr('placeholder', t('inspector.role', { html: false }))
+            .attr('placeholder', t('inspector.role'))
             .call(utilNoAuto);
 
         // Update

modules/ui/sections/raw_tag_editor.js

@@ -89,7 +89,7 @@ export function uiSectionRawTagEditor(id, context) {
             .attr('class', function(d) {
                 return 'raw-tag-option raw-tag-option-' + d.id + (_tagView === d.id ? ' selected' : '');
             })
-            .attr('title', function(d) { return t('icons.' + d.id, { html: false }); })
+            .attr('title', function(d) { return t('icons.' + d.id); })
             .on('click', function(d) {
                 _tagView = d.id;
                 prefs('raw-tag-editor-view', d.id);
@@ -119,7 +119,7 @@ export function uiSectionRawTagEditor(id, context) {
             .append('textarea')
             .attr('class', 'tag-text' + (_tagView !== 'text' ? ' hide' : ''))
             .call(utilNoAuto)
-            .attr('placeholder', t('inspector.key_value', { html: false }))
+            .attr('placeholder', t('inspector.key_value'))
             .attr('spellcheck', 'false')
             .merge(textarea);
 
@@ -205,7 +205,7 @@ export function uiSectionRawTagEditor(id, context) {
         innerWrap
             .append('button')
             .attr('class', 'form-field-button remove')
-            .attr('title', t('icons.remove', { html: false }))
+            .attr('title', t('icons.remove'))
             .call(svgIcon('#iD-operation-delete'));
 
 
@@ -257,7 +257,7 @@ export function uiSectionRawTagEditor(id, context) {
                 return Array.isArray(d.value);
             })
             .attr('placeholder', function(d) {
-                return typeof d.value === 'string' ? null : t('inspector.multiple_values', { html: false });
+                return typeof d.value === 'string' ? null : t('inspector.multiple_values');
             })
             .call(utilGetSetValue, function(d) {
                 return typeof d.value === 'string' ? d.value : '';

modules/ui/sections/selection_list.js

@@ -92,7 +92,7 @@ export function uiSectionSelectionList(context) {
         enter
             .append('button')
             .attr('class', 'close')
-            .attr('title', t('icons.deselect', { html: false }))
+            .attr('title', t('icons.deselect'))
             .on('click', deselectEntity)
             .call(svgIcon('#iD-icon-close'));
 

modules/ui/sections/validation_issues.js

@@ -124,7 +124,7 @@ export function uiSectionValidationIssues(id, severity, context) {
 
                 d3_select(this)
                     .append('button')
-                    .attr('title', t('issues.fix_one.title', { html: false }))
+                    .attr('title', t('issues.fix_one.title'))
                     .datum(d.autoFix)  // set button datum to the autofix
                     .attr('class', 'autofix action')
                     .on('click', function(d) {
@@ -175,7 +175,7 @@ export function uiSectionValidationIssues(id, severity, context) {
         linkEnter
             .append('span')
             .attr('class', 'autofix-all-link-text')
-            .html(t('issues.fix_all.title'));
+            .html(t.html('issues.fix_all.title'));
 
         linkEnter
             .append('span')