replace unnecessary setting of raw "html" with "text"

2026-04-21 19:26:41 +02:00 · 2021-11-18 17:27:38 +01:00
parent 12f546d6e6
commit 040257fd44
46 changed files with 139 additions and 137 deletions
@@ -179,7 +179,6 @@ export function actionMergeRemoteChanges(id, localGraph, remoteGraph, discardTag
                if (o[k] !== a[k]) {      // changed locally..
                    _conflicts.push(t.html('merge_remote_changes.conflict.tags',
                        { tag: k, local: a[k], remote: b[k], user: { html: user(remote.user) } }));
-
                } else {                  // unchanged locally, accept remote change..
                    if (b.hasOwnProperty(k)) {
                        tags[k] = b[k];
@@ -447,7 +447,7 @@ export function behaviorDrawWay(context, wayID, mode, startGraph) {
                context.ui().flash
                    .duration(4000)
                    .iconName('#iD-icon-no')
-                    .label(t('operations.follow.error.needs_more_initial_nodes'))();
+                    .label(t.html('operations.follow.error.needs_more_initial_nodes'))();
                return;
            }

@@ -461,7 +461,7 @@ export function behaviorDrawWay(context, wayID, mode, startGraph) {
                context.ui().flash
                    .duration(4000)
                    .iconName('#iD-icon-no')
-                    .label(t(`operations.follow.error.intersection_of_multiple_ways.${featureType}`))();
+                    .label(t.html(`operations.follow.error.intersection_of_multiple_ways.${featureType}`))();
                return;
            }

@@ -472,7 +472,7 @@ export function behaviorDrawWay(context, wayID, mode, startGraph) {
                context.ui().flash
                    .duration(4000)
                    .iconName('#iD-icon-no')
-                    .label(t(`operations.follow.error.intersection_of_different_ways.${featureType}`))();
+                    .label(t.html(`operations.follow.error.intersection_of_different_ways.${featureType}`))();
                return;
            }

@@ -501,7 +501,7 @@ export function behaviorDrawWay(context, wayID, mode, startGraph) {
            context.ui().flash
                .duration(4000)
                .iconName('#iD-icon-no')
-                .label(t('operations.follow.error.unknown'))();
+                .label(t.html('operations.follow.error.unknown'))();
        }
    }

@@ -239,7 +239,7 @@ export function modeDragNode(context) {
                context.ui().flash
                    .duration(4000)
                    .iconName('#iD-icon-no')
-                    .label(t('operations.connect.' + isInvalid,
+                    .label(t.html('operations.connect.' + isInvalid,
                        { relation: presetManager.item('type/restriction').name() }
                    ))();
            }
@@ -248,7 +248,7 @@ export function modeDragNode(context) {
            context.ui().flash
                .duration(3000)
                .iconName('#iD-icon-no')
-                .label(t('self_intersection.error.' + errorID))();
+                .label(t.html('self_intersection.error.' + errorID))();
        } else {
            if (nope) {   // about to un-nope, remove hint
                context.ui().flash
@@ -12,7 +12,7 @@ export function modeDrawArea(context, wayID, startGraph, button) {
        .on('rejectedSelfIntersection.modeDrawArea', function() {
            context.ui().flash
                .iconName('#iD-icon-no')
-                .label(t('self_intersection.error.areas'))();
+                .label(t.html('self_intersection.error.areas'))();
        });

    mode.wayID = wayID;
@@ -12,7 +12,7 @@ export function modeDrawLine(context, wayID, startGraph, button, affix, continui
        .on('rejectedSelfIntersection.modeDrawLine', function() {
            context.ui().flash
                .iconName('#iD-icon-no')
-                .label(t('self_intersection.error.lines'))();
+                .label(t.html('self_intersection.error.lines'))();
        });

    mode.wayID = wayID;
@@ -400,7 +400,7 @@ export function modeSelect(context, selectedIDs) {
                        .duration(4000)
                        .iconName('#iD-icon-no')
                        .iconClass('operation disabled')
-                        .label(t('operations.scale.' + disabled + '.' + multi))();
+                        .label(t.html('operations.scale.' + disabled + '.' + multi))();
                } else {
                    const pivot = context.projection(extent.center());
                    const annotation = t('operations.scale.annotation.' + (isUp ? 'up' : 'down') + '.feature', { n: selectedIDs.length });
@@ -1,5 +1,6 @@
 import { geoArea as d3_geoArea, geoMercatorRaw as d3_geoMercatorRaw } from 'd3-geo';
 import { json as d3_json } from 'd3-fetch';
+import { escape } from 'lodash';

 import { t, localizer } from '../core/localizer';
 import { geoExtent, geoSphericalDistance } from '../geo';
@@ -68,19 +69,19 @@ export function rendererBackgroundSource(data) {

    source.name = function() {
        var id_safe = source.id.replace(/\./g, '<TX_DOT>');
-        return t('imagery.' + id_safe + '.name', { default: _name });
+        return t('imagery.' + id_safe + '.name', { default: escape(_name) });
    };


    source.label = function() {
        var id_safe = source.id.replace(/\./g, '<TX_DOT>');
-        return t.html('imagery.' + id_safe + '.name', { default: _name });
+        return t.html('imagery.' + id_safe + '.name', { default: escape(_name) });
    };


    source.description = function() {
        var id_safe = source.id.replace(/\./g, '<TX_DOT>');
-        return t.html('imagery.' + id_safe + '.description', { default: _description });
+        return t.html('imagery.' + id_safe + '.description', { default: escape(_description) });
    };


@@ -238,7 +238,7 @@ export function rendererTileLayer(context) {

            debug
                .selectAll('.tile-label-debug-coord')
-                .html(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; });
+                .text(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; });

            debug
                .selectAll('.tile-label-debug-vintage')
@@ -246,9 +246,11 @@ export function rendererTileLayer(context) {
                    var span = d3_select(this);
                    var center = context.projection.invert(tileCenter(d));
                    _source.getMetadata(center, d, function(err, result) {
-                        span.html((result && result.vintage && result.vintage.range) ||
-                            t('info_panels.background.vintage') + ': ' + t('info_panels.background.unknown')
-                        );
+                        if (result && result.vintage && result.vintage.range) {
+                          span.text(result.vintage.range);
+                        } else {
+                          span.html(t.html('info_panels.background.vintage') + ': ' + t.html('info_panels.background.unknown'));
+                        }
                    });
                });
        }
@@ -276,22 +276,22 @@ export default {
        controlsEnter
            .append('button')
            .on('click.back', step(-1))
-            .html('◄');
+            .text('◄');

        controlsEnter
            .append('button')
            .on('click.rotate-ccw', rotate(-90))
-            .html('⤿');
+            .text('⤿');

        controlsEnter
            .append('button')
            .on('click.rotate-cw', rotate(90))
-            .html('⤾');
+            .text('⤾');

        controlsEnter
            .append('button')
            .on('click.forward', step(1))
-            .html('►');
+            .text('►');

        wrapEnter
            .append('div')
@@ -428,7 +428,7 @@ export default {

        var wrap = context.container().select('.photoviewer .kartaview-wrapper');
        var imageWrap = wrap.selectAll('.kartaview-image-wrap');
-        var attribution = wrap.selectAll('.photo-attribution').html('');
+        var attribution = wrap.selectAll('.photo-attribution').text('');

        wrap
            .transition()
@@ -455,22 +455,22 @@ export default {
                    .attr('class', 'captured_by')
                    .attr('target', '_blank')
                    .attr('href', 'https://kartaview.org/user/' + encodeURIComponent(d.captured_by))
-                    .html('@' + d.captured_by);
+                    .text('@' + d.captured_by);

                attribution
                    .append('span')
-                    .html('|');
+                    .text('|');
            }

            if (d.captured_at) {
                attribution
                    .append('span')
                    .attr('class', 'captured_at')
-                    .html(localeDateString(d.captured_at));
+                    .text(localeDateString(d.captured_at));

                attribution
                    .append('span')
-                    .html('|');
+                    .text('|');
            }

            attribution
@@ -478,7 +478,7 @@ export default {
                .attr('class', 'image-link')
                .attr('target', '_blank')
                .attr('href', 'https://kartaview.org/details/' + d.sequence_id + '/' + d.sequence_index)
-                .html('kartaview.org');
+                .text('kartaview.org');
        }

        return this;
@@ -544,12 +544,12 @@ export default {
    controlsEnter
      .append('button')
      .on('click.back', step(-1))
-      .html('◄');
+      .text('◄');

    controlsEnter
      .append('button')
      .on('click.forward', step(1))
-      .html('►');
+      .text('►');


    // create working canvas for stitching together images
@@ -810,18 +810,18 @@ export default {
        .attr('class', 'captured_by')
        .attr('target', '_blank')
        .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
-        .html('©' + yyyy + ' Microsoft');
+        .text('©' + yyyy + ' Microsoft');

      captureInfo
        .append('span')
-        .html('|');
+        .text('|');
    }

    if (d.captured_at) {
      captureInfo
        .append('span')
        .attr('class', 'captured_at')
-        .html(localeTimestamp(d.captured_at));
+        .text(localeTimestamp(d.captured_at));
    }

    // Add image links
@@ -56,7 +56,7 @@ export function uiAttribution(context) {
        attribution
          .append('span')
          .attr('class', 'attribution-text')
-          .html(terms_text);
+          .text(terms_text);
      })
      .merge(attributions);

@@ -76,7 +76,7 @@ export function uiAttribution(context) {
      .merge(copyright);

    copyright
-      .html(String);
+      .text(String);
  }


@@ -384,7 +384,7 @@ export function uiCombobox(context, klass) {
                    return 'combobox-option ' + (d.klass || '');
                })
                .attr('title', function(d) { return d.title; })
-                .html(function(d) { return d.display || d.value; })
+                .text(function(d) { return d.display || d.value; })
                .on('mouseenter', _mouseEnterHandler)
                .on('mouseleave', _mouseLeaveHandler)
                .merge(options)
@@ -182,7 +182,7 @@ export function uiConflicts(context) {
            .append('a')
            .attr('class', 'conflict-description')
            .attr('href', '#')
-            .html(function(d) { return d.name; })
+            .text(function(d) { return d.name; })
            .on('click', function(d3_event, d) {
                d3_event.preventDefault();
                zoomToEntity(d.id);
@@ -264,7 +264,7 @@ export function uiConflicts(context) {

        labelEnter
            .append('span')
-            .html(function(d) { return d.text; });
+            .text(function(d) { return d.text; });

        // update
        choicesEnter
@@ -51,7 +51,7 @@ export function uiContributors(context) {
                .attr('href', function() {
                    return osm.changesetsURL(context.map().center(), context.map().zoom());
                })
-                .html(othersNum);
+                .text(othersNum);

            wrap.append('span')
                .html(t.html('contributors.truncated_list', { n: othersNum, users: { html: userList.html() }, count: { html: count.html() } }));
@@ -304,12 +304,12 @@ export function uiFeatureList(context) {
            label
                .append('span')
                .attr('class', 'entity-type')
-                .html(function(d) { return d.type; });
+                .text(function(d) { return d.type; });

            label
                .append('span')
                .attr('class', 'entity-name')
-                .html(function(d) { return d.name; });
+                .text(function(d) { return d.name; });

            enter
                .style('opacity', 0)
@@ -54,15 +54,15 @@ export function uiFieldHelp(context, fieldName) {
    var fieldHelpHeadings = {};

    var replacements = {
-        distField: t.html('restriction.controls.distance'),
-        viaField: t.html('restriction.controls.via'),
-        fromShadow: icon('#iD-turn-shadow', 'inline shadow from'),
-        allowShadow: icon('#iD-turn-shadow', 'inline shadow allow'),
-        restrictShadow: icon('#iD-turn-shadow', 'inline shadow restrict'),
-        onlyShadow: icon('#iD-turn-shadow', 'inline shadow only'),
-        allowTurn: icon('#iD-turn-yes', 'inline turn'),
-        restrictTurn: icon('#iD-turn-no', 'inline turn'),
-        onlyTurn: icon('#iD-turn-only', 'inline turn')
+        distField: { html: t.html('restriction.controls.distance') },
+        viaField: { html: t.html('restriction.controls.via') },
+        fromShadow: { html: icon('#iD-turn-shadow', 'inline shadow from') },
+        allowShadow: { html: icon('#iD-turn-shadow', 'inline shadow allow') },
+        restrictShadow: { html: icon('#iD-turn-shadow', 'inline shadow restrict') },
+        onlyShadow: { html: icon('#iD-turn-shadow', 'inline shadow only') },
+        allowTurn: { html: icon('#iD-turn-yes', 'inline turn') },
+        restrictTurn: { html: icon('#iD-turn-no', 'inline turn') },
+        onlyTurn: { html: icon('#iD-turn-only', 'inline turn') }
    };


@@ -527,13 +527,13 @@ export function uiFieldCombo(field, context) {
            }

            chips.select('span')
-                .html(function(d) { return d.value; });
+                .text(function(d) { return d.value; });

            chips.select('a')
                .attr('href', '#')
                .on('click', removeMultikey)
                .attr('class', 'remove')
-                .html('×');
+                .text('×');

        } else {
            var isMixed = Array.isArray(tags[field.key]);
@@ -77,7 +77,7 @@ export function uiFieldLanes(field, context) {
            .append('text')
            .attr('y', 40)
            .attr('x', 14)
-            .html('▲');
+            .text('▲');

        enter
            .append('g')
@@ -85,7 +85,7 @@ export function uiFieldLanes(field, context) {
            .append('text')
            .attr('y', 40)
            .attr('x', 14)
-            .html('▲▼');
+            .text('▲▼');

        enter
            .append('g')
@@ -93,7 +93,7 @@ export function uiFieldLanes(field, context) {
            .append('text')
            .attr('y', 40)
            .attr('x', 14)
-            .html('▼');
+            .text('▼');


        lane = lane
@@ -55,7 +55,7 @@ export function uiImproveOsmComments() {
                  .attr('target', '_blank');
              }
              selection
-                .html(d => d.username);
+                .text(d => d.username);
            });

        metadataEnter
@@ -67,7 +67,7 @@ export function uiImproveOsmComments() {
          .append('div')
            .attr('class', 'comment-text')
          .append('p')
-            .html(d => d.text);
+            .text(d => d.text);
    })
    .catch(err => {
      console.log(err); // eslint-disable-line no-console
@@ -47,7 +47,7 @@ export function uiImproveOsmDetails(context) {
    descriptionEnter
      .append('div')
        .attr('class', 'qa-details-description-text')
-        .html(issueDetail);
+        .text(issueDetail);

    // If there are entity links in the error message..
    let relatedEntities = [];
@@ -62,7 +62,7 @@ export function uiImproveOsmHeader() {
    headerEnter
      .append('div')
        .attr('class', 'qa-header-label')
-        .html(issueTitle);
+        .text(issueTitle);
  }

  improveOsmHeader.issue = function(val) {
@@ -83,7 +83,7 @@ export function uiIssuesInfo(context) {

        enter.merge(chips)
            .selectAll('span.count')
-            .html(function(d) {
+            .text(function(d) {
                return d.count.toString();
            });
    }
@@ -148,7 +148,7 @@ export function uiNoteEditor(context) {
            .append('h4')
            .attr('class', '.note-save-header')
            .html(function() {
-                return _note.isNew() ? t('note.newDescription') : t('note.newComment');
+                return _note.isNew() ? t.html('note.newDescription') : t.html('note.newComment');
            });

        var commentTextarea = noteSaveEnter
@@ -368,7 +368,7 @@ export function uiNoteEditor(context) {
            .html(function(d) {
                var action = (d.status === 'open' ? 'close' : 'open');
                var andComment = (d.newComment ? '_comment' : '');
-                return t('note.' + action + andComment);
+                return t.html('note.' + action + andComment);
            })
            .on('click.status', clickStatus);

@@ -49,9 +49,9 @@ export function uiNoteHeader() {
            .append('div')
            .attr('class', 'note-header-label')
            .html(function(d) {
-                if (_note.isNew()) { return t('note.new'); }
-                return t('note.note') + ' ' + d.id + ' ' +
-                    (d.status === 'closed' ? t('note.closed') : '');
+                if (_note.isNew()) { return t.html('note.new'); }
+                return t.html('note.note') + ' ' + d.id + ' ' +
+                    (d.status === 'closed' ? t.html('note.closed') : '');
            });
    }

@@ -140,7 +140,7 @@ export function uiOsmoseDetails(context) {
          .append('a')
            .attr('href', '#')
            .attr('class', 'error_entity_link')
-            .html(d => d)
+            .text(d => d)
            .each(function() {
              const link = d3_select(this);
              const entityID = this.textContent;
@@ -65,7 +65,7 @@ export function uiOsmoseHeader() {
    headerEnter
      .append('div')
        .attr('class', 'qa-header-label')
-        .html(issueTitle);
+        .text(issueTitle);
  }

  osmoseHeader.issue = function(val) {
@@ -46,7 +46,7 @@ export function uiPanelBackground(context) {
                .html(t.html('info_panels.background.' + k) + ':')
                .append('span')
                .attr('class', 'background-info-span-' + k)
-                .html(_metadata[k]);
+                .text(_metadata[k]);
        });

        debouncedGetMetadata(selection);
@@ -110,7 +110,7 @@ export function uiPanelBackground(context) {
        selection.selectAll('.background-info-list-zoom')
            .classed('hide', false)
            .selectAll('.background-info-span-zoom')
-            .html(_metadata.zoom);
+            .text(_metadata.zoom);

        if (!d || !d.length >= 3) return;

@@ -123,7 +123,7 @@ export function uiPanelBackground(context) {
            selection.selectAll('.background-info-list-vintage')
                .classed('hide', false)
                .selectAll('.background-info-span-vintage')
-                .html(_metadata.vintage);
+                .text(_metadata.vintage);

            // update other _metadata
            _metadataKeys.forEach(function(k) {
@@ -133,7 +133,7 @@ export function uiPanelBackground(context) {
                selection.selectAll('.background-info-list-' + k)
                    .classed('hide', !val)
                    .selectAll('.background-info-span-' + k)
-                    .html(val);
+                    .text(val);
            });
        });
    }
@@ -40,7 +40,7 @@ export function uiPanelHistory(context) {
                .attr('class', 'user-osm-link')
                .attr('href', osm.userURL(userName))
                .attr('target', '_blank')
-                .html('OSM');
+                .text('OSM');
        }

        links
@@ -49,7 +49,7 @@ export function uiPanelHistory(context) {
            .attr('href', 'https://hdyc.neis-one.org/?' + userName)
            .attr('target', '_blank')
            .attr('tabindex', -1)
-            .html('HDYC');
+            .text('HDYC');
    }


@@ -64,7 +64,7 @@ export function uiPanelHistory(context) {
        selection
            .append('span')
            .attr('class', 'changeset-id')
-            .html(changeset);
+            .text(changeset);

        var links = selection
            .append('div')
@@ -76,7 +76,7 @@ export function uiPanelHistory(context) {
                .attr('class', 'changeset-osm-link')
                .attr('href', osm.changesetURL(changeset))
                .attr('target', '_blank')
-                .html('OSM');
+                .text('OSM');
        }

        links
@@ -84,14 +84,14 @@ export function uiPanelHistory(context) {
            .attr('class', 'changeset-osmcha-link')
            .attr('href', 'https://osmcha.org/changesets/' + changeset)
            .attr('target', '_blank')
-            .html('OSMCha');
+            .text('OSMCha');

        links
            .append('a')
            .attr('class', 'changeset-achavi-link')
            .attr('href', 'https://overpass-api.de/achavi/?changeset=' + changeset)
            .attr('target', '_blank')
-            .html('Achavi');
+            .text('Achavi');
    }


@@ -101,7 +101,7 @@ export function uiPanelHistory(context) {

        var selected, note, entity;
        if (selectedNoteID && osm) {       // selected 1 note
-            selected = [ t('note.note') + ' ' + selectedNoteID ];
+            selected = [ t.html('note.note') + ' ' + selectedNoteID ];
            note = osm.getNote(selectedNoteID);
        } else {                           // selected 1..n entities
            selected = context.selectedIDs()
@@ -145,14 +145,14 @@ export function uiPanelHistory(context) {
            .append('li')
            .html(t.html('info_panels.history.note_comments') + ':')
            .append('span')
-            .html(note.comments.length);
+            .text(note.comments.length);

        if (note.comments.length) {
            list
                .append('li')
                .html(t.html('info_panels.history.note_created_date') + ':')
                .append('span')
-                .html(displayTimestamp(note.comments[0].date));
+                .text(displayTimestamp(note.comments[0].date));

            list
                .append('li')
@@ -192,7 +192,7 @@ export function uiPanelHistory(context) {
                .attr('href', osm.historyURL(entity))
                .attr('target', '_blank')
                .attr('title', t('info_panels.history.link_text'))
-                .html('OSM');
+                .text('OSM');
        }
        links
            .append('a')
@@ -200,7 +200,7 @@ export function uiPanelHistory(context) {
            .attr('href', 'https://pewu.github.io/osm-history/#/' + entity.type + '/' + entity.osmId())
            .attr('target', '_blank')
            .attr('tabindex', -1)
-            .html('PeWu');
+            .text('PeWu');

        var list = selection
            .append('ul');
@@ -209,13 +209,13 @@ export function uiPanelHistory(context) {
            .append('li')
            .html(t.html('info_panels.history.version') + ':')
            .append('span')
-            .html(entity.version);
+            .text(entity.version);

        list
            .append('li')
            .html(t.html('info_panels.history.last_edit') + ':')
            .append('span')
-            .html(displayTimestamp(entity.timestamp));
+            .text(displayTimestamp(entity.timestamp));

        list
            .append('li')
@@ -23,15 +23,15 @@ export function uiPanelLocation(context) {

        list
            .append('li')
-            .html(dmsCoordinatePair(coord))
+            .text(dmsCoordinatePair(coord))
            .append('li')
-            .html(decimalCoordinatePair(coord));
+            .text(decimalCoordinatePair(coord));

        // Location Info
        selection
            .append('div')
            .attr('class', 'location-info')
-            .html(currLocation || ' ');
+            .text(currLocation || ' ');

        debouncedGetLocation(selection, coord);
    }
@@ -42,12 +42,12 @@ export function uiPanelLocation(context) {
        if (!services.geocoder) {
            currLocation = t('info_panels.location.unknown_location');
            selection.selectAll('.location-info')
-                .html(currLocation);
+                .text(currLocation);
        } else {
            services.geocoder.reverse(coord, function(err, result) {
                currLocation = result ? result.display_name : t('info_panels.location.unknown_location');
                selection.selectAll('.location-info')
-                    .html(currLocation);
+                    .text(currLocation);
            });
        }
    }
@@ -52,7 +52,7 @@ export function uiPanelMeasurement(context) {
        if (selectedNoteID && osm) {       // selected 1 note

            var note = osm.getNote(selectedNoteID);
-            heading = t('note.note') + ' ' + selectedNoteID;
+            heading = t.html('note.note') + ' ' + selectedNoteID;
            location = note.loc;
            geometry = 'note';

@@ -65,7 +65,7 @@ export function uiPanelMeasurement(context) {
            });

            heading = selected.length === 1 ? selected[0].id :
-                t('info_panels.selected', { n: selected.length });
+                t.html('info_panels.selected', { n: selected.length });

            if (selected.length) {
                var extent = geoExtent();
@@ -132,7 +132,7 @@ export function uiPanelMeasurement(context) {
                .html(t.html('info_panels.measurement.geometry') + ':')
                .append('span')
                .html(
-                    closed ? t('info_panels.measurement.closed_' + geometry) : t('geometry.' + geometry)
+                    closed ? t('info_panels.measurement.closed_' + geometry) : t.html('geometry.' + geometry)
                );
        }

@@ -141,7 +141,7 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.node_count') + ':')
                .append('span')
-                .html(totalNodeCount.toLocaleString(localeCode));
+                .text(totalNodeCount.toLocaleString(localeCode));
        }

        if (area) {
@@ -149,7 +149,7 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.area') + ':')
                .append('span')
-                .html(displayArea(area, _isImperial));
+                .text(displayArea(area, _isImperial));
        }

        if (length) {
@@ -157,7 +157,7 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.' + (closed ? 'perimeter' : 'length')) + ':')
                .append('span')
-                .html(displayLength(length, _isImperial));
+                .text(displayLength(length, _isImperial));
        }

        if (typeof distance === 'number') {
@@ -165,7 +165,7 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.distance') + ':')
                .append('span')
-                .html(displayLength(distance, _isImperial));
+                .text(displayLength(distance, _isImperial));
        }

        if (location) {
@@ -173,9 +173,9 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.location') + ':');
            coordItem.append('span')
-                .html(dmsCoordinatePair(location));
+                .text(dmsCoordinatePair(location));
            coordItem.append('span')
-                .html(decimalCoordinatePair(location));
+                .text(decimalCoordinatePair(location));
        }

        if (centroid) {
@@ -183,9 +183,9 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.centroid') + ':');
            coordItem.append('span')
-                .html(dmsCoordinatePair(centroid));
+                .text(dmsCoordinatePair(centroid));
            coordItem.append('span')
-                .html(decimalCoordinatePair(centroid));
+                .text(decimalCoordinatePair(centroid));
        }

        if (center) {
@@ -193,9 +193,9 @@ export function uiPanelMeasurement(context) {
                .append('li')
                .html(t.html('info_panels.measurement.center') + ':');
            coordItem.append('span')
-                .html(dmsCoordinatePair(center));
+                .text(dmsCoordinatePair(center));
            coordItem.append('span')
-                .html(decimalCoordinatePair(center));
+                .text(decimalCoordinatePair(center));
        }

        if (length || area || typeof distance === 'number') {
@@ -96,13 +96,13 @@ export function uiPresetList(context) {
            var results, messageText;
            if (value.length) {
                results = presets.search(value, entityGeometries()[0], _currLoc);
-                messageText = t('inspector.results', {
+                messageText = t.html('inspector.results', {
                    n: results.collection.length,
                    search: value
                });
            } else {
                results = presetManager.defaults(entityGeometries()[0], 36, !context.inIntro(), _currLoc);
-                messageText = t('inspector.choose');
+                messageText = t.html('inspector.choose');
            }
            list.call(drawList, results);
            message.html(messageText);
@@ -55,7 +55,7 @@ export function uiScale(context) {

        selection.select('.scale-text')
            .style(localizer.textDirection() === 'ltr' ? 'left' : 'right', (scale.px + 16) + 'px')
-            .html(scale.text);
+            .text(scale.text);
    }


@@ -119,7 +119,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
            .property('value', function(d) { return _options[d]; });

        container.selectAll('.display-option-value')
-            .html(function(d) { return Math.floor(_options[d] * 100) + '%'; });
+            .text(function(d) { return Math.floor(_options[d] * 100) + '%'; });

        container.selectAll('.display-option-reset')
            .classed('disabled', function(d) { return _options[d] === 1; });
@@ -29,7 +29,7 @@ export function uiSectionChanges(context) {
        .label(function() {
            var history = context.history();
            var summary = history.difference().summary();
-            return t('inspector.title_count', { title: t.html('commit.changes'), count: summary.length });
+            return t.html('inspector.title_count', { title: t('commit.changes'), count: summary.length });
        })
        .disclosureContent(renderDisclosureContent);

@@ -79,7 +79,7 @@ export function uiSectionChanges(context) {
        buttons
            .append('strong')
            .attr('class', 'entity-type')
-            .html(function(d) {
+            .text(function(d) {
                var matched = presetManager.match(d.entity, d.graph);
                return (matched && matched.name()) || utilDisplayType(d.entity.id);
            });
@@ -87,7 +87,7 @@ export function uiSectionChanges(context) {
        buttons
            .append('span')
            .attr('class', 'entity-name')
-            .html(function(d) {
+            .text(function(d) {
                var name = utilDisplayName(d.entity) || '',
                    string = '';
                if (name !== '') {
@@ -217,7 +217,7 @@ export function uiSectionDataLayers(context) {
        containerEnter
            .append('h4')
            .attr('class', 'vectortile-header')
-            .html('Detroit Vector Tiles (Beta)');
+            .text('Detroit Vector Tiles (Beta)');

        containerEnter
            .append('ul')
@@ -231,7 +231,7 @@ export function uiSectionDataLayers(context) {
            .call(svgIcon('#iD-icon-out-link', 'inline'))
            .attr('href', 'https://github.com/osmus/detroit-mapping-challenge')
            .append('span')
-            .html('About these layers');
+            .text('About these layers');

        container = container
            .merge(containerEnter);
@@ -265,7 +265,7 @@ export function uiSectionDataLayers(context) {

        labelEnter
            .append('span')
-            .html(function(d) { return d.name; });
+            .text(function(d) { return d.name; });

        // Update
        li
@@ -24,7 +24,7 @@ export function uiSectionEntityIssues(context) {
            return _issues.length > 0;
        })
        .label(function() {
-            return t('inspector.title_count', { title: t.html('issues.list_title'), count: _issues.length });
+            return t.html('inspector.title_count', { title: t('issues.list_title'), count: _issues.length });
        })
        .disclosureContent(renderDisclosureContent);

@@ -33,7 +33,7 @@ export function uiSectionRawMemberEditor(context) {

            var gt = entity.members.length > _maxMembers ? '>' : '';
            var count = gt + entity.members.slice(0, _maxMembers).length;
-            return t('inspector.title_count', { title: t.html('inspector.members'), count: count });
+            return t.html('inspector.title_count', { title: t('inspector.members'), count: count });
        })
        .disclosureContent(renderDisclosureContent);

@@ -190,7 +190,7 @@ export function uiSectionRawMemberEditor(context) {
                    labelLink
                        .append('span')
                        .attr('class', 'member-entity-type')
-                        .html(function(d) {
+                        .text(function(d) {
                            var matched = presetManager.match(d.member, context.graph());
                            return (matched && matched.name()) || utilDisplayType(d.member.id);
                        });
@@ -198,7 +198,7 @@ export function uiSectionRawMemberEditor(context) {
                    labelLink
                        .append('span')
                        .attr('class', 'member-entity-name')
-                        .html(function(d) { return utilDisplayName(d.member); });
+                        .text(function(d) { return utilDisplayName(d.member); });

                    label
                        .append('button')
@@ -341,15 +341,15 @@ export function uiSectionRawMembershipEditor(context) {
        labelLink
            .append('span')
            .attr('class', 'member-entity-type')
-            .html(function(d) {
+            .text(function(d) {
                var matched = presetManager.match(d.relation, context.graph());
-                return (matched && matched.name()) || t('inspector.relation');
+                return (matched && matched.name()) || t.html('inspector.relation');
            });

        labelLink
            .append('span')
            .attr('class', 'member-entity-name')
-            .html(function(d) { return utilDisplayName(d.relation); });
+            .text(function(d) { return utilDisplayName(d.relation); });

        labelEnter
            .append('button')
@@ -116,10 +116,10 @@ export function uiSectionSelectionList(context) {
            });

        items.selectAll('.entity-type')
-            .html(function(entity) { return presetManager.match(entity, context.graph()).name(); });
+            .text(function(entity) { return presetManager.match(entity, context.graph()).name(); });

        items.selectAll('.entity-name')
-            .html(function(d) {
+            .text(function(d) {
                // fetch latest entity
                var entity = context.entity(d.id);
                return utilDisplayName(entity);
@@ -104,7 +104,7 @@ export function uiSectionValidationRules(context) {
            .html(function(d) {
                var params = {};
                if (d === 'unsquare_way') {
-                    params.val = '<span class="square-degrees"></span>';
+                    params.val = { html: '<span class="square-degrees"></span>' };
                }
                return t.html('issues.' + d + '.title', params);
            });
@@ -78,7 +78,7 @@ export function uiSectionValidationStatus(context) {
            .merge(resetIgnoredEnter);

        resetIgnored.select('a')
-            .html(t('inspector.title_count', { title: t.html('issues.reset_ignored'), count: ignoredIssues.length }));
+            .html(t.html('inspector.title_count', { title: t('issues.reset_ignored'), count: ignoredIssues.length }));

        resetIgnored.on('click', function(d3_event) {
            d3_event.preventDefault();
@@ -152,11 +152,11 @@ export function uiShortcuts(context) {
                selection
                    .append('kbd')
                    .attr('class', 'modifier')
-                    .html(function (d) { return uiCmd.display(d); });
+                    .text(function (d) { return uiCmd.display(d); });

                selection
                    .append('span')
-                    .html('+');
+                    .text('+');
            });


@@ -201,7 +201,7 @@ export function uiShortcuts(context) {
                    selection
                        .append('kbd')
                        .attr('class', 'shortcut')
-                        .html(function (d) { return d.shortcut; });
+                        .text(function (d) { return d.shortcut; });
                }

                if (i < nodes.length - 1) {
@@ -211,7 +211,7 @@ export function uiShortcuts(context) {
                } else if (i === nodes.length - 1 && d.suffix) {
                    selection
                        .append('span')
-                        .html(d.suffix);
+                        .text(d.suffix);
                }
            });

@@ -223,7 +223,7 @@ export function uiShortcuts(context) {

                selection
                    .append('span')
-                    .html('+');
+                    .text('+');

                selection
                    .append('span')
@@ -292,7 +292,7 @@ export function uiSuccess(context) {
        .select('.hide-toggle')
        .append('span')
        .attr('class', 'badge-text')
-        .html(nextEvents.length);
+        .text(nextEvents.length);
    }


@@ -342,7 +342,7 @@ export function uiSuccess(context) {
        .append('a')
        .attr('target', '_blank')
        .attr('href', d => d.url)
-        .html(d => {
+        .text(d => {
          let name = d.name;
          if (d.i18n && d.id) {
            name = t(`community.${communityID}.events.${d.id}.name`, { default: name });
@@ -353,7 +353,7 @@ export function uiSuccess(context) {
      itemEnter
        .append('div')
        .attr('class', 'community-event-when')
-        .html(d => {
+        .text(d => {
          let options = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' };
          if (d.date.getHours() || d.date.getMinutes()) {   // include time if it has one
            options.hour = 'numeric';
@@ -365,7 +365,7 @@ export function uiSuccess(context) {
      itemEnter
        .append('div')
        .attr('class', 'community-event-where')
-        .html(d => {
+        .text(d => {
          let where = d.where;
          if (d.i18n && d.id) {
            where = t(`community.${communityID}.events.${d.id}.where`, { default: where });
@@ -376,7 +376,7 @@ export function uiSuccess(context) {
      itemEnter
        .append('div')
        .attr('class', 'community-event-description')
-        .html(d => {
+        .text(d => {
          let description = d.description;
          if (d.i18n && d.id) {
            description = t(`community.${communityID}.events.${d.id}.description`, { default: description });
@@ -67,7 +67,7 @@ export function uiToolSave(context) {
                .style('background', bgColor(_numChanges));

            button.select('span.count')
-                .html(_numChanges);
+                .text(_numChanges);
        }
    }

@@ -112,7 +112,7 @@ export function uiToolSave(context) {
            .append('span')
            .attr('class', 'count')
            .attr('aria-hidden', 'true')
-            .html('0');
+            .text('0');

        updateCount();

@@ -85,8 +85,8 @@ export function uiToolUndoRedo(context) {
                    // there are no tooltips for touch interactions so flash feedback instead

                    var text = annotation ?
-                        t(d.id + '.tooltip', { action: annotation }) :
-                        t(d.id + '.nothing');
+                        t.html(d.id + '.tooltip', { action: annotation }) :
+                        t.html(d.id + '.nothing');
                    context.ui().flash
                        .duration(2000)
                        .iconName('#' + d.icon)
@@ -32,7 +32,7 @@ export function uiVersion(context) {
            .append('a')
            .attr('target', '_blank')
            .attr('href', 'https://github.com/openstreetmap/iD')
-            .html(currVersion);
+            .text(currVersion);

        // only show new version indicator to users that have used iD before
        if (isNewVersion && !isNewUser) {