From 0bc56f94712346cea6b794df0a26163a47415d64 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Fri, 26 Jun 2020 15:48:57 -0400
Subject: [PATCH 01/30] Start touch support for walkthrough (re: #7692)

---
 data/core.yaml                 | 51 ++++++++++++++++++--------------
 dist/locales/en.json           | 53 +++++++++++++++++++---------------
 modules/core/context.js        |  1 +
 modules/ui/curtain.js          | 13 +++++++--
 modules/ui/init.js             | 12 ++++++--
 modules/ui/intro/area.js       | 10 ++++---
 modules/ui/intro/building.js   | 40 +++++++------------------
 modules/ui/intro/line.js       | 40 +++++++------------------
 modules/ui/intro/navigation.js | 17 +++++++----
 modules/ui/intro/point.js      | 37 +++++++-----------------
 10 files changed, 131 insertions(+), 143 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 91c2feef5d..043886df3f 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1927,12 +1927,15 @@ en:
       chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Press '{next}' to continue.**"
     navigation:
       title: "Navigation"
-      drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag or tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
-      zoom: "You can zoom in or out by scrolling with a mouse wheel, pinching on a touchscreen, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
+      drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      drag_touch: "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
+      zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
-      click_townhall: "All features on the map can be selected by clicking or tapping on them. **Select the point.**"
+      click_townhall: "All features on the map can be selected by clicking on them. **Click the point to select it.**"
+      tap_townhall: "All features on the map can be selected by tapping on them. **Tap the point to select it.**"
       selected_townhall: "Great! The point is now selected. Selected features are drawn with a pulsing glow."
       editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
       preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}."
@@ -1945,33 +1948,37 @@ en:
       play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     points:
       title: "Points"
-      add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**"
+      add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {button} Point button to add a new point.**"
       place_point: "To place the new point on the map, position your mouse cursor where the point should go, then left-click or press the spacebar. **Move the mouse pointer over this building, then left-click or press the spacebar.**"
+      place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**"
       search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**"
       choose_cafe: "**Choose {preset} from the list.**"
       feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
       add_name: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**"
-      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or click the {button} button to close the feature editor.**"
-      reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**"
+      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or press the {button} button to close the feature editor.**"
+      reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**"
       update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**"
-      update_close: "**When you are finished updating the cafe, hit escape, enter, or click the {button} button to close the feature editor.**"
-      rightclick: "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**"
-      delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**"
-      undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**"
-      play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
+      update_close: "**When you are finished updating the cafe, hit escape, enter, or press the {button} button to close the feature editor.**"
+      rightclick: "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click, or a two-finger tap on a trackpad. **Right-click to select the point you created and show the edit menu.**"
+      edit_menu_touch: "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**"
+      delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {button} button to delete the point.**"
+      undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {button} button to undo the delete and get the point back.**"
+      play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
     areas:
       title: "Areas"
-      add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**"
+      add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {button} Area button to add a new area.**"
       start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**"
+      start_playground_touch: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**"
       continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
       finish_playground: "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**"
+      finish_playground_touch: "Finish the area by tapping again on either the first or last node, or by pressing enter on a keyboard. **Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
       add_field: "This playground doesn't have an official name, so we won't add anything in the Name field.{br}Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**"
       choose_field: "**Choose {field} from the list.**"
       retry_add_field: "You didn't select the {field} field. Let's try again."
-      describe_playground: "**Add a description, then click the {button} button to close the feature editor.**"
-      play: "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
+      describe_playground: "**Add a description, then press the {button} button to close the feature editor.**"
+      play: "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     lines:
       title: "Lines"
       add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**"
@@ -2000,10 +2007,10 @@ en:
       multi_rightclick: "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**"
       multi_delete: "**Click on the {button} button to delete the extra lines.**"
       retry_delete: "You didn't click the Delete button. Try again."
-      play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, click '{next}'.**"
+      play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
     buildings:
       title: "Buildings"
-      add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**"
+      add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {button} Area button to add a new area.**"
       start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**"
       continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing enter, or clicking again on either the first or last node. **Finish tracing the building.**"
       retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
@@ -2011,21 +2018,21 @@ en:
       choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**"
       close: "**Hit escape or click the {button} button to close the feature editor.**"
       rightclick_building: "**Right-click to select the building you created and show the edit menu.**"
-      square_building: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**"
-      retry_square: "You didn't click the Square button. Try again."
+      square_building: "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**"
+      retry_square: "You didn't press the Square button. Try again."
       done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
-      add_tank: "Next we'll trace this circular storage tank. **Click the {button} Area button to add a new area.**"
+      add_tank: "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**"
       start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**"
       continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing enter, or clicking again on either the first or last node. **Finish tracing the tank.**"
       search_tank: "**Search for '{preset}'.**"
       choose_tank: "**Choose {preset} from the list.**"
       rightclick_tank: "**Right-click to select the storage tank you created and show the edit menu.**"
-      circle_tank: "**Click on the {button} button to make the tank a circle.**"
+      circle_tank: "**Press the {button} button to make the tank a circle.**"
       retry_circle: "You didn't click the Circularize button. Try again."
-      play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, click '{next}'.**"
+      play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
     startediting:
       title: "Start Editing"
-      help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key."
+      help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {button} Help button or the '{key}' key."
       shortcuts: "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index beb4978ca3..4bcce18757 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2402,12 +2402,15 @@
             },
             "navigation": {
                 "title": "Navigation",
-                "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag or tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
-                "zoom": "You can zoom in or out by scrolling with a mouse wheel, pinching on a touchscreen, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
+                "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "drag_touch": "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
+                "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
-                "click_townhall": "All features on the map can be selected by clicking or tapping on them. **Select the point.**",
+                "click_townhall": "All features on the map can be selected by clicking on them. **Click the point to select it.**",
+                "tap_townhall": "All features on the map can be selected by tapping on them. **Tap the point to select it.**",
                 "selected_townhall": "Great! The point is now selected. Selected features are drawn with a pulsing glow.",
                 "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",
                 "preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.",
@@ -2421,34 +2424,38 @@
             },
             "points": {
                 "title": "Points",
-                "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**",
+                "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {button} Point button to add a new point.**",
                 "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then left-click or press the spacebar. **Move the mouse pointer over this building, then left-click or press the spacebar.**",
+                "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**",
                 "search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**",
                 "choose_cafe": "**Choose {preset} from the list.**",
                 "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
                 "add_name": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**",
-                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or click the {button} button to close the feature editor.**",
-                "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**",
+                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or press the {button} button to close the feature editor.**",
+                "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**",
                 "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**",
-                "update_close": "**When you are finished updating the cafe, hit escape, enter, or click the {button} button to close the feature editor.**",
-                "rightclick": "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**",
-                "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**",
-                "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**",
-                "play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
+                "update_close": "**When you are finished updating the cafe, hit escape, enter, or press the {button} button to close the feature editor.**",
+                "rightclick": "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click, or a two-finger tap on a trackpad. **Right-click to select the point you created and show the edit menu.**",
+                "edit_menu_touch": "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**",
+                "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {button} button to delete the point.**",
+                "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {button} button to undo the delete and get the point back.**",
+                "play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "areas": {
                 "title": "Areas",
-                "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Click the {button} Area button to add a new area.**",
+                "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {button} Area button to add a new area.**",
                 "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**",
+                "start_playground_touch": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**",
                 "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
                 "finish_playground": "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**",
+                "finish_playground_touch": "Finish the area by tapping again on either the first or last node, or by pressing enter on a keyboard. **Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
                 "add_field": "This playground doesn't have an official name, so we won't add anything in the Name field.{br}Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**",
                 "choose_field": "**Choose {field} from the list.**",
                 "retry_add_field": "You didn't select the {field} field. Let's try again.",
-                "describe_playground": "**Add a description, then click the {button} button to close the feature editor.**",
-                "play": "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
+                "describe_playground": "**Add a description, then press the {button} button to close the feature editor.**",
+                "play": "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "lines": {
                 "title": "Lines",
@@ -2478,11 +2485,11 @@
                 "multi_rightclick": "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**",
                 "multi_delete": "**Click on the {button} button to delete the extra lines.**",
                 "retry_delete": "You didn't click the Delete button. Try again.",
-                "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, click '{next}'.**"
+                "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "buildings": {
                 "title": "Buildings",
-                "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**",
+                "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {button} Area button to add a new area.**",
                 "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**",
                 "continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing enter, or clicking again on either the first or last node. **Finish tracing the building.**",
                 "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!",
@@ -2490,22 +2497,22 @@
                 "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**",
                 "close": "**Hit escape or click the {button} button to close the feature editor.**",
                 "rightclick_building": "**Right-click to select the building you created and show the edit menu.**",
-                "square_building": "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**",
-                "retry_square": "You didn't click the Square button. Try again.",
+                "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**",
+                "retry_square": "You didn't press the Square button. Try again.",
                 "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
-                "add_tank": "Next we'll trace this circular storage tank. **Click the {button} Area button to add a new area.**",
+                "add_tank": "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**",
                 "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**",
                 "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing enter, or clicking again on either the first or last node. **Finish tracing the tank.**",
                 "search_tank": "**Search for '{preset}'.**",
                 "choose_tank": "**Choose {preset} from the list.**",
                 "rightclick_tank": "**Right-click to select the storage tank you created and show the edit menu.**",
-                "circle_tank": "**Click on the {button} button to make the tank a circle.**",
+                "circle_tank": "**Press the {button} button to make the tank a circle.**",
                 "retry_circle": "You didn't click the Circularize button. Try again.",
-                "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, click '{next}'.**"
+                "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "startediting": {
                 "title": "Start Editing",
-                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button or pressing the '{key}' key.",
+                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {button} Help button or the '{key}' key.",
                 "shortcuts": "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key.",
                 "save": "Don't forget to regularly save your changes!",
                 "start": "Start mapping!"
@@ -13012,4 +13019,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/modules/core/context.js b/modules/core/context.js
index 0119603585..77e61ca336 100644
--- a/modules/core/context.js
+++ b/modules/core/context.js
@@ -80,6 +80,7 @@ export function coreContext() {
   /* User interface and keybinding */
   let _ui;
   context.ui = () => _ui;
+  context.lastPointerType = () => _ui.lastPointerType();
 
   let _keybinding = utilKeybinding('context');
   context.keybinding = () => _keybinding;
diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js
index 380aa47024..4e9fd3abef 100644
--- a/modules/ui/curtain.js
+++ b/modules/ui/curtain.js
@@ -64,9 +64,12 @@ export function uiCurtain(containerNode) {
      * @param  {integer}   [options.duration]        transition time in milliseconds
      * @param  {string}    [options.buttonText]      if set, create a button with this text label
      * @param  {function}  [options.buttonCallback]  if set, the callback for the button
+     * @param  {function}  [options.padding]         extra margin in px to put around bbox
      * @param  {String|ClientRect} [options.tooltipBox]  box for tooltip position, if different from box for the curtain
      */
     curtain.reveal = function(box, text, options) {
+        options = options || {};
+
         if (typeof box === 'string') {
             box = d3_select(box).node();
         }
@@ -76,8 +79,14 @@ export function uiCurtain(containerNode) {
             box.top -= containerRect.top;
             box.left -= containerRect.left;
         }
-
-        options = options || {};
+        if (box && options.padding) {
+            box.top -= options.padding;
+            box.left -= options.padding;
+            box.bottom += options.padding;
+            box.right += options.padding;
+            box.height += options.padding * 2;
+            box.width += options.padding * 2;
+        }
 
         var tooltipBox;
         if (options.tooltipBox) {
diff --git a/modules/ui/init.js b/modules/ui/init.js
index b5b5f0dd34..797e779bba 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -52,6 +52,8 @@ export function uiInit(context) {
     var _initCounter = 0;
     var _needWidth = {};
 
+    var _lastPointerType;
+
 
     function render(container) {
 
@@ -92,13 +94,15 @@ export function uiInit(context) {
         if ('PointerEvent' in window) {
             d3_select(window)
                 .on('pointerdown.ui pointerup.ui', function() {
-                    var pointerType =  d3_event.pointerType || 'mouse';
-                    if (container.attr('pointer') !== pointerType) {
+                    var pointerType = d3_event.pointerType || 'mouse';
+                    if (_lastPointerType !== pointerType) {
+                        _lastPointerType = pointerType;
                         container
                             .attr('pointer', pointerType);
                     }
                 }, true);
         } else {
+            _lastPointerType = 'mouse';
             container
                 .attr('pointer', 'mouse');
         }
@@ -478,6 +482,10 @@ export function uiInit(context) {
         ui.ensureLoaded();
     };
 
+    ui.lastPointerType = function() {
+        return _lastPointerType;
+    };
+
     ui.flash = uiFlash(context);
 
     ui.sidebar = uiSidebar(context);
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 53b4db2c5f..78a69ef64f 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -90,14 +90,15 @@ export function uiIntroArea(context, reveal) {
         context.map().zoomEase(19.5, 500);
 
         timeout(function() {
+            var textId = context.lastPointerType() === 'mouse' ? 'start_playground' : 'start_playground_touch';
             revealPlayground(playground,
-                t('intro.areas.start_playground'), { duration: 250 }
+                t('intro.areas.' + textId), { duration: 250 }
             );
 
             timeout(function() {
                 context.map().on('move.intro drawn.intro', function() {
                     revealPlayground(playground,
-                        t('intro.areas.start_playground'), { duration: 0 }
+                        t('intro.areas.' + textId), { duration: 0 }
                     );
                 });
                 context.on('enter.intro', function(mode) {
@@ -166,14 +167,15 @@ export function uiIntroArea(context, reveal) {
         }
 
         _areaID = null;
+        var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_touch';
         revealPlayground(playground,
-            t('intro.areas.finish_playground'), { duration: 250 }
+            t('intro.areas.' + textId), { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    t('intro.areas.finish_playground'), { duration: 0 }
+                    t('intro.areas.' + textId), { duration: 0 }
                 );
             });
         }, 250);  // after reveal
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index 00f6a3ea86..7e35ee2221 100644
--- a/modules/ui/intro/building.js
+++ b/modules/ui/intro/building.js
@@ -5,7 +5,7 @@ import {
 } from 'd3-selection';
 
 import { presetManager } from '../../presets';
-import { t, localizer } from '../../core/localizer';
+import { t } from '../../core/localizer';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilArrayUniq, utilRebind } from '../../util';
@@ -54,24 +54,6 @@ export function uiIntroBuilding(context, reveal) {
     }
 
 
-    function revealEditMenu(loc, text, options) {
-        var rect = context.surfaceRect();
-        var point = context.curtainProjection(loc);
-        var pad = 40;
-        var width = 250 + (2 * pad);
-        var height = 350;
-        var startX = rect.left + point[0];
-        var left = (localizer.textDirection() === 'rtl') ? (startX - width + pad) : (startX - pad);
-        var box = {
-            left: left,
-            top: point[1] + rect.top - 60,
-            width: width,
-            height: height
-        };
-        reveal(box, text, options);
-    }
-
-
     function addHouse() {
         context.enter(modeBrowse(context));
         context.history().reset('initial');
@@ -372,10 +354,10 @@ export function uiIntroBuilding(context, reveal) {
         if (!node) { return continueTo(rightClickHouse); }
 
         var wasChanged = false;
-        var menuCoords = context.map().mouseCoordinates();
 
-        revealEditMenu(menuCoords,
-            t('intro.buildings.square_building', { button: icon('#iD-operation-orthogonalize', 'pre-text') })
+        reveal('.edit-menu',
+            t('intro.buildings.square_building', { button: icon('#iD-operation-orthogonalize', 'pre-text') }),
+            { padding: 50 }
         );
 
         context.on('enter.intro', function(mode) {
@@ -390,9 +372,9 @@ export function uiIntroBuilding(context, reveal) {
             var node = selectMenuItem(context, 'orthogonalize').node();
             if (!wasChanged && !node) { return continueTo(rightClickHouse); }
 
-            revealEditMenu(menuCoords,
+            reveal('.edit-menu',
                 t('intro.buildings.square_building', { button: icon('#iD-operation-orthogonalize', 'pre-text') }),
-                { duration: 0 }
+                { duration: 0, padding: 50 }
             );
         });
 
@@ -694,10 +676,10 @@ export function uiIntroBuilding(context, reveal) {
         if (!node) { return continueTo(rightClickTank); }
 
         var wasChanged = false;
-        var menuCoords = context.map().mouseCoordinates();
 
-        revealEditMenu(menuCoords,
-            t('intro.buildings.circle_tank', { button: icon('#iD-operation-circularize', 'pre-text') })
+        reveal('.edit-menu',
+            t('intro.buildings.circle_tank', { button: icon('#iD-operation-circularize', 'pre-text') }),
+            { padding: 50 }
         );
 
         context.on('enter.intro', function(mode) {
@@ -712,9 +694,9 @@ export function uiIntroBuilding(context, reveal) {
             var node = selectMenuItem(context, 'circularize').node();
             if (!wasChanged && !node) { return continueTo(rightClickTank); }
 
-            revealEditMenu(menuCoords,
+            reveal('.edit-menu',
                 t('intro.buildings.circle_tank', { button: icon('#iD-operation-circularize', 'pre-text') }),
-                { duration: 0 }
+                { duration: 0, padding: 50 }
             );
         });
 
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 6e4440dccf..289ab266ec 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -6,7 +6,7 @@ import {
 } from 'd3-selection';
 
 import { presetManager } from '../../presets';
-import { t, localizer } from '../../core/localizer';
+import { t } from '../../core/localizer';
 import { geoSphericalDistance } from '../../geo';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
@@ -56,24 +56,6 @@ export function uiIntroLine(context, reveal) {
     }
 
 
-    function revealEditMenu(loc, text, options) {
-        var rect = context.surfaceRect();
-        var point = context.curtainProjection(loc);
-        var pad = 40;
-        var width = 250 + (2 * pad);
-        var height = 350;
-        var startX = rect.left + point[0];
-        var left = (localizer.textDirection() === 'rtl') ? (startX - width + pad) : (startX - pad);
-        var box = {
-            left: left,
-            top: point[1] + rect.top - 60,
-            width: width,
-            height: height
-        };
-        reveal(box, text, options);
-    }
-
-
     function addLine() {
         context.enter(modeBrowse(context));
         context.history().reset('initial');
@@ -707,20 +689,20 @@ export function uiIntroLine(context, reveal) {
         if (!node) { return continueTo(rightClickIntersection); }
 
         var wasChanged = false;
-        var menuCoords = context.map().mouseCoordinates();
         _washingtonSegmentID = null;
 
-        revealEditMenu(menuCoords, t('intro.lines.split_intersection',
-            { button: icon('#iD-operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') })
+        reveal('.edit-menu', t('intro.lines.split_intersection',
+            { button: icon('#iD-operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') }),
+            { padding: 50 }
         );
 
         context.map().on('move.intro drawn.intro', function() {
             var node = selectMenuItem(context, 'split').node();
             if (!wasChanged && !node) { return continueTo(rightClickIntersection); }
 
-            revealEditMenu(menuCoords, t('intro.lines.split_intersection',
+            reveal('.edit-menu', t('intro.lines.split_intersection',
                 { button: icon('#iD-operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') }),
-                { duration: 0 }
+                { duration: 0, padding: 50 }
             );
         });
 
@@ -984,15 +966,15 @@ export function uiIntroLine(context, reveal) {
         var node = selectMenuItem(context, 'delete').node();
         if (!node) return continueTo(multiRightClick);
 
-        var menuCoords = context.map().mouseCoordinates();
-        revealEditMenu(menuCoords,
-            t('intro.lines.multi_delete', { button: icon('#iD-operation-delete', 'pre-text') })
+        reveal('.edit-menu',
+            t('intro.lines.multi_delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+            { padding: 50 }
         );
 
         context.map().on('move.intro drawn.intro', function() {
-            revealEditMenu(menuCoords,
+            reveal('.edit-menu',
                 t('intro.lines.multi_delete', { button: icon('#iD-operation-delete', 'pre-text') }),
-                { duration: 0 }
+                { duration: 0, padding: 50 }
             );
         });
 
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index d34a3b69d3..7843aac4c8 100644
--- a/modules/ui/intro/navigation.js
+++ b/modules/ui/intro/navigation.js
@@ -58,9 +58,11 @@ export function uiIntroNavigation(context, reveal) {
         timeout(function() {
             var centerStart = context.map().center();
 
-            reveal('.surface', t('intro.navigation.drag'));
+            var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch';
+
+            reveal('.surface', t('intro.navigation.' + textId));
             context.map().on('drawn.intro', function() {
-                reveal('.surface', t('intro.navigation.drag'), { duration: 0 });
+                reveal('.surface', t('intro.navigation.' + textId), { duration: 0 });
             });
 
             context.map().on('move.intro', function() {
@@ -83,8 +85,10 @@ export function uiIntroNavigation(context, reveal) {
     function zoomMap() {
         var zoomStart = context.map().zoom();
 
+        var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch';
+
         reveal('.surface',
-            t('intro.navigation.zoom', {
+            t('intro.navigation.' + textId, {
                 plus: icon('#iD-icon-plus', 'pre-text'),
                 minus: icon('#iD-icon-minus', 'pre-text')
             })
@@ -92,7 +96,7 @@ export function uiIntroNavigation(context, reveal) {
 
         context.map().on('drawn.intro', function() {
             reveal('.surface',
-                t('intro.navigation.zoom', {
+                t('intro.navigation.' + textId, {
                     plus: icon('#iD-icon-plus', 'pre-text'),
                     minus: icon('#iD-icon-minus', 'pre-text')
                 }), { duration: 0 }
@@ -183,13 +187,14 @@ export function uiIntroNavigation(context, reveal) {
             var entity = context.hasEntity(hallId);
             if (!entity) return;
             var box = pointBox(entity.loc, context);
-            reveal(box, t('intro.navigation.click_townhall'));
+            var textId = context.lastPointerType() === 'mouse' ? 'click_townhall' : 'tap_townhall';
+            reveal(box, t('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, t('intro.navigation.click_townhall'), { duration: 0 });
+                reveal(box, t('intro.navigation.' + textId), { duration: 0 });
             });
 
             context.on('enter.intro', function() {
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index a5ddcae03f..81917c9cde 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -32,24 +32,6 @@ export function uiIntroPoint(context, reveal) {
     }
 
 
-    function revealEditMenu(loc, text, options) {
-        var rect = context.surfaceRect();
-        var point = context.curtainProjection(loc);
-        var pad = 40;
-        var width = 250 + (2 * pad);
-        var height = 250;
-        var startX = rect.left + point[0];
-        var left = (localizer.textDirection() === 'rtl') ? (startX - width + pad) : (startX - pad);
-        var box = {
-            left: left,
-            top: point[1] + rect.top - 60,
-            width: width,
-            height: height
-        };
-        reveal(box, text, options);
-    }
-
-
     function eventCancel() {
         d3_event.stopPropagation();
         d3_event.preventDefault();
@@ -95,11 +77,12 @@ export function uiIntroPoint(context, reveal) {
         }
 
         var pointBox = pad(building, 150, context);
-        reveal(pointBox, t('intro.points.place_point'));
+        var textId = context.lastPointerType() === 'mouse' ? 'place_point' : 'place_point_touch';
+        reveal(pointBox, t('intro.points.' + textId));
 
         context.map().on('move.intro drawn.intro', function() {
             pointBox = pad(building, 150, context);
-            reveal(pointBox, t('intro.points.place_point'), { duration: 0 });
+            reveal(pointBox, t('intro.points.' + textId), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -385,14 +368,15 @@ export function uiIntroPoint(context, reveal) {
         context.enter(modeBrowse(context));
 
         var box = pointBox(entity.loc, context);
-        reveal(box, t('intro.points.rightclick'), { duration: 600 });
+        var textId = context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch';
+        reveal(box, t('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, t('intro.points.rightclick'), { duration: 0 });
+                reveal(box, t('intro.points.' + textId), { duration: 0 });
             });
         }, 600); // after reveal
 
@@ -424,15 +408,16 @@ export function uiIntroPoint(context, reveal) {
         var node = selectMenuItem(context, 'delete').node();
         if (!node) { return continueTo(rightClickPoint); }
 
-        revealEditMenu(entity.loc,
-            t('intro.points.delete', { button: icon('#iD-operation-delete', 'pre-text') })
+        reveal('.edit-menu',
+            t('intro.points.delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+            { padding: 50 }
         );
 
         timeout(function() {
             context.map().on('move.intro', function() {
-                revealEditMenu(entity.loc,
+                reveal('.edit-menu',
                     t('intro.points.delete', { button: icon('#iD-operation-delete', 'pre-text') }),
-                    { duration: 0}
+                    { duration: 0,  padding: 50 }
                 );
             });
         }, 300); // after menu visible

From af4aca14b280140f915c3c54ba2be9e48ba34927 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 11:33:47 -0400
Subject: [PATCH 02/30] Use standard kbd styling for keys in help documentation

---
 css/80_app.css           | 13 -------------
 modules/ui/panes/help.js |  2 ++
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index f7c0e22354..4033057553 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3746,19 +3746,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin-bottom: 20px;
 }
 
-.help-pane .left-content .body p code {
-    padding: 3px 4px;
-    font-size: 12px;
-    color: #555;
-    vertical-align: baseline;
-    background-color: #f6f6f6;
-    border: solid 1px #ccc;
-    margin: 0 2px;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
-}
-
 .help-pane .left-content .icon.pre-text {
     vertical-align: text-top;
     margin-right: 0;
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index a8ec04471e..217fdf903c 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -271,6 +271,8 @@ export function uiPaneHelp(context) {
         return {
             title: t(helpkey + '.title'),
             html: marked(text.trim())
+                .replace(/<code>/g, '<kbd>')
+                .replace(/<\/code>/g, '<\/kbd>')
         };
     });
 

From ac0dcf8701ce6c9231ee91a128d26af6165ad457 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 12:21:30 -0400
Subject: [PATCH 03/30] Use placeholder references in the help docs for strings
 used elsewhere in the document

---
 data/core.yaml           | 46 ++++++++++++++++++++-------------------
 dist/locales/en.json     | 46 ++++++++++++++++++++-------------------
 modules/ui/panes/help.js | 47 +++++++++++++++++++++++++++-------------
 3 files changed, 80 insertions(+), 59 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 531983c0b8..dc3d92cf27 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -475,9 +475,11 @@ en:
       select_from_name: "Click to select {from} {fromName}"
       toggle: "Click for \"{turn}\""
   undo:
+    title: Undo
     tooltip: "Undo: {action}"
     nothing: Nothing to undo.
   redo:
+    title: Redo
     tooltip: "Redo: {action}"
     nothing: Nothing to redo.
   tooltip_keyhint: "Shortcut:"
@@ -1296,7 +1298,7 @@ en:
       open_data_h: "Open Data"
       open_data: "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright)."
       before_start_h: "Before you start"
-      before_start: "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"Start the Walkthrough\" on this screen to take the tutorial - it takes only about 15 minutes."
+      before_start: "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"{start_the_walkthrough}\" on this screen to take the tutorial - it takes only about 15 minutes."
       open_source_h: "Open Source"
       open_source: "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD)."
       open_source_help: "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)."
@@ -1317,16 +1319,16 @@ en:
       multiselect_shift_click: "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items."
       multiselect_lasso: "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected."
       undo_redo_h: "Undo & Redo"
-      undo_redo: "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo} **Undo** button, and redo them by clicking the {redo} **Redo** button."
+      undo_redo: "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo_icon} **{undo}** button, and redo them by clicking the {redo_icon} **{redo}** button."
       save_h: "Save"
-      save: "Click {save} **Save** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!"
+      save: "Click {save_icon} **{save}** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!"
       save_validation: "On the save screen, you'll have a chance to review what you've done. iD will also perform some basic checks for missing data and may offer helpful suggestions and warnings if something doesn't seem right."
       upload_h: "Upload"
-      upload: "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **Upload** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone."
+      upload: "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone."
       backups_h: "Automatic Backups"
       backups: "If you can't finish your edits in one sitting, for example if your computer crashes or you close the browser tab, your edits are still saved in your browser's storage. You can come back later (on the same browser and computer), and iD will offer to restore your work."
       keyboard_h: "Keyboard Shortcuts"
-      keyboard: "You can view a list of keyboard shortcuts by pressing the `?` key."
+      keyboard: "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
     feature_editor:
       title: Feature Editor
       intro: "The *feature editor* appears alongside the map, and allows you to see and edit all of the information for the selected feature."
@@ -1345,18 +1347,18 @@ en:
       title: Points
       intro: "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there."
       add_point_h: "Adding Points"
-      add_point: "To add a point, click the {point} **Point** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
+      add_point: "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
       add_point_finish: "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `Space`."
       move_point_h: "Moving Points"
       move_point: "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location."
       delete_point_h: "Deleting Points"
       delete_point: "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it."
-      delete_point_command: "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete} **Delete** command."
+      delete_point_command: "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
     lines:
       title: Lines
       intro: "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent."
       add_line_h: "Adding Lines"
-      add_line: "To add a line, click the {line} **Line** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
+      add_line: "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
       add_line_draw: "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `Space` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_line_finish: "To finish a line, press `{return}` or click again on the last node."
       modify_line_h: "Modifying Lines"
@@ -1368,43 +1370,43 @@ en:
       connect_line_drag: "To connect a line to another feature, drag one of the line's nodes onto the other feature until both features snap together. Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features."
       connect_line_tag: "If you know that the connection has traffic lights or crosswalks, you can add them by selecting the connecting node and using the feature editor to select the correct feature's type."
       disconnect_line_h: "Disconnecting Lines"
-      disconnect_line_command: "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect} **Disconnect** command from the editing menu."
+      disconnect_line_command: "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect_icon} **{disconnect}** command from the editing menu."
       move_line_h: "Moving Lines"
-      move_line_command: "To move an entire line, {rightclick} right-click the line and select the {move} **Move** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location."
+      move_line_command: "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location."
       move_line_connected: "Lines that are connected to other features will stay connected as you move the line to a new location. iD may prevent you from moving a line across another connected line."
       delete_line_h: "Deleting Lines"
       delete_line: "If a line is entirely incorrect, for example a road that doesn't exist in the real world, it's OK to delete it. Be careful when deleting features: the background imagery you are using might be outdated, and a road that looks wrong could simply be newly built."
-      delete_line_command: "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete} **Delete** command."
+      delete_line_command: "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
     areas:
       title: Areas
       intro: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas. Areas should be traced around the edge of the feature that they represent, for example, around the base of a building."
       point_or_area_h: "Points or Areas?"
       point_or_area: "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building."
       add_area_h: "Adding Areas"
-      add_area_command: "To add an area, click the {area} **Area** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
+      add_area_command: "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
       add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `Space` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_area_finish: "To finish an area, press `{return}` or click again on either the first or last node."
       square_area_h: "Square Corners"
-      square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize} **Square** command from the editing menu."
+      square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu."
       modify_area_h: "Modifying Areas"
       modify_area_dragnode: "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations."
       modify_area_addnode: "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes."
       delete_area_h: "Deleting Areas"
       delete_area: "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built."
-      delete_area_command: "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete} **Delete** command."
+      delete_area_command: "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
     relations:
       title: Relations
       intro: "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation."
       edit_relation_h: "Editing Relations"
       edit_relation: "At the bottom of the feature editor, you can expand the \"Relations\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it."
       edit_relation_add: "To add a feature to a relation, select the feature, then click the {plus} add button in the \"Relations\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"New relation...\" option."
-      edit_relation_delete: "You can also click the {delete} **Delete** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically."
+      edit_relation_delete: "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically."
       maintain_relation_h: "Maintaining Relations"
       maintain_relation: "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original."
       relation_types_h: "Relation Types"
       multipolygon_h: "Multipolygons"
       multipolygon: "A *multipolygon* relation is a group of one or more *outer* features and one or more inner features. The outer features define the outer edges of the multipolygon, and the inner features define sub-areas or holes cut out from the inside of the multipolygon."
-      multipolygon_create: "To create a multipolygon, for example a building with a hole in it, draw the outer edge as an area and the inner edge as a line or different kind of area. Then `{shift}`+{leftclick} left-click to select both features, {rightclick} right-click to show the edit menu, and select the {merge} **Merge** command."
+      multipolygon_create: "To create a multipolygon, for example a building with a hole in it, draw the outer edge as an area and the inner edge as a line or different kind of area. Then `{shift}`+{leftclick} left-click to select both features, {rightclick} right-click to show the edit menu, and select the {merge_icon} **{merge}** command."
       multipolygon_merge: "Merging several lines or areas will create a new multipolygon relation with all selected areas as members. iD will choose the inner and outer roles automatically, based on which features are contained inside other features."
       turn_restriction_h: "Turn restrictions"
       turn_restriction: "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road."
@@ -1418,9 +1420,9 @@ en:
       boundary_add: "To add a feature to a boundary relation, select the feature and scroll down to the \"Relations\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
     notes:
       title: Notes
-      intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data} **Map data** panel to enable the OpenStreetMap notes layer."
+      intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer."
       add_note_h: "Adding Notes"
-      add_note: "To add a new note, click the {note} **Note** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`."
+      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`."
       move_note: "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
@@ -1430,7 +1432,7 @@ en:
       title: Background Imagery
       intro: "The background imagery that appears beneath the map data is an important resource for mapping. This imagery can be aerial photos collected from satellites, airplanes, and drones, or it can be scanned historical maps or other freely available source data."
       sources_h: "Imagery Sources"
-      choosing: "To see which imagery sources are available for editing, click the {layers} **Background Settings** button on the side of the map."
+      choosing: "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map."
       sources: "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference."
       offsets_h: "Adjusting Imagery Offset"
       offset: "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"Imagery Offset\" section at the bottom of the Background Settings pane."
@@ -1439,7 +1441,7 @@ en:
       title: Street Level Photos
       intro: "Street level photos are useful for mapping traffic signs, businesses, and other details that you can't see from satellite and aerial images. The iD editor supports street level photos from [Bing Streetside](https://www.microsoft.com/en-us/maps/streetside), [Mapillary](https://www.mapillary.com), and [OpenStreetCam](https://www.openstreetcam.org)."
       using_h: "Using Street Level Photos"
-      using: "To use street level photos for mapping, click the {data} **Map data** panel on the side of the map to enable or disable the available photo layers."
+      using: "To use street level photos for mapping, click the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers."
       photos: "When enabled, the photo layer displays a line along the sequence of photos. At higher zoom levels, a circle marks at each photo location, and at even higher zoom levels, a cone indicates the direction the camera was facing when the photo was taken."
       viewer: "When you click on one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
     gps:
@@ -1447,12 +1449,12 @@ en:
       intro: "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local computer. You can collect GPS traces with a smartphone, sports watch, or other GPS device."
       survey: "For information on how to perform a GPS survey, read [Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/)."
       using_h: "Using GPS Traces"
-      using: "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data} **Map data** panel on the side of the map to enable, disable, or zoom to your GPS data."
+      using: "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data."
       tracing: "The GPS track isn't sent to OpenStreetMap - the best way to use it is to draw on the map, using it as a guide for the new features that you add."
       upload: "You can also [upload your GPS data to OpenStreetMap](https://www.openstreetmap.org/trace/create) for other users to use."
     qa:
       title: Quality Assurance
-      intro: "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data} **Map data** panel to enable a specific Q/A layer."
+      intro: "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data_icon} **{map_data}** panel to enable a specific Q/A layer."
       tools_h: "Tools"
       tools: "The following tools are currently supported: [KeepRight](https://www.keepright.at/), [ImproveOSM](https://improveosm.org/en/) and [Osmose](https://osmose.openstreetmap.fr/)."
       issues_h: "Handling Issues"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 296083846c..c6fa3fdde1 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -619,10 +619,12 @@
             }
         },
         "undo": {
+            "title": "Undo",
             "tooltip": "Undo: {action}",
             "nothing": "Nothing to undo."
         },
         "redo": {
+            "title": "Redo",
             "tooltip": "Redo: {action}",
             "nothing": "Nothing to redo."
         },
@@ -1630,7 +1632,7 @@
                 "open_data_h": "Open Data",
                 "open_data": "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright).",
                 "before_start_h": "Before you start",
-                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"Start the Walkthrough\" on this screen to take the tutorial - it takes only about 15 minutes.",
+                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"{start_the_walkthrough}\" on this screen to take the tutorial - it takes only about 15 minutes.",
                 "open_source_h": "Open Source",
                 "open_source": "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD).",
                 "open_source_help": "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)."
@@ -1653,16 +1655,16 @@
                 "multiselect_shift_click": "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items.",
                 "multiselect_lasso": "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected.",
                 "undo_redo_h": "Undo & Redo",
-                "undo_redo": "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo} **Undo** button, and redo them by clicking the {redo} **Redo** button.",
+                "undo_redo": "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo_icon} **{undo}** button, and redo them by clicking the {redo_icon} **{redo}** button.",
                 "save_h": "Save",
-                "save": "Click {save} **Save** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!",
+                "save": "Click {save_icon} **{save}** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!",
                 "save_validation": "On the save screen, you'll have a chance to review what you've done. iD will also perform some basic checks for missing data and may offer helpful suggestions and warnings if something doesn't seem right.",
                 "upload_h": "Upload",
-                "upload": "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **Upload** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone.",
+                "upload": "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone.",
                 "backups_h": "Automatic Backups",
                 "backups": "If you can't finish your edits in one sitting, for example if your computer crashes or you close the browser tab, your edits are still saved in your browser's storage. You can come back later (on the same browser and computer), and iD will offer to restore your work.",
                 "keyboard_h": "Keyboard Shortcuts",
-                "keyboard": "You can view a list of keyboard shortcuts by pressing the `?` key."
+                "keyboard": "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
             },
             "feature_editor": {
                 "title": "Feature Editor",
@@ -1683,19 +1685,19 @@
                 "title": "Points",
                 "intro": "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there.",
                 "add_point_h": "Adding Points",
-                "add_point": "To add a point, click the {point} **Point** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
+                "add_point": "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
                 "add_point_finish": "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `Space`.",
                 "move_point_h": "Moving Points",
                 "move_point": "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location.",
                 "delete_point_h": "Deleting Points",
                 "delete_point": "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it.",
-                "delete_point_command": "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete} **Delete** command."
+                "delete_point_command": "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "lines": {
                 "title": "Lines",
                 "intro": "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent.",
                 "add_line_h": "Adding Lines",
-                "add_line": "To add a line, click the {line} **Line** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
+                "add_line": "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
                 "add_line_draw": "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `Space` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_line_finish": "To finish a line, press `{return}` or click again on the last node.",
                 "modify_line_h": "Modifying Lines",
@@ -1707,13 +1709,13 @@
                 "connect_line_drag": "To connect a line to another feature, drag one of the line's nodes onto the other feature until both features snap together. Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features.",
                 "connect_line_tag": "If you know that the connection has traffic lights or crosswalks, you can add them by selecting the connecting node and using the feature editor to select the correct feature's type.",
                 "disconnect_line_h": "Disconnecting Lines",
-                "disconnect_line_command": "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect} **Disconnect** command from the editing menu.",
+                "disconnect_line_command": "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect_icon} **{disconnect}** command from the editing menu.",
                 "move_line_h": "Moving Lines",
-                "move_line_command": "To move an entire line, {rightclick} right-click the line and select the {move} **Move** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location.",
+                "move_line_command": "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location.",
                 "move_line_connected": "Lines that are connected to other features will stay connected as you move the line to a new location. iD may prevent you from moving a line across another connected line.",
                 "delete_line_h": "Deleting Lines",
                 "delete_line": "If a line is entirely incorrect, for example a road that doesn't exist in the real world, it's OK to delete it. Be careful when deleting features: the background imagery you are using might be outdated, and a road that looks wrong could simply be newly built.",
-                "delete_line_command": "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete} **Delete** command."
+                "delete_line_command": "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "areas": {
                 "title": "Areas",
@@ -1721,17 +1723,17 @@
                 "point_or_area_h": "Points or Areas?",
                 "point_or_area": "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building.",
                 "add_area_h": "Adding Areas",
-                "add_area_command": "To add an area, click the {area} **Area** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
+                "add_area_command": "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
                 "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `Space` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_area_finish": "To finish an area, press `{return}` or click again on either the first or last node.",
                 "square_area_h": "Square Corners",
-                "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize} **Square** command from the editing menu.",
+                "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu.",
                 "modify_area_h": "Modifying Areas",
                 "modify_area_dragnode": "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations.",
                 "modify_area_addnode": "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes.",
                 "delete_area_h": "Deleting Areas",
                 "delete_area": "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built.",
-                "delete_area_command": "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete} **Delete** command."
+                "delete_area_command": "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "relations": {
                 "title": "Relations",
@@ -1739,13 +1741,13 @@
                 "edit_relation_h": "Editing Relations",
                 "edit_relation": "At the bottom of the feature editor, you can expand the \"Relations\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it.",
                 "edit_relation_add": "To add a feature to a relation, select the feature, then click the {plus} add button in the \"Relations\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"New relation...\" option.",
-                "edit_relation_delete": "You can also click the {delete} **Delete** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically.",
+                "edit_relation_delete": "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically.",
                 "maintain_relation_h": "Maintaining Relations",
                 "maintain_relation": "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original.",
                 "relation_types_h": "Relation Types",
                 "multipolygon_h": "Multipolygons",
                 "multipolygon": "A *multipolygon* relation is a group of one or more *outer* features and one or more inner features. The outer features define the outer edges of the multipolygon, and the inner features define sub-areas or holes cut out from the inside of the multipolygon.",
-                "multipolygon_create": "To create a multipolygon, for example a building with a hole in it, draw the outer edge as an area and the inner edge as a line or different kind of area. Then `{shift}`+{leftclick} left-click to select both features, {rightclick} right-click to show the edit menu, and select the {merge} **Merge** command.",
+                "multipolygon_create": "To create a multipolygon, for example a building with a hole in it, draw the outer edge as an area and the inner edge as a line or different kind of area. Then `{shift}`+{leftclick} left-click to select both features, {rightclick} right-click to show the edit menu, and select the {merge_icon} **{merge}** command.",
                 "multipolygon_merge": "Merging several lines or areas will create a new multipolygon relation with all selected areas as members. iD will choose the inner and outer roles automatically, based on which features are contained inside other features.",
                 "turn_restriction_h": "Turn restrictions",
                 "turn_restriction": "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road.",
@@ -1760,9 +1762,9 @@
             },
             "notes": {
                 "title": "Notes",
-                "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data} **Map data** panel to enable the OpenStreetMap notes layer.",
+                "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer.",
                 "add_note_h": "Adding Notes",
-                "add_note": "To add a new note, click the {note} **Note** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`.",
+                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`.",
                 "move_note": "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
@@ -1773,7 +1775,7 @@
                 "title": "Background Imagery",
                 "intro": "The background imagery that appears beneath the map data is an important resource for mapping. This imagery can be aerial photos collected from satellites, airplanes, and drones, or it can be scanned historical maps or other freely available source data.",
                 "sources_h": "Imagery Sources",
-                "choosing": "To see which imagery sources are available for editing, click the {layers} **Background Settings** button on the side of the map.",
+                "choosing": "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map.",
                 "sources": "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference.",
                 "offsets_h": "Adjusting Imagery Offset",
                 "offset": "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"Imagery Offset\" section at the bottom of the Background Settings pane.",
@@ -1783,7 +1785,7 @@
                 "title": "Street Level Photos",
                 "intro": "Street level photos are useful for mapping traffic signs, businesses, and other details that you can't see from satellite and aerial images. The iD editor supports street level photos from [Bing Streetside](https://www.microsoft.com/en-us/maps/streetside), [Mapillary](https://www.mapillary.com), and [OpenStreetCam](https://www.openstreetcam.org).",
                 "using_h": "Using Street Level Photos",
-                "using": "To use street level photos for mapping, click the {data} **Map data** panel on the side of the map to enable or disable the available photo layers.",
+                "using": "To use street level photos for mapping, click the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers.",
                 "photos": "When enabled, the photo layer displays a line along the sequence of photos. At higher zoom levels, a circle marks at each photo location, and at even higher zoom levels, a cone indicates the direction the camera was facing when the photo was taken.",
                 "viewer": "When you click on one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
             },
@@ -1792,13 +1794,13 @@
                 "intro": "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local computer. You can collect GPS traces with a smartphone, sports watch, or other GPS device.",
                 "survey": "For information on how to perform a GPS survey, read [Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/).",
                 "using_h": "Using GPS Traces",
-                "using": "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data} **Map data** panel on the side of the map to enable, disable, or zoom to your GPS data.",
+                "using": "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data.",
                 "tracing": "The GPS track isn't sent to OpenStreetMap - the best way to use it is to draw on the map, using it as a guide for the new features that you add.",
                 "upload": "You can also [upload your GPS data to OpenStreetMap](https://www.openstreetmap.org/trace/create) for other users to use."
             },
             "qa": {
                 "title": "Quality Assurance",
-                "intro": "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data} **Map data** panel to enable a specific Q/A layer.",
+                "intro": "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data_icon} **{map_data}** panel to enable a specific Q/A layer.",
                 "tools_h": "Tools",
                 "tools": "The following tools are currently supported: [KeepRight](https://www.keepright.at/), [ImproveOSM](https://improveosm.org/en/) and [Osmose](https://osmose.openstreetmap.fr/).",
                 "issues_h": "Handling Issues",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 217fdf903c..9905846c49 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -232,30 +232,47 @@ export function uiPaneHelp(context) {
     };
 
     var replacements = {
-        point: icon('#iD-icon-point', 'pre-text'),
-        line: icon('#iD-icon-line', 'pre-text'),
-        area: icon('#iD-icon-area', 'pre-text'),
-        note: icon('#iD-icon-note', 'pre-text add-note'),
+        point_icon: icon('#iD-icon-point', 'pre-text'),
+        line_icon: icon('#iD-icon-line', 'pre-text'),
+        area_icon: icon('#iD-icon-area', 'pre-text'),
+        note_icon: icon('#iD-icon-note', 'pre-text add-note'),
         plus: icon('#iD-icon-plus', 'pre-text'),
         minus: icon('#iD-icon-minus', 'pre-text'),
-        orthogonalize: icon('#iD-operation-orthogonalize', 'pre-text'),
-        disconnect: icon('#iD-operation-disconnect', 'pre-text'),
-        layers: icon('#iD-icon-layers', 'pre-text'),
-        data: icon('#iD-icon-data', 'pre-text'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text'),
+        layers_icon: icon('#iD-icon-layers', 'pre-text'),
+        data_icon: icon('#iD-icon-data', 'pre-text'),
         inspect: icon('#iD-icon-inspect', 'pre-text'),
-        move: icon('#iD-operation-move', 'pre-text'),
-        merge: icon('#iD-operation-merge', 'pre-text'),
-        delete: icon('#iD-operation-delete', 'pre-text'),
+        move_icon: icon('#iD-operation-move', 'pre-text'),
+        merge_icon: icon('#iD-operation-merge', 'pre-text'),
+        delete_icon: icon('#iD-operation-delete', 'pre-text'),
         close: icon('#iD-icon-close', 'pre-text'),
-        undo: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
-        redo: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
-        save: icon('#iD-icon-save', 'pre-text'),
+        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
+        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
+        save_icon: icon('#iD-icon-save', 'pre-text'),
         leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
         rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
         shift: uiCmd.display('⇧'),
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
-        version: context.version
+        version: context.version,
+        shortcuts_key: t('shortcuts.toggle.key'),
+        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.title'),
+        delete: t('operations.delete.title'),
+        move: t('operations.move.title'),
+        orthogonalize: t('operations.orthogonalize.title'),
+        merge: t('operations.merge.title'),
+        disconnect: t('operations.disconnect.title'),
+        map_data: t('map_data.title'),
+        background_settings: t('background.description'),
+        start_the_walkthrough: t('splash.walkthrough')
     };
 
     // For each section, squash all the texts into a single markdown document

From fab750d3539a3f94eac96c5a678e838f2841f7a3 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 12:46:06 -0400
Subject: [PATCH 04/30] Use more placeholder references in the help docs Use a
 reusable format for the section title counts

---
 data/core.yaml                               | 21 ++++++++++----------
 dist/locales/en.json                         | 21 ++++++++++----------
 modules/ui/panes/help.js                     |  4 ++++
 modules/ui/sections/raw_member_editor.js     |  3 ++-
 modules/ui/sections/raw_membership_editor.js |  3 ++-
 modules/ui/sections/raw_tag_editor.js        |  2 +-
 modules/ui/sections/selection_list.js        |  2 +-
 7 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index dc3d92cf27..3e7d5a9f63 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -610,10 +610,11 @@ en:
     view_on_keepRight: View on keepright.at
     feature_type: Feature Type
     fields: Fields
-    tags_count: "Tags ({count})"
-    members_count: "Members ({count})"
-    relations_count: "Relations ({count})"
-    features_count: "Features ({count})"
+    tags: Tags
+    members: Members
+    relations: Relations
+    features: Features
+    title_count: "{title} ({count})"
     add_to_relation: Add to a relation
     new_relation: New relation...
     choose_relation: Choose a parent relation
@@ -1337,11 +1338,11 @@ en:
       type: "You can click on the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from."
       type_picker: "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also click the {inspect} **Info** icon next to the feature type to learn more about it."
       fields_h: "Fields"
-      fields_all_fields: "The \"Fields\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure."
+      fields_all_fields: "The \"{fields}\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure."
       fields_example: "Each feature type will display different fields. For example, a road may display fields for its surface and speed limit, but a restaurant may display fields for the type of food it serves and the hours it is open."
       fields_add_field: "You can also click the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more."
       tags_h: "Tags"
-      tags_all_tags: "Below the fields section, you can expand the \"Tags\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap."
+      tags_all_tags: "Below the fields section, you can expand the \"{tags}\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap."
       tags_resources: "Editing a feature's tags requires intermediate knowledge about OpenStreetMap. You should consult resources like the [OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Main_Page) or [Taginfo](https://taginfo.openstreetmap.org/) to learn more about accepted OpenStreetMap tagging practices."
     points:
       title: Points
@@ -1398,8 +1399,8 @@ en:
       title: Relations
       intro: "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation."
       edit_relation_h: "Editing Relations"
-      edit_relation: "At the bottom of the feature editor, you can expand the \"Relations\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it."
-      edit_relation_add: "To add a feature to a relation, select the feature, then click the {plus} add button in the \"Relations\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"New relation...\" option."
+      edit_relation: "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it."
+      edit_relation_add: "To add a feature to a relation, select the feature, then click the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option."
       edit_relation_delete: "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically."
       maintain_relation_h: "Maintaining Relations"
       maintain_relation: "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original."
@@ -1414,10 +1415,10 @@ en:
       turn_restriction_editing: "In the \"Turn Restrictions\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices."
       route_h: "Routes"
       route: "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route."
-      route_add: "To add a feature to a route relation, select the feature and scroll down to the \"Relations\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+      route_add: "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
       boundary_h: "Boundaries"
       boundary: "A *boundary* relation is a group of one or more line features that together form an administrative boundary."
-      boundary_add: "To add a feature to a boundary relation, select the feature and scroll down to the \"Relations\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+      boundary_add: "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
     notes:
       title: Notes
       intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index c6fa3fdde1..0f359c2397 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -772,10 +772,11 @@
             "view_on_keepRight": "View on keepright.at",
             "feature_type": "Feature Type",
             "fields": "Fields",
-            "tags_count": "Tags ({count})",
-            "members_count": "Members ({count})",
-            "relations_count": "Relations ({count})",
-            "features_count": "Features ({count})",
+            "tags": "Tags",
+            "members": "Members",
+            "relations": "Relations",
+            "features": "Features",
+            "title_count": "{title} ({count})",
             "add_to_relation": "Add to a relation",
             "new_relation": "New relation...",
             "choose_relation": "Choose a parent relation",
@@ -1674,11 +1675,11 @@
                 "type": "You can click on the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from.",
                 "type_picker": "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also click the {inspect} **Info** icon next to the feature type to learn more about it.",
                 "fields_h": "Fields",
-                "fields_all_fields": "The \"Fields\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.",
+                "fields_all_fields": "The \"{fields}\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.",
                 "fields_example": "Each feature type will display different fields. For example, a road may display fields for its surface and speed limit, but a restaurant may display fields for the type of food it serves and the hours it is open.",
                 "fields_add_field": "You can also click the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more.",
                 "tags_h": "Tags",
-                "tags_all_tags": "Below the fields section, you can expand the \"Tags\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap.",
+                "tags_all_tags": "Below the fields section, you can expand the \"{tags}\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap.",
                 "tags_resources": "Editing a feature's tags requires intermediate knowledge about OpenStreetMap. You should consult resources like the [OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Main_Page) or [Taginfo](https://taginfo.openstreetmap.org/) to learn more about accepted OpenStreetMap tagging practices."
             },
             "points": {
@@ -1739,8 +1740,8 @@
                 "title": "Relations",
                 "intro": "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation.",
                 "edit_relation_h": "Editing Relations",
-                "edit_relation": "At the bottom of the feature editor, you can expand the \"Relations\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it.",
-                "edit_relation_add": "To add a feature to a relation, select the feature, then click the {plus} add button in the \"Relations\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"New relation...\" option.",
+                "edit_relation": "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it.",
+                "edit_relation_add": "To add a feature to a relation, select the feature, then click the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option.",
                 "edit_relation_delete": "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically.",
                 "maintain_relation_h": "Maintaining Relations",
                 "maintain_relation": "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original.",
@@ -1755,10 +1756,10 @@
                 "turn_restriction_editing": "In the \"Turn Restrictions\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices.",
                 "route_h": "Routes",
                 "route": "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route.",
-                "route_add": "To add a feature to a route relation, select the feature and scroll down to the \"Relations\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation.",
+                "route_add": "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation.",
                 "boundary_h": "Boundaries",
                 "boundary": "A *boundary* relation is a group of one or more line features that together form an administrative boundary.",
-                "boundary_add": "To add a feature to a boundary relation, select the feature and scroll down to the \"Relations\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+                "boundary_add": "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
             },
             "notes": {
                 "title": "Notes",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 9905846c49..7b99d09df6 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -271,6 +271,10 @@ export function uiPaneHelp(context) {
         merge: t('operations.merge.title'),
         disconnect: t('operations.disconnect.title'),
         map_data: t('map_data.title'),
+        fields: t('inspector.fields'),
+        tags: t('inspector.tags'),
+        relations: t('inspector.relations'),
+        new_relation: t('inspector.new_relation'),
         background_settings: t('background.description'),
         start_the_walkthrough: t('splash.walkthrough')
     };
diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js
index 5e263a87d2..387dfce0b1 100644
--- a/modules/ui/sections/raw_member_editor.js
+++ b/modules/ui/sections/raw_member_editor.js
@@ -33,7 +33,8 @@ export function uiSectionRawMemberEditor(context) {
             if (!entity) return '';
 
             var gt = entity.members.length > _maxMembers ? '>' : '';
-            return t('inspector.members_count', { count: gt + entity.members.slice(0, _maxMembers).length });
+            var count = gt + entity.members.slice(0, _maxMembers).length;
+            return t('inspector.title_count', { title: t('inspector.members'), count: count });
         })
         .disclosureContent(renderDisclosureContent);
 
diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js
index 3d3da9fb75..eef0502b35 100644
--- a/modules/ui/sections/raw_membership_editor.js
+++ b/modules/ui/sections/raw_membership_editor.js
@@ -33,7 +33,8 @@ export function uiSectionRawMembershipEditor(context) {
 
             var parents = context.graph().parentRelations(entity);
             var gt = parents.length > _maxMemberships ? '>' : '';
-            return t('inspector.relations_count', { count: gt + parents.slice(0, _maxMemberships).length });
+            var count = gt + parents.slice(0, _maxMemberships).length;
+            return t('inspector.title_count', { title: t('inspector.relations'), count: count });
         })
         .disclosureContent(renderDisclosureContent);
 
diff --git a/modules/ui/sections/raw_tag_editor.js b/modules/ui/sections/raw_tag_editor.js
index 7b25ff41d3..b24a0a75b4 100644
--- a/modules/ui/sections/raw_tag_editor.js
+++ b/modules/ui/sections/raw_tag_editor.js
@@ -17,7 +17,7 @@ export function uiSectionRawTagEditor(id, context) {
         .classes('raw-tag-editor')
         .title(function() {
             var count = Object.keys(_tags).filter(function(d) { return d; }).length;
-            return t('inspector.tags_count', { count: count });
+            return t('inspector.title_count', { title: t('inspector.tags'), count: count });
         })
         .expandedByDefault(false)
         .disclosureContent(renderDisclosureContent);
diff --git a/modules/ui/sections/selection_list.js b/modules/ui/sections/selection_list.js
index 4398009764..e639ac0097 100644
--- a/modules/ui/sections/selection_list.js
+++ b/modules/ui/sections/selection_list.js
@@ -17,7 +17,7 @@ export function uiSectionSelectionList(context) {
             return _selectedIDs.length > 1;
         })
         .title(function() {
-            return t('inspector.features_count', { count: _selectedIDs.length });
+            return t('inspector.title_count', { title: t('inspector.features'), count: _selectedIDs.length });
         })
         .disclosureContent(renderDisclosureContent);
 

From fe73567df82755dc01b11725dd1c9980e820c839 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 16:52:09 -0400
Subject: [PATCH 05/30] Use placeholders for Imagery Offset and Space strings
 in help docs

---
 data/core.yaml           | 10 +++++-----
 dist/locales/en.json     | 10 +++++-----
 modules/ui/panes/help.js |  2 ++
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 3e7d5a9f63..7f238455f7 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1349,7 +1349,7 @@ en:
       intro: "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there."
       add_point_h: "Adding Points"
       add_point: "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
-      add_point_finish: "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `Space`."
+      add_point_finish: "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`."
       move_point_h: "Moving Points"
       move_point: "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location."
       delete_point_h: "Deleting Points"
@@ -1360,7 +1360,7 @@ en:
       intro: "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent."
       add_line_h: "Adding Lines"
       add_line: "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
-      add_line_draw: "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `Space` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail."
+      add_line_draw: "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_line_finish: "To finish a line, press `{return}` or click again on the last node."
       modify_line_h: "Modifying Lines"
       modify_line_dragnode: "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations."
@@ -1385,7 +1385,7 @@ en:
       point_or_area: "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building."
       add_area_h: "Adding Areas"
       add_area_command: "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
-      add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `Space` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail."
+      add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_area_finish: "To finish an area, press `{return}` or click again on either the first or last node."
       square_area_h: "Square Corners"
       square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu."
@@ -1423,7 +1423,7 @@ en:
       title: Notes
       intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer."
       add_note_h: "Adding Notes"
-      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`."
+      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
       move_note: "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
@@ -1436,7 +1436,7 @@ en:
       choosing: "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map."
       sources: "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference."
       offsets_h: "Adjusting Imagery Offset"
-      offset: "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"Imagery Offset\" section at the bottom of the Background Settings pane."
+      offset: "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"{imagery_offset}\" section at the bottom of the Background Settings pane."
       offset_change: "Click on the small triangles to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
     streetlevel:
       title: Street Level Photos
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 0f359c2397..c2627970c3 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1687,7 +1687,7 @@
                 "intro": "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there.",
                 "add_point_h": "Adding Points",
                 "add_point": "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
-                "add_point_finish": "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `Space`.",
+                "add_point_finish": "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`.",
                 "move_point_h": "Moving Points",
                 "move_point": "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location.",
                 "delete_point_h": "Deleting Points",
@@ -1699,7 +1699,7 @@
                 "intro": "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent.",
                 "add_line_h": "Adding Lines",
                 "add_line": "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
-                "add_line_draw": "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `Space` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail.",
+                "add_line_draw": "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_line_finish": "To finish a line, press `{return}` or click again on the last node.",
                 "modify_line_h": "Modifying Lines",
                 "modify_line_dragnode": "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations.",
@@ -1725,7 +1725,7 @@
                 "point_or_area": "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building.",
                 "add_area_h": "Adding Areas",
                 "add_area_command": "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
-                "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `Space` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `Space`. While drawing, you can zoom in or drag the map in order to add more detail.",
+                "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_area_finish": "To finish an area, press `{return}` or click again on either the first or last node.",
                 "square_area_h": "Square Corners",
                 "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu.",
@@ -1765,7 +1765,7 @@
                 "title": "Notes",
                 "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer.",
                 "add_note_h": "Adding Notes",
-                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `Space`.",
+                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
                 "move_note": "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
@@ -1779,7 +1779,7 @@
                 "choosing": "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map.",
                 "sources": "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference.",
                 "offsets_h": "Adjusting Imagery Offset",
-                "offset": "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"Imagery Offset\" section at the bottom of the Background Settings pane.",
+                "offset": "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"{imagery_offset}\" section at the bottom of the Background Settings pane.",
                 "offset_change": "Click on the small triangles to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
             },
             "streetlevel": {
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 7b99d09df6..6f9651b9a3 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -255,6 +255,7 @@ export function uiPaneHelp(context) {
         shift: uiCmd.display('⇧'),
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
+        space: t('shortcuts.key.space'),
         version: context.version,
         shortcuts_key: t('shortcuts.toggle.key'),
         save: t('save.title'),
@@ -276,6 +277,7 @@ export function uiPaneHelp(context) {
         relations: t('inspector.relations'),
         new_relation: t('inspector.new_relation'),
         background_settings: t('background.description'),
+        imagery_offset: t('background.fix_misalignment'),
         start_the_walkthrough: t('splash.walkthrough')
     };
 

From 8234079d1057e8ca738f786401ecf202ad9d507a Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:08:06 -0400
Subject: [PATCH 06/30] Show operation icon colors in the help pane

---
 css/80_app.css           | 21 +++++++++------------
 modules/ui/edit_menu.js  |  2 +-
 modules/ui/flash.js      |  6 +++---
 modules/ui/panes/help.js | 22 +++++++++++++++-------
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 4033057553..eb3187e30b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -406,6 +406,15 @@ button[disabled].action {
     height: 20px;
 }
 
+.icon.operation use {
+    fill: #222;
+    color: #79f;
+}
+.icon.operation.disabled use {
+    fill: rgba(32,32,32,.2);
+    color: rgba(40,40,40,.2);
+}
+
 .icon.monochrome use {
     fill: currentColor;
 }
@@ -4387,11 +4396,6 @@ img.tile-debug {
 .flash-icon use {
     color: #222;
 }
-
-.flash-icon.operation use {
-    fill: #222;
-    color: #79f;
-}
 .flash-icon.disabled use,
 .flash-icon.operation.disabled use {
     fill: rgba(32,32,32,0.7);
@@ -5395,15 +5399,8 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 }
 
 .edit-menu-item use {
-    fill: #222;
-    color: #79f;
     pointer-events: none;
 }
-.edit-menu-item.disabled use {
-    fill: rgba(32,32,32,.2);
-    color: rgba(40,40,40,.2);
-}
-
 
 /* Lasso
 ------------------------------------------------------- */
diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js
index d436d64b2b..41703952e7 100644
--- a/modules/ui/edit_menu.js
+++ b/modules/ui/edit_menu.js
@@ -119,7 +119,7 @@ export function uiEditMenu(context) {
                 )
                 .append('div')
                 .attr('class', 'icon-wrap')
-                .call(svgIcon('#iD-operation-' + d.id, 'operation-icon'));
+                .call(svgIcon('#iD-operation-' + d.id, 'operation'));
         });
 
         if (showLabels) {
diff --git a/modules/ui/flash.js b/modules/ui/flash.js
index 0ed943ca90..d7ad2507db 100644
--- a/modules/ui/flash.js
+++ b/modules/ui/flash.js
@@ -7,7 +7,7 @@ export function uiFlash(context) {
     var _iconName = '#iD-icon-no';
     var _iconClass = 'disabled';
     var _text = '';
-    var _textClass;    
+    var _textClass;
 
     function flash() {
         if (_flashTimer) {
@@ -31,7 +31,7 @@ export function uiFlash(context) {
 
         var iconEnter = contentEnter
             .append('svg')
-            .attr('class', 'flash-icon')
+            .attr('class', 'flash-icon icon')
             .append('g')
             .attr('transform', 'translate(10,10)');
 
@@ -56,7 +56,7 @@ export function uiFlash(context) {
 
         content
             .selectAll('.flash-icon')
-            .attr('class', 'flash-icon ' + (_iconClass || ''));
+            .attr('class', 'icon flash-icon ' + (_iconClass || ''));
 
         content
             .selectAll('.flash-icon use')
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 6f9651b9a3..6ef4f80f5e 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -232,31 +232,35 @@ export function uiPaneHelp(context) {
     };
 
     var replacements = {
+        // insert icons corresponding to various UI elements
         point_icon: icon('#iD-icon-point', 'pre-text'),
         line_icon: icon('#iD-icon-line', 'pre-text'),
         area_icon: icon('#iD-icon-area', 'pre-text'),
         note_icon: icon('#iD-icon-note', 'pre-text add-note'),
         plus: icon('#iD-icon-plus', 'pre-text'),
         minus: icon('#iD-icon-minus', 'pre-text'),
-        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text'),
-        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text'),
+        move_icon: icon('#iD-operation-move', 'pre-text operation'),
+        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
+        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
         layers_icon: icon('#iD-icon-layers', 'pre-text'),
         data_icon: icon('#iD-icon-data', 'pre-text'),
         inspect: icon('#iD-icon-inspect', 'pre-text'),
-        move_icon: icon('#iD-operation-move', 'pre-text'),
-        merge_icon: icon('#iD-operation-merge', 'pre-text'),
-        delete_icon: icon('#iD-operation-delete', 'pre-text'),
         close: icon('#iD-icon-close', 'pre-text'),
         undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
         redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
         save_icon: icon('#iD-icon-save', 'pre-text'),
         leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
         rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
+
+        // insert localized, platform-dependent keys
         shift: uiCmd.display('⇧'),
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
         space: t('shortcuts.key.space'),
-        version: context.version,
+
+        // reference localized UI labels directly so that they'll always match
         shortcuts_key: t('shortcuts.toggle.key'),
         save: t('save.title'),
         undo: t('undo.title'),
@@ -278,7 +282,10 @@ export function uiPaneHelp(context) {
         new_relation: t('inspector.new_relation'),
         background_settings: t('background.description'),
         imagery_offset: t('background.fix_misalignment'),
-        start_the_walkthrough: t('splash.walkthrough')
+        start_the_walkthrough: t('splash.walkthrough'),
+
+        // insert iD's version number
+        version: context.version
     };
 
     // For each section, squash all the texts into a single markdown document
@@ -294,6 +301,7 @@ export function uiPaneHelp(context) {
         return {
             title: t(helpkey + '.title'),
             html: marked(text.trim())
+                // use keyboard key styling for shortcuts
                 .replace(/<code>/g, '<kbd>')
                 .replace(/<\/code>/g, '<\/kbd>')
         };

From 96c29d50fe203eacc9145693992bc657cca630bc Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:13:42 -0400
Subject: [PATCH 07/30] Reference the name of the turn restrictions field in
 the help pane

---
 data/core.yaml           | 4 ++--
 dist/locales/en.json     | 4 ++--
 modules/ui/panes/help.js | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 7f238455f7..87fab2f948 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1411,8 +1411,8 @@ en:
       multipolygon_merge: "Merging several lines or areas will create a new multipolygon relation with all selected areas as members. iD will choose the inner and outer roles automatically, based on which features are contained inside other features."
       turn_restriction_h: "Turn restrictions"
       turn_restriction: "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road."
-      turn_restriction_field: "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"Turn Restrictions\" field containing a model of the intersection."
-      turn_restriction_editing: "In the \"Turn Restrictions\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices."
+      turn_restriction_field: "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"{turn_restrictions}\" field containing a model of the intersection."
+      turn_restriction_editing: "In the \"{turn_restrictions}\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices."
       route_h: "Routes"
       route: "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route."
       route_add: "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index c2627970c3..7c39d76e77 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1752,8 +1752,8 @@
                 "multipolygon_merge": "Merging several lines or areas will create a new multipolygon relation with all selected areas as members. iD will choose the inner and outer roles automatically, based on which features are contained inside other features.",
                 "turn_restriction_h": "Turn restrictions",
                 "turn_restriction": "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road.",
-                "turn_restriction_field": "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"Turn Restrictions\" field containing a model of the intersection.",
-                "turn_restriction_editing": "In the \"Turn Restrictions\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices.",
+                "turn_restriction_field": "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"{turn_restrictions}\" field containing a model of the intersection.",
+                "turn_restriction_editing": "In the \"{turn_restrictions}\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices.",
                 "route_h": "Routes",
                 "route": "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route.",
                 "route_add": "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation.",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 6ef4f80f5e..28fb34b8e8 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -280,6 +280,7 @@ export function uiPaneHelp(context) {
         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'),

From 8bd331f8c4824d74ae9d4d1367921b5ce6436fc8 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:17:06 -0400
Subject: [PATCH 08/30] Reference add note shortcut key in the help docs

---
 data/core.yaml           | 2 +-
 dist/locales/en.json     | 2 +-
 modules/ui/panes/help.js | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 87fab2f948..267283c4de 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1423,7 +1423,7 @@ en:
       title: Notes
       intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer."
       add_note_h: "Adding Notes"
-      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
+      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
       move_note: "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 7c39d76e77..3645619192 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1765,7 +1765,7 @@
                 "title": "Notes",
                 "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer.",
                 "add_note_h": "Adding Notes",
-                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `4`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
+                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
                 "move_note": "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 28fb34b8e8..64592355b4 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -259,9 +259,10 @@ export function uiPaneHelp(context) {
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
         space: t('shortcuts.key.space'),
+        add_note_key: t('modes.add_note.key'),
+        shortcuts_key: t('shortcuts.toggle.key'),
 
         // reference localized UI labels directly so that they'll always match
-        shortcuts_key: t('shortcuts.toggle.key'),
         save: t('save.title'),
         undo: t('undo.title'),
         redo: t('redo.title'),

From 3f5073d90283304c5911e7d54d275f2010535bc4 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:20:08 -0400
Subject: [PATCH 09/30] Use title case for Keyboard Shortcuts menu label

---
 data/core.yaml       | 2 +-
 dist/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 267283c4de..3a104b0da7 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -2042,7 +2042,7 @@ en:
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:
-    title: "Keyboard shortcuts"
+    title: "Keyboard Shortcuts"
     tooltip: "Show the keyboard shortcuts screen."
     toggle:
       key: '?'
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 3645619192..52b670a45a 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2524,7 +2524,7 @@
             }
         },
         "shortcuts": {
-            "title": "Keyboard shortcuts",
+            "title": "Keyboard Shortcuts",
             "tooltip": "Show the keyboard shortcuts screen.",
             "toggle": {
                 "key": "?"

From 4e13ca72b9ef75e01227046f3e1e815bc582d0be Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:22:09 -0400
Subject: [PATCH 10/30] Make help table of contents scale better to narrow
 screen sizes

---
 css/80_app.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/css/80_app.css b/css/80_app.css
index eb3187e30b..53d2447402 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3763,7 +3763,8 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 }
 
 .help-pane .toc {
-    width: 40%;
+    width: 100%;
+    max-width: 200px;
     float: right;
     margin-left: 20px;
     margin-bottom: 20px;

From 90f21212ff71bdf9649c027bf9dc36fea297bd18 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:23:53 -0400
Subject: [PATCH 11/30] Use the square button icon instead of name, for
 consistency

---
 data/core.yaml               | 2 +-
 dist/locales/en.json         | 2 +-
 modules/ui/intro/building.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 3a104b0da7..52605c6dc1 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -2024,7 +2024,7 @@ en:
       close: "**Hit escape or click the {button} button to close the feature editor.**"
       rightclick_building: "**Right-click to select the building you created and show the edit menu.**"
       square_building: "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**"
-      retry_square: "You didn't press the Square button. Try again."
+      retry_square: "You didn't press the {button} button. Try again."
       done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
       add_tank: "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**"
       start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 52b670a45a..2f9f8db96c 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2503,7 +2503,7 @@
                 "close": "**Hit escape or click the {button} button to close the feature editor.**",
                 "rightclick_building": "**Right-click to select the building you created and show the edit menu.**",
                 "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**",
-                "retry_square": "You didn't press the Square button. Try again.",
+                "retry_square": "You didn't press the {button} button. Try again.",
                 "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
                 "add_tank": "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**",
                 "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**",
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index 7e35ee2221..ebd5fc0c0e 100644
--- a/modules/ui/intro/building.js
+++ b/modules/ui/intro/building.js
@@ -404,7 +404,7 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickSquare() {
         context.enter(modeBrowse(context));
 
-        revealHouse(house, t('intro.buildings.retry_square'), {
+        revealHouse(house, t('intro.buildings.retry_square', { button: icon('#iD-operation-orthogonalize', 'pre-text') }), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(rightClickHouse); }
         });

From cf5bf61d72bdb35baa4abd9596372e964977f355 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Fri, 10 Jul 2020 12:18:46 -0400
Subject: [PATCH 12/30] Use the same string replacements for the walkthrough as
 the help docs Use keyboard styling for keys referenced in the walkthrough Add
 mouse icons for left/right click referenced in the walkthrough Add labels for
 all buttons referenced by icon in the walkthrough

---
 data/core.yaml                    | 88 +++++++++++++++---------------
 data/presets.yaml                 |  1 +
 dist/locales/en.json              | 91 ++++++++++++++++---------------
 modules/ui/cmd.js                 |  2 +-
 modules/ui/intro/area.js          | 37 +++++++------
 modules/ui/intro/building.js      | 62 ++++++++++-----------
 modules/ui/intro/helper.js        | 89 +++++++++++++++++++++++++++++-
 modules/ui/intro/line.js          | 90 +++++++++++++++---------------
 modules/ui/intro/navigation.js    | 60 +++++++++-----------
 modules/ui/intro/point.js         | 45 ++++++++-------
 modules/ui/intro/start_editing.js |  8 +--
 modules/ui/intro/welcome.js       |  9 +--
 modules/ui/panes/help.js          | 65 +---------------------
 13 files changed, 336 insertions(+), 311 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index b6c13418cb..962a059327 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1931,7 +1931,7 @@ en:
       chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Press '{next}' to continue.**"
     navigation:
       title: "Navigation"
-      drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       drag_touch: "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
       zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
@@ -1944,100 +1944,100 @@ en:
       editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
       preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}."
       fields_townhall: "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address."
-      close_townhall: "**Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**"
+      close_townhall: "**Close the feature editor by pressing `{esc}` or the {button} button in the upper corner.**"
       search_street: "You can also search for features in the current view, or worldwide. **Search for '{name}'.**"
       choose_street: "**Choose {name} from the list to select it.**"
       selected_street: "Great! {name} is now selected."
-      editor_street: "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by hitting escape or pressing the {button} button.**"
+      editor_street: "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**"
       play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     points:
       title: "Points"
-      add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {button} Point button to add a new point.**"
-      place_point: "To place the new point on the map, position your mouse cursor where the point should go, then left-click or press the spacebar. **Move the mouse pointer over this building, then left-click or press the spacebar.**"
+      add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**"
+      place_point: "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**"
       place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**"
       search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**"
       choose_cafe: "**Choose {preset} from the list.**"
       feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
       add_name: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**"
-      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or press the {button} button to close the feature editor.**"
+      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
       reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**"
       update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**"
-      update_close: "**When you are finished updating the cafe, hit escape, enter, or press the {button} button to close the feature editor.**"
-      rightclick: "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click, or a two-finger tap on a trackpad. **Right-click to select the point you created and show the edit menu.**"
+      update_close: "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
+      rightclick: "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**"
       edit_menu_touch: "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**"
-      delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {button} button to delete the point.**"
-      undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {button} button to undo the delete and get the point back.**"
+      delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**"
+      undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**"
       play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
     areas:
       title: "Areas"
-      add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {button} Area button to add a new area.**"
-      start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**"
+      add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**"
+      start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**"
       start_playground_touch: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**"
-      continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
-      finish_playground: "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**"
-      finish_playground_touch: "Finish the area by tapping again on either the first or last node, or by pressing enter on a keyboard. **Finish drawing an area for the playground.**"
+      continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
+      finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**"
+      finish_playground_touch: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
-      add_field: "This playground doesn't have an official name, so we won't add anything in the Name field.{br}Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**"
+      add_field: "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**"
       choose_field: "**Choose {field} from the list.**"
       retry_add_field: "You didn't select the {field} field. Let's try again."
       describe_playground: "**Add a description, then press the {button} button to close the feature editor.**"
       play: "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     lines:
       title: "Lines"
-      add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**"
+      add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**"
       start_line: "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**"
-      intersect: "Click or press spacebar to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**"
+      intersect: "Click or press `{space}` to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**"
       retry_intersect: "The road needs to intersect {name}. Let's try again!"
       continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**"
       choose_category_road: "**Select {category} from the list.**"
       choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**"
       retry_preset_residential: "You didn't select the {preset} type. **Click here to choose again.**"
-      name_road: "**Give this road a name, then hit escape, enter, or click the {button} button to close the feature editor.**"
+      name_road: "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
       did_name_road: "Looks good! Next we will learn how to update the shape of a line."
       update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
       add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
-      start_drag_endpoint: "When a line is selected, you can drag any of its nodes by clicking and holding down the left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**"
-      finish_drag_endpoint: "This spot looks good. **Release the left mouse button to finish dragging.**"
+      start_drag_endpoint: "When a line is selected, you can drag any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**"
+      finish_drag_endpoint: "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**"
       start_drag_midpoint: "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**"
-      continue_drag_midpoint: "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**"
+      continue_drag_midpoint: "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click {ok}.**"
       delete_lines: "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
-      rightclick_intersection: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **Right click on the intersection node.**"
-      split_intersection: "**Click on the {button} button to split {street}.**"
-      retry_split: "You didn't click the Split button. Try again."
+      rightclick_intersection: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **{rightclick} Right-click on the intersection node.**"
+      split_intersection: "**Press the {split_icon} {split} button to divide {street}.**"
+      retry_split: "You didn't press the {split_icon} {split} button. Try again."
       did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**"
       did_split_single: "**Click the top part of {street2} to select it.**"
-      multi_select: "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**"
-      multi_rightclick: "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**"
-      multi_delete: "**Click on the {button} button to delete the extra lines.**"
-      retry_delete: "You didn't click the Delete button. Try again."
+      multi_select: "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**"
+      multi_rightclick: "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**"
+      multi_delete: "**Press the {delete_icon} {delete} button to remove the extra lines.**"
+      retry_delete: "You didn't press the {delete_icon} {delete} button. Try again."
       play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
     buildings:
       title: "Buildings"
-      add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {button} Area button to add a new area.**"
-      start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**"
-      continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing enter, or clicking again on either the first or last node. **Finish tracing the building.**"
+      add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**"
+      start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**"
+      continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**"
       retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
       choose_category_building: "**Choose {category} from the list.**"
       choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**"
-      close: "**Hit escape or click the {button} button to close the feature editor.**"
-      rightclick_building: "**Right-click to select the building you created and show the edit menu.**"
-      square_building: "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**"
-      retry_square: "You didn't press the {button} button. Try again."
+      close: "**Press `{esc}` or the {apply} button to close the feature editor.**"
+      rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**"
+      square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**"
+      retry_square: "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again."
       done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
-      add_tank: "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**"
-      start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**"
-      continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing enter, or clicking again on either the first or last node. **Finish tracing the tank.**"
+      add_tank: "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**"
+      start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**"
+      continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**"
       search_tank: "**Search for '{preset}'.**"
       choose_tank: "**Choose {preset} from the list.**"
-      rightclick_tank: "**Right-click to select the storage tank you created and show the edit menu.**"
-      circle_tank: "**Press the {button} button to make the tank a circle.**"
-      retry_circle: "You didn't click the Circularize button. Try again."
+      rightclick_tank: "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**"
+      circle_tank: "**Press the {circularize_icon} {circularize} button to make the tank a circle.**"
+      retry_circle: "You didn't click the {circularize_icon} {circularize} button. Try again."
       play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
     startediting:
       title: "Start Editing"
-      help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {button} Help button or the '{key}' key."
-      shortcuts: "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key."
+      help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {help_icon} {help} button or the `{help_key}` key."
+      shortcuts: "You can view a list of commands along with their keyboard shortcuts by pressing the `{shortcuts_key}` key."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:
diff --git a/data/presets.yaml b/data/presets.yaml
index 251bb75304..e056721dce 100644
--- a/data/presets.yaml
+++ b/data/presets.yaml
@@ -2499,6 +2499,7 @@ en:
       support:
         # support=*
         label: Support
+        terms: '[translate with synonyms or related terms for ''Support'', separated by commas]'
       surface:
         # surface=*
         label: Surface
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 2c79d226bc..020fa655f7 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2406,7 +2406,7 @@
             },
             "navigation": {
                 "title": "Navigation",
-                "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "drag_touch": "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
@@ -2419,43 +2419,43 @@
                 "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",
                 "preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.",
                 "fields_townhall": "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address.",
-                "close_townhall": "**Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**",
+                "close_townhall": "**Close the feature editor by pressing `{esc}` or the {button} button in the upper corner.**",
                 "search_street": "You can also search for features in the current view, or worldwide. **Search for '{name}'.**",
                 "choose_street": "**Choose {name} from the list to select it.**",
                 "selected_street": "Great! {name} is now selected.",
-                "editor_street": "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by hitting escape or pressing the {button} button.**",
+                "editor_street": "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**",
                 "play": "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "points": {
                 "title": "Points",
-                "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {button} Point button to add a new point.**",
-                "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then left-click or press the spacebar. **Move the mouse pointer over this building, then left-click or press the spacebar.**",
+                "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**",
+                "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**",
                 "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**",
                 "search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**",
                 "choose_cafe": "**Choose {preset} from the list.**",
                 "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
                 "add_name": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**",
-                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, enter, or press the {button} button to close the feature editor.**",
+                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
                 "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**",
                 "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**",
-                "update_close": "**When you are finished updating the cafe, hit escape, enter, or press the {button} button to close the feature editor.**",
-                "rightclick": "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click, or a two-finger tap on a trackpad. **Right-click to select the point you created and show the edit menu.**",
+                "update_close": "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
+                "rightclick": "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**",
                 "edit_menu_touch": "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**",
-                "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {button} button to delete the point.**",
-                "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {button} button to undo the delete and get the point back.**",
+                "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**",
+                "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**",
                 "play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "areas": {
                 "title": "Areas",
-                "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {button} Area button to add a new area.**",
-                "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press spacebar to place a starting node on one of the corners of the playground.**",
+                "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**",
+                "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**",
                 "start_playground_touch": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**",
-                "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the '{alt}' key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
-                "finish_playground": "Finish the area by pressing enter, or clicking again on either the first or last node. **Finish drawing an area for the playground.**",
-                "finish_playground_touch": "Finish the area by tapping again on either the first or last node, or by pressing enter on a keyboard. **Finish drawing an area for the playground.**",
+                "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
+                "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**",
+                "finish_playground_touch": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
-                "add_field": "This playground doesn't have an official name, so we won't add anything in the Name field.{br}Instead let's add some additional details about the playground to the Description field. **Open the Add Field list.**",
+                "add_field": "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**",
                 "choose_field": "**Choose {field} from the list.**",
                 "retry_add_field": "You didn't select the {field} field. Let's try again.",
                 "describe_playground": "**Add a description, then press the {button} button to close the feature editor.**",
@@ -2463,61 +2463,61 @@
             },
             "lines": {
                 "title": "Lines",
-                "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {button} Line button to add a new line.**",
+                "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**",
                 "start_line": "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**",
-                "intersect": "Click or press spacebar to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**",
+                "intersect": "Click or press `{space}` to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**",
                 "retry_intersect": "The road needs to intersect {name}. Let's try again!",
                 "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**",
                 "choose_category_road": "**Select {category} from the list.**",
                 "choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**",
                 "retry_preset_residential": "You didn't select the {preset} type. **Click here to choose again.**",
-                "name_road": "**Give this road a name, then hit escape, enter, or click the {button} button to close the feature editor.**",
+                "name_road": "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
                 "did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
                 "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
                 "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",
-                "start_drag_endpoint": "When a line is selected, you can drag any of its nodes by clicking and holding down the left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**",
-                "finish_drag_endpoint": "This spot looks good. **Release the left mouse button to finish dragging.**",
+                "start_drag_endpoint": "When a line is selected, you can drag any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**",
+                "finish_drag_endpoint": "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**",
                 "start_drag_midpoint": "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**",
-                "continue_drag_midpoint": "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**",
+                "continue_drag_midpoint": "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click {ok}.**",
                 "delete_lines": "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
-                "rightclick_intersection": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **Right click on the intersection node.**",
-                "split_intersection": "**Click on the {button} button to split {street}.**",
-                "retry_split": "You didn't click the Split button. Try again.",
+                "rightclick_intersection": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **{rightclick} Right-click on the intersection node.**",
+                "split_intersection": "**Press the {split_icon} {split} button to divide {street}.**",
+                "retry_split": "You didn't press the {split_icon} {split} button. Try again.",
                 "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**",
                 "did_split_single": "**Click the top part of {street2} to select it.**",
-                "multi_select": "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**",
-                "multi_rightclick": "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**",
-                "multi_delete": "**Click on the {button} button to delete the extra lines.**",
-                "retry_delete": "You didn't click the Delete button. Try again.",
+                "multi_select": "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**",
+                "multi_rightclick": "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**",
+                "multi_delete": "**Press the {delete_icon} {delete} button to remove the extra lines.**",
+                "retry_delete": "You didn't press the {delete_icon} {delete} button. Try again.",
                 "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "buildings": {
                 "title": "Buildings",
-                "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {button} Area button to add a new area.**",
-                "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**",
-                "continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing enter, or clicking again on either the first or last node. **Finish tracing the building.**",
+                "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**",
+                "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**",
+                "continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**",
                 "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!",
                 "choose_category_building": "**Choose {category} from the list.**",
                 "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**",
-                "close": "**Hit escape or click the {button} button to close the feature editor.**",
-                "rightclick_building": "**Right-click to select the building you created and show the edit menu.**",
-                "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {button} button to square the building shape.**",
-                "retry_square": "You didn't press the {button} button. Try again.",
+                "close": "**Press `{esc}` or the {apply} button to close the feature editor.**",
+                "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**",
+                "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**",
+                "retry_square": "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again.",
                 "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
-                "add_tank": "Next we'll trace this circular storage tank. **Press the {button} Area button to add a new area.**",
-                "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**",
-                "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing enter, or clicking again on either the first or last node. **Finish tracing the tank.**",
+                "add_tank": "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**",
+                "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**",
+                "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**",
                 "search_tank": "**Search for '{preset}'.**",
                 "choose_tank": "**Choose {preset} from the list.**",
-                "rightclick_tank": "**Right-click to select the storage tank you created and show the edit menu.**",
-                "circle_tank": "**Press the {button} button to make the tank a circle.**",
-                "retry_circle": "You didn't click the Circularize button. Try again.",
+                "rightclick_tank": "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**",
+                "circle_tank": "**Press the {circularize_icon} {circularize} button to make the tank a circle.**",
+                "retry_circle": "You didn't click the {circularize_icon} {circularize} button. Try again.",
                 "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "startediting": {
                 "title": "Start Editing",
-                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {button} Help button or the '{key}' key.",
-                "shortcuts": "You can view a list of commands along with their keyboard shortcuts by pressing the '{key}' key.",
+                "help": "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by pressing the {help_icon} {help} button or the `{help_key}` key.",
+                "shortcuts": "You can view a list of commands along with their keyboard shortcuts by pressing the `{shortcuts_key}` key.",
                 "save": "Don't forget to regularly save your changes!",
                 "start": "Start mapping!"
             }
@@ -4826,7 +4826,8 @@
                     "terms": "guarded,manned"
                 },
                 "support": {
-                    "label": "Support"
+                    "label": "Support",
+                    "terms": ""
                 },
                 "surface": {
                     "label": "Surface",
diff --git a/modules/ui/cmd.js b/modules/ui/cmd.js
index c2203adb15..66784056af 100644
--- a/modules/ui/cmd.js
+++ b/modules/ui/cmd.js
@@ -53,7 +53,7 @@ uiCmd.display = function(code) {
         '↘': mac ? '↘ ' + t('shortcuts.key.pgdn')   : t('shortcuts.key.pgdn'),
         '⇞': mac ? '⇞ ' + t('shortcuts.key.home')   : t('shortcuts.key.home'),
         '⇟': mac ? '⇟ ' + t('shortcuts.key.end')    : t('shortcuts.key.end'),
-        '↵': mac ? '↵ ' + t('shortcuts.key.return') : t('shortcuts.key.enter'),
+        '↵': mac ? '⏎ ' + t('shortcuts.key.return') : t('shortcuts.key.enter'),
         '⎋': mac ? '⎋ ' + t('shortcuts.key.esc')    : t('shortcuts.key.esc'),
         '☰': mac ? '☰ ' + t('shortcuts.key.menu')  : t('shortcuts.key.menu'),
     };
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 78a69ef64f..27fa81204d 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -13,14 +13,14 @@ import { t } from '../../core/localizer';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { uiCmd } from '../cmd';
-import { icon, pad, transitionTime } from './helper';
+import { helpString, icon, pad, transitionTime } from './helper';
 
 
 export function uiIntroArea(context, reveal) {
     var dispatch = d3_dispatch('done');
     var playground = [-85.63552, 41.94159];
     var playgroundPreset = presetManager.item('leisure/playground');
+    var nameField = presetManager.field('name');
     var descriptionField = presetManager.field('description');
     var timeouts = [];
     var _areaID;
@@ -60,7 +60,7 @@ export function uiIntroArea(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-area',
-                t('intro.areas.add_playground', { button: icon('#iD-icon-area', 'pre-text') }));
+                helpString('intro.areas.add_playground'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -92,13 +92,13 @@ export function uiIntroArea(context, reveal) {
         timeout(function() {
             var textId = context.lastPointerType() === 'mouse' ? 'start_playground' : 'start_playground_touch';
             revealPlayground(playground,
-                t('intro.areas.' + textId), { duration: 250 }
+                helpString('intro.areas.' + textId), { duration: 250 }
             );
 
             timeout(function() {
                 context.map().on('move.intro drawn.intro', function() {
                     revealPlayground(playground,
-                        t('intro.areas.' + textId), { duration: 0 }
+                        helpString('intro.areas.' + textId), { duration: 0 }
                     );
                 });
                 context.on('enter.intro', function(mode) {
@@ -124,14 +124,14 @@ export function uiIntroArea(context, reveal) {
 
         _areaID = null;
         revealPlayground(playground,
-            t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+            helpString('intro.areas.continue_playground'),
             { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    t('intro.areas.continue_playground', { alt: uiCmd.display('⌥') }),
+                    helpString('intro.areas.continue_playground'),
                     { duration: 0 }
                 );
             });
@@ -169,13 +169,13 @@ export function uiIntroArea(context, reveal) {
         _areaID = null;
         var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_touch';
         revealPlayground(playground,
-            t('intro.areas.' + textId), { duration: 250 }
+            helpString('intro.areas.' + textId), { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    t('intro.areas.' + textId), { duration: 0 }
+                    helpString('intro.areas.' + textId), { duration: 0 }
                 );
             });
         }, 250);  // after reveal
@@ -220,7 +220,7 @@ export function uiIntroArea(context, reveal) {
                 .on('keyup.intro', checkPresetSearch);
 
             reveal('.preset-search-input',
-                t('intro.areas.search_playground', { preset: playgroundPreset.name() })
+                helpString('intro.areas.search_playground', { preset: playgroundPreset.name() })
             );
         }, 400);  // after preset list pane visible..
 
@@ -244,7 +244,7 @@ export function uiIntroArea(context, reveal) {
                     .on('keyup.intro', checkPresetSearch);
 
                 reveal('.preset-search-input',
-                    t('intro.areas.search_playground', { preset: playgroundPreset.name() })
+                    helpString('intro.areas.search_playground', { preset: playgroundPreset.name() })
                 );
 
                 context.history().on('change.intro', null);
@@ -256,7 +256,7 @@ export function uiIntroArea(context, reveal) {
 
             if (first.classed('preset-leisure-playground')) {
                 reveal(first.select('.preset-list-button').node(),
-                    t('intro.areas.choose_playground', { preset: playgroundPreset.name() }),
+                    helpString('intro.areas.choose_playground', { preset: playgroundPreset.name() }),
                     { duration: 300 }
                 );
 
@@ -328,7 +328,10 @@ export function uiIntroArea(context, reveal) {
 
             timeout(function() {
                 reveal('.more-fields .combobox-input',
-                    t('intro.areas.add_field'),
+                    helpString('intro.areas.add_field', {
+                        name: nameField.label(),
+                        description: descriptionField.label()
+                    }),
                     { duration: 300 }
                 );
 
@@ -393,7 +396,7 @@ export function uiIntroArea(context, reveal) {
         }, 300);
 
         reveal('div.combobox',
-            t('intro.areas.choose_field', { field: descriptionField.label() }),
+            helpString('intro.areas.choose_field', { field: descriptionField.label() }),
             { duration: 300 }
         );
 
@@ -430,7 +433,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            t('intro.areas.describe_playground', { button: icon('#iD-icon-apply', 'pre-text') }),
+            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-apply', 'pre-text') }),
             { duration: 300 }
         );
 
@@ -454,7 +457,7 @@ export function uiIntroArea(context, reveal) {
         context.container().select('.inspector-wrap .panewrap').style('right', '0%');
 
         reveal('.entity-editor-pane',
-            t('intro.areas.retry_add_field', { field: descriptionField.label() }), {
+            helpString('intro.areas.retry_add_field', { field: descriptionField.label() }), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(clickAddField); }
         });
@@ -473,7 +476,7 @@ export function uiIntroArea(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            t('intro.areas.play', { next: t('intro.lines.title') }), {
+            helpString('intro.areas.play', { next: t('intro.lines.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-line',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index ebd5fc0c0e..551e60efcf 100644
--- a/modules/ui/intro/building.js
+++ b/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 { icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
+import { helpString, 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',
-                t('intro.buildings.add_building', { button: icon('#iD-icon-area', 'pre-text') }));
+                helpString('intro.buildings.add_building'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -95,10 +95,10 @@ export function uiIntroBuilding(context, reveal) {
         context.map().zoomEase(20, 500);
 
         timeout(function() {
-            revealHouse(house, t('intro.buildings.start_building'));
+            revealHouse(house, helpString('intro.buildings.start_building'));
 
             context.map().on('move.intro drawn.intro', function() {
-                revealHouse(house, t('intro.buildings.start_building'), { duration: 0 });
+                revealHouse(house, helpString('intro.buildings.start_building'), { duration: 0 });
             });
 
             context.on('enter.intro', function(mode) {
@@ -123,10 +123,10 @@ export function uiIntroBuilding(context, reveal) {
 
         _houseID = null;
 
-        revealHouse(house, t('intro.buildings.continue_building'));
+        revealHouse(house, helpString('intro.buildings.continue_building'));
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, t('intro.buildings.continue_building'), { duration: 0 });
+            revealHouse(house, helpString('intro.buildings.continue_building'), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -162,12 +162,12 @@ export function uiIntroBuilding(context, reveal) {
     function retryHouse() {
         var onClick = function() { continueTo(addHouse); };
 
-        revealHouse(house, t('intro.buildings.retry_building'),
+        revealHouse(house, helpString('intro.buildings.retry_building'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, t('intro.buildings.retry_building'),
+            revealHouse(house, helpString('intro.buildings.retry_building'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -198,7 +198,7 @@ export function uiIntroBuilding(context, reveal) {
             var button = context.container().select('.preset-category-building .preset-list-button');
 
             reveal(button.node(),
-                t('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
+                helpString('intro.buildings.choose_category_building', { category: buildingCatetory.name() })
             );
 
             button.on('click.intro', function() {
@@ -247,7 +247,7 @@ export function uiIntroBuilding(context, reveal) {
             var button = context.container().select('.preset-building-house .preset-list-button');
 
             reveal(button.node(),
-                t('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
+                helpString('intro.buildings.choose_preset_house', { preset: housePreset.name() }),
                 { duration: 300 }
             );
 
@@ -294,7 +294,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                t('intro.buildings.close', { button: icon('#iD-icon-apply', 'pre-text') })
+                helpString('intro.buildings.close')
             );
         }, 500);
 
@@ -329,7 +329,7 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, t('intro.buildings.rightclick_building'), { duration: 0 });
+            revealHouse(house, helpString('intro.buildings.rightclick_building'), { duration: 0 });
         });
 
         context.history().on('change.intro', function() {
@@ -356,7 +356,7 @@ export function uiIntroBuilding(context, reveal) {
         var wasChanged = false;
 
         reveal('.edit-menu',
-            t('intro.buildings.square_building', { button: icon('#iD-operation-orthogonalize', 'pre-text') }),
+            helpString('intro.buildings.square_building'),
             { padding: 50 }
         );
 
@@ -373,7 +373,7 @@ export function uiIntroBuilding(context, reveal) {
             if (!wasChanged && !node) { return continueTo(rightClickHouse); }
 
             reveal('.edit-menu',
-                t('intro.buildings.square_building', { button: icon('#iD-operation-orthogonalize', 'pre-text') }),
+                helpString('intro.buildings.square_building'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -404,7 +404,7 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickSquare() {
         context.enter(modeBrowse(context));
 
-        revealHouse(house, t('intro.buildings.retry_square', { button: icon('#iD-operation-orthogonalize', 'pre-text') }), {
+        revealHouse(house, helpString('intro.buildings.retry_square'), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(rightClickHouse); }
         });
@@ -418,7 +418,7 @@ export function uiIntroBuilding(context, reveal) {
     function doneSquare() {
         context.history().checkpoint('doneSquare');
 
-        revealHouse(house, t('intro.buildings.done_square'), {
+        revealHouse(house, helpString('intro.buildings.done_square'), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(addTank); }
         });
@@ -440,7 +440,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('button.add-area',
-                t('intro.buildings.add_tank', { button: icon('#iD-icon-area', 'pre-text') })
+                helpString('intro.buildings.add_tank')
             );
 
             context.on('enter.intro', function(mode) {
@@ -464,10 +464,10 @@ export function uiIntroBuilding(context, reveal) {
         _tankID = null;
 
         timeout(function() {
-            revealTank(tank, t('intro.buildings.start_tank'));
+            revealTank(tank, helpString('intro.buildings.start_tank'));
 
             context.map().on('move.intro drawn.intro', function() {
-                revealTank(tank, t('intro.buildings.start_tank'), { duration: 0 });
+                revealTank(tank, helpString('intro.buildings.start_tank'), { duration: 0 });
             });
 
             context.on('enter.intro', function(mode) {
@@ -492,10 +492,10 @@ export function uiIntroBuilding(context, reveal) {
 
         _tankID = null;
 
-        revealTank(tank, t('intro.buildings.continue_tank'));
+        revealTank(tank, helpString('intro.buildings.continue_tank'));
 
         context.map().on('move.intro drawn.intro', function() {
-            revealTank(tank, t('intro.buildings.continue_tank'), { duration: 0 });
+            revealTank(tank, helpString('intro.buildings.continue_tank'), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -538,7 +538,7 @@ export function uiIntroBuilding(context, reveal) {
                 .on('keyup.intro', checkPresetSearch);
 
             reveal('.preset-search-input',
-                t('intro.buildings.search_tank', { preset: tankPreset.name() })
+                helpString('intro.buildings.search_tank', { preset: tankPreset.name() })
             );
         }, 400);  // after preset list pane visible..
 
@@ -562,7 +562,7 @@ export function uiIntroBuilding(context, reveal) {
                     .on('keyup.intro', checkPresetSearch);
 
                 reveal('.preset-search-input',
-                    t('intro.buildings.search_tank', { preset: tankPreset.name() })
+                    helpString('intro.buildings.search_tank', { preset: tankPreset.name() })
                 );
 
                 context.history().on('change.intro', null);
@@ -574,7 +574,7 @@ export function uiIntroBuilding(context, reveal) {
 
             if (first.classed('preset-man_made-storage_tank')) {
                 reveal(first.select('.preset-list-button').node(),
-                    t('intro.buildings.choose_tank', { preset: tankPreset.name() }),
+                    helpString('intro.buildings.choose_tank', { preset: tankPreset.name() }),
                     { duration: 300 }
                 );
 
@@ -615,7 +615,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                t('intro.buildings.close', { button: icon('#iD-icon-apply', 'pre-text') })
+                helpString('intro.buildings.close')
             );
         }, 500);
 
@@ -646,10 +646,10 @@ export function uiIntroBuilding(context, reveal) {
                 }, 50);  // after menu visible
             });
 
-            revealTank(tank, t('intro.buildings.rightclick_tank'));
+            revealTank(tank, helpString('intro.buildings.rightclick_tank'));
 
             context.map().on('move.intro drawn.intro', function() {
-                revealTank(tank, t('intro.buildings.rightclick_tank'), { duration: 0 });
+                revealTank(tank, helpString('intro.buildings.rightclick_tank'), { duration: 0 });
             });
 
             context.history().on('change.intro', function() {
@@ -678,7 +678,7 @@ export function uiIntroBuilding(context, reveal) {
         var wasChanged = false;
 
         reveal('.edit-menu',
-            t('intro.buildings.circle_tank', { button: icon('#iD-operation-circularize', 'pre-text') }),
+            helpString('intro.buildings.circle_tank'),
             { padding: 50 }
         );
 
@@ -695,7 +695,7 @@ export function uiIntroBuilding(context, reveal) {
             if (!wasChanged && !node) { return continueTo(rightClickTank); }
 
             reveal('.edit-menu',
-                t('intro.buildings.circle_tank', { button: icon('#iD-operation-circularize', 'pre-text') }),
+                helpString('intro.buildings.circle_tank'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -726,7 +726,7 @@ export function uiIntroBuilding(context, reveal) {
     function retryClickCircle() {
         context.enter(modeBrowse(context));
 
-        revealTank(tank, t('intro.buildings.retry_circle'), {
+        revealTank(tank, helpString('intro.buildings.retry_circle'), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(rightClickTank); }
         });
@@ -740,7 +740,7 @@ export function uiIntroBuilding(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            t('intro.buildings.play', { next: t('intro.startediting.title') }), {
+            helpString('intro.buildings.play', { next: t('intro.startediting.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-startEditing',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 7249d2e817..cdae6582db 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -1,6 +1,6 @@
-import { t } from '../../core/localizer';
+import { t, localizer } from '../../core/localizer';
 import { geoSphericalDistance, geoVecNormalizedDot } from '../../geo';
-
+import { uiCmd } from '../cmd';
 
 export function pointBox(loc, context) {
     var rect = context.surfaceRect();
@@ -42,6 +42,91 @@ export function icon(name, svgklass, useklass) {
          (useklass ? ' class="' + useklass + '"' : '') + '></use></svg>';
 }
 
+var helpStringReplacements;
+
+// Returns the localized string 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) {
+    // only load these the first time
+    if (!helpStringReplacements) helpStringReplacements = {
+        // insert icons corresponding to various UI elements
+        point_icon: icon('#iD-icon-point', 'pre-text'),
+        line_icon: icon('#iD-icon-line', 'pre-text'),
+        area_icon: icon('#iD-icon-area', 'pre-text'),
+        note_icon: icon('#iD-icon-note', 'pre-text add-note'),
+        plus: icon('#iD-icon-plus', 'pre-text'),
+        minus: icon('#iD-icon-minus', 'pre-text'),
+        move_icon: icon('#iD-operation-move', 'pre-text operation'),
+        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
+        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
+        circularize_icon: icon('#iD-operation-circularize', 'pre-text operation'),
+        split_icon: icon('#iD-operation-split', 'pre-text operation'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
+        layers_icon: icon('#iD-icon-layers', 'pre-text'),
+        data_icon: icon('#iD-icon-data', 'pre-text'),
+        inspect: icon('#iD-icon-inspect', 'pre-text'),
+        close: icon('#iD-icon-close', 'pre-text'),
+        apply: icon('#iD-icon-apply', 'pre-text'),
+        help_icon: icon('#iD-icon-help', 'pre-text'),
+        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
+        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
+        save_icon: icon('#iD-icon-save', 'pre-text'),
+        leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
+        rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
+
+        // insert keys; may be localized and platform-dependent
+        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'),
+        help_key: t('help.key'),
+        shortcuts_key: t('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.title'),
+        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'),
+        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')
+    };
+
+    var reps;
+    if (replacements) {
+        reps = Object.assign(replacements, helpStringReplacements);
+    } else {
+        reps = helpStringReplacements;
+    }
+
+    return t(id, reps)
+         // use keyboard key styling for shortcuts
+        .replace(/\`(.*?)\`/g, '<kbd>$1</kbd>');
+}
+
 
 function slugify(text) {
     return text.toString().toLowerCase()
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 289ab266ec..a7a522cb9e 100644
--- a/modules/ui/intro/line.js
+++ b/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 { icon, pad, selectMenuItem, transitionTime } from './helper';
+import { helpString, 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',
-                t('intro.lines.add_line', { button: icon('#iD-icon-line', 'pre-text') }));
+                helpString('intro.lines.add_line'));
 
             tooltip.selectAll('.popover-inner')
                 .insert('svg', 'span')
@@ -95,13 +95,13 @@ export function uiIntroLine(context, reveal) {
         var padding = 70 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(tulipRoadStart, padding, context);
         box.height = box.height + 100;
-        reveal(box, t('intro.lines.start_line'));
+        reveal(box, helpString('intro.lines.start_line'));
 
         context.map().on('move.intro drawn.intro', function() {
             padding = 70 * Math.pow(2, context.map().zoom() - 18);
             box = pad(tulipRoadStart, padding, context);
             box.height = box.height + 100;
-            reveal(box, t('intro.lines.start_line'), { duration: 0 });
+            reveal(box, helpString('intro.lines.start_line'), { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -128,7 +128,7 @@ export function uiIntroLine(context, reveal) {
             var box = pad(tulipRoadMidpoint, padding, context);
             box.height = box.height * 2;
             reveal(box,
-                t('intro.lines.intersect', { name: t('intro.graph.name.flower-street') })
+                helpString('intro.lines.intersect', { name: t('intro.graph.name.flower-street') })
             );
 
             context.map().on('move.intro drawn.intro', function() {
@@ -136,7 +136,7 @@ export function uiIntroLine(context, reveal) {
                 box = pad(tulipRoadMidpoint, padding, context);
                 box.height = box.height * 2;
                 reveal(box,
-                    t('intro.lines.intersect', { name: t('intro.graph.name.flower-street') }),
+                    helpString('intro.lines.intersect', { name: t('intro.graph.name.flower-street') }),
                     { duration: 0 }
                 );
             });
@@ -186,7 +186,7 @@ export function uiIntroLine(context, reveal) {
 
         var box = pad(tulipRoadIntersection, 80, context);
         reveal(box,
-            t('intro.lines.retry_intersect', { name: t('intro.graph.name.flower-street') })
+            helpString('intro.lines.retry_intersect', { name: t('intro.graph.name.flower-street') })
         );
 
         timeout(chapter.restart, 3000);
@@ -200,7 +200,7 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerEase(tulipRoadIntersection, 500);
 
-        reveal('.surface', t('intro.lines.continue_line'));
+        reveal('.surface', helpString('intro.lines.continue_line'));
 
         context.on('enter.intro', function(mode) {
             if (mode.id === 'draw-line')
@@ -236,7 +236,7 @@ export function uiIntroLine(context, reveal) {
             context.container().select('.inspector-wrap .panewrap').style('right', '-100%');
 
             reveal(button.node(),
-                t('intro.lines.choose_category_road', { category: roadCategory.name() })
+                helpString('intro.lines.choose_category_road', { category: roadCategory.name() })
             );
 
             button.on('click.intro', function() {
@@ -276,7 +276,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal(subgrid.node(),
-                t('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
+                helpString('intro.lines.choose_preset_residential', { preset: residentialPreset.name() }),
                 { tooltipBox: '.preset-highway-residential .preset-list-button', duration: 300 }
             );
         }, 300);
@@ -304,7 +304,7 @@ export function uiIntroLine(context, reveal) {
             var button = context.container().select('.entity-editor-pane .preset-list-button');
 
             reveal(button.node(),
-                t('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
+                helpString('intro.lines.retry_preset_residential', { preset: residentialPreset.name() })
             );
 
             button.on('click.intro', function() {
@@ -329,7 +329,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                t('intro.lines.name_road', { button: icon('#iD-icon-apply', 'pre-text') }),
+                helpString('intro.lines.name_road', { button: icon('#iD-icon-apply', 'pre-text') }),
                 { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);
@@ -345,7 +345,7 @@ export function uiIntroLine(context, reveal) {
         context.history().checkpoint('doneAddLine');
 
         timeout(function() {
-            reveal('.surface', t('intro.lines.did_name_road'), {
+            reveal('.surface', helpString('intro.lines.did_name_road'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { continueTo(updateLine); }
             });
@@ -372,14 +372,14 @@ export function uiIntroLine(context, reveal) {
             var box = pad(woodRoadDragMidpoint, padding, context);
             var advance = function() { continueTo(addNode); };
 
-            reveal(box, t('intro.lines.update_line'),
+            reveal(box, helpString('intro.lines.update_line'),
                 { buttonText: t('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, t('intro.lines.update_line'),
+                reveal(box, helpString('intro.lines.update_line'),
                     { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
                 );
             });
@@ -400,12 +400,12 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 40 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadAddNode, padding, context);
-        reveal(box, t('intro.lines.add_node'));
+        reveal(box, helpString('intro.lines.add_node'));
 
         context.map().on('move.intro drawn.intro', function() {
             var padding = 40 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadAddNode, padding, context);
-            reveal(box, t('intro.lines.add_node'), { duration: 0 });
+            reveal(box, helpString('intro.lines.add_node'), { duration: 0 });
         });
 
         context.history().on('change.intro', function(changed) {
@@ -438,7 +438,7 @@ export function uiIntroLine(context, reveal) {
         }
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        reveal(box, t('intro.lines.start_drag_endpoint'));
+        reveal(box, helpString('intro.lines.start_drag_endpoint'));
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -446,7 +446,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 100 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragEndpoint, padding, context);
-            reveal(box, t('intro.lines.start_drag_endpoint'), { duration: 0 });
+            reveal(box, helpString('intro.lines.start_drag_endpoint'), { duration: 0 });
 
             var entity = context.entity(woodRoadEndID);
             if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) {
@@ -468,7 +468,7 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        reveal(box, t('intro.lines.finish_drag_endpoint'));
+        reveal(box, helpString('intro.lines.finish_drag_endpoint'));
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -476,7 +476,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 100 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragEndpoint, padding, context);
-            reveal(box, t('intro.lines.finish_drag_endpoint'), { duration: 0 });
+            reveal(box, helpString('intro.lines.finish_drag_endpoint'), { duration: 0 });
 
             var entity = context.entity(woodRoadEndID);
             if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) {
@@ -506,7 +506,7 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 80 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragMidpoint, padding, context);
-        reveal(box, t('intro.lines.start_drag_midpoint'));
+        reveal(box, helpString('intro.lines.start_drag_midpoint'));
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -514,7 +514,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 80 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragMidpoint, padding, context);
-            reveal(box, t('intro.lines.start_drag_midpoint'), { duration: 0 });
+            reveal(box, helpString('intro.lines.start_drag_midpoint'), { duration: 0 });
         });
 
         context.history().on('change.intro', function(changed) {
@@ -553,7 +553,7 @@ export function uiIntroLine(context, reveal) {
             continueTo(deleteLines);
         };
 
-        reveal(box, t('intro.lines.continue_drag_midpoint'),
+        reveal(box, helpString('intro.lines.continue_drag_midpoint'),
             { buttonText: t('intro.ok'), buttonCallback: advance }
         );
 
@@ -564,7 +564,7 @@ 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, t('intro.lines.continue_drag_midpoint'),
+            reveal(box, helpString('intro.lines.continue_drag_midpoint'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
             );
         });
@@ -597,7 +597,7 @@ export function uiIntroLine(context, reveal) {
             box.height += 400;
             var advance = function() { continueTo(rightClickIntersection); };
 
-            reveal(box, t('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
+            reveal(box, helpString('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
                 { buttonText: t('intro.ok'), buttonCallback: advance }
             );
 
@@ -606,7 +606,7 @@ export function uiIntroLine(context, reveal) {
                 var box = pad(deleteLinesLoc, padding, context);
                 box.top -= 200;
                 box.height += 400;
-                reveal(box, t('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
+                reveal(box, helpString('intro.lines.delete_lines', { street: t('intro.graph.name.12th-avenue') }),
                     { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
                 );
             });
@@ -636,14 +636,14 @@ export function uiIntroLine(context, reveal) {
         timeout(function() {
             var padding = 60 * Math.pow(2, context.map().zoom() - 18);
             var box = pad(eleventhAvenueEnd, padding, context);
-            reveal(box, t('intro.lines.rightclick_intersection',
+            reveal(box, helpString('intro.lines.rightclick_intersection',
                 { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') })
             );
 
             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, t('intro.lines.rightclick_intersection',
+                reveal(box, helpString('intro.lines.rightclick_intersection',
                     { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') }),
                     { duration: 0 }
                 );
@@ -691,8 +691,8 @@ export function uiIntroLine(context, reveal) {
         var wasChanged = false;
         _washingtonSegmentID = null;
 
-        reveal('.edit-menu', t('intro.lines.split_intersection',
-            { button: icon('#iD-operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') }),
+        reveal('.edit-menu', helpString('intro.lines.split_intersection',
+            { street: t('intro.graph.name.washington-street') }),
             { padding: 50 }
         );
 
@@ -700,8 +700,8 @@ export function uiIntroLine(context, reveal) {
             var node = selectMenuItem(context, 'split').node();
             if (!wasChanged && !node) { return continueTo(rightClickIntersection); }
 
-            reveal('.edit-menu', t('intro.lines.split_intersection',
-                { button: icon('#iD-operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') }),
+            reveal('.edit-menu', helpString('intro.lines.split_intersection',
+                { street: t('intro.graph.name.washington-street') }),
                 { duration: 0, padding: 50 }
             );
         });
@@ -734,14 +734,14 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 60 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(eleventhAvenueEnd, padding, context);
-        reveal(box, t('intro.lines.retry_split'),
+        reveal(box, helpString('intro.lines.retry_split'),
             { buttonText: t('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, t('intro.lines.retry_split'),
+            reveal(box, helpString('intro.lines.retry_split'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
             );
         });
@@ -769,7 +769,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, t(string, { street1: street, street2: street }),
+        reveal(box, helpString(string, { street1: street, street2: street }),
             { duration: 500 }
         );
 
@@ -780,7 +780,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, t(string, { street1: street, street2: street }),
+                reveal(box, helpString(string, { street1: street, street2: street }),
                     { duration: 0 }
                 );
             });
@@ -850,7 +850,7 @@ export function uiIntroLine(context, reveal) {
             }
 
             reveal(box,
-                t('intro.lines.multi_select', { selected: selected, other1: other, other2: other })
+                helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other })
             );
 
             context.map().on('move.intro drawn.intro', function() {
@@ -869,7 +869,7 @@ export function uiIntroLine(context, reveal) {
                 }
 
                 reveal(box,
-                    t('intro.lines.multi_select', { selected: selected, other1: other, other2: other }),
+                    helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other }),
                     { duration: 0 }
                 );
             });
@@ -909,12 +909,12 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 200 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(twelfthAvenue, padding, context);
-        reveal(box, t('intro.lines.multi_rightclick'));
+        reveal(box, helpString('intro.lines.multi_rightclick'));
 
         context.map().on('move.intro drawn.intro', function() {
             var padding = 200 * Math.pow(2, context.map().zoom() - 18);
             var box = pad(twelfthAvenue, padding, context);
-            reveal(box, t('intro.lines.multi_rightclick'), { duration: 0 });
+            reveal(box, helpString('intro.lines.multi_rightclick'), { duration: 0 });
         });
 
         d3_select(window).on('click.intro contextmenu.intro', function() {
@@ -967,13 +967,13 @@ export function uiIntroLine(context, reveal) {
         if (!node) return continueTo(multiRightClick);
 
         reveal('.edit-menu',
-            t('intro.lines.multi_delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+            helpString('intro.lines.multi_delete'),
             { padding: 50 }
         );
 
         context.map().on('move.intro drawn.intro', function() {
             reveal('.edit-menu',
-                t('intro.lines.multi_delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+                helpString('intro.lines.multi_delete'),
                 { duration: 0, padding: 50 }
             );
         });
@@ -1006,7 +1006,7 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 200 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(twelfthAvenue, padding, context);
-        reveal(box, t('intro.lines.retry_delete'), {
+        reveal(box, helpString('intro.lines.retry_delete'), {
             buttonText: t('intro.ok'),
             buttonCallback: function() { continueTo(multiSelect); }
         });
@@ -1020,7 +1020,7 @@ export function uiIntroLine(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            t('intro.lines.play', { next: t('intro.buildings.title') }), {
+            helpString('intro.lines.play', { next: t('intro.buildings.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-building',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index 8fe4cc3f50..e0dbb807bf 100644
--- a/modules/ui/intro/navigation.js
+++ b/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 { icon, pointBox, transitionTime } from './helper';
+import { helpString, icon, pointBox, transitionTime } from './helper';
 
 
 export function uiIntroNavigation(context, reveal) {
@@ -60,9 +60,9 @@ export function uiIntroNavigation(context, reveal) {
 
             var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch';
 
-            reveal('.surface', t('intro.navigation.' + textId));
+            reveal('.surface', helpString('intro.navigation.' + textId));
             context.map().on('drawn.intro', function() {
-                reveal('.surface', t('intro.navigation.' + textId), { duration: 0 });
+                reveal('.surface', helpString('intro.navigation.' + textId), { duration: 0 });
             });
 
             context.map().on('move.intro', function() {
@@ -88,18 +88,12 @@ export function uiIntroNavigation(context, reveal) {
         var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch';
 
         reveal('.surface',
-            t('intro.navigation.' + textId, {
-                plus: icon('#iD-icon-plus', 'pre-text'),
-                minus: icon('#iD-icon-minus', 'pre-text')
-            })
+            helpString('intro.navigation.' + textId)
         );
 
         context.map().on('drawn.intro', function() {
             reveal('.surface',
-                t('intro.navigation.' + textId, {
-                    plus: icon('#iD-icon-plus', 'pre-text'),
-                    minus: icon('#iD-icon-minus', 'pre-text')
-                }), { duration: 0 }
+                helpString('intro.navigation.' + textId), { duration: 0 }
             );
         });
 
@@ -120,12 +114,12 @@ export function uiIntroNavigation(context, reveal) {
     function features() {
         var onClick = function() { continueTo(pointsLinesAreas); };
 
-        reveal('.surface', t('intro.navigation.features'),
+        reveal('.surface', helpString('intro.navigation.features'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', t('intro.navigation.features'),
+            reveal('.surface', helpString('intro.navigation.features'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -139,12 +133,12 @@ export function uiIntroNavigation(context, reveal) {
     function pointsLinesAreas() {
         var onClick = function() { continueTo(nodesWays); };
 
-        reveal('.surface', t('intro.navigation.points_lines_areas'),
+        reveal('.surface', helpString('intro.navigation.points_lines_areas'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', t('intro.navigation.points_lines_areas'),
+            reveal('.surface', helpString('intro.navigation.points_lines_areas'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -158,12 +152,12 @@ export function uiIntroNavigation(context, reveal) {
     function nodesWays() {
         var onClick = function() { continueTo(clickTownHall); };
 
-        reveal('.surface', t('intro.navigation.nodes_ways'),
+        reveal('.surface', helpString('intro.navigation.nodes_ways'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface', t('intro.navigation.nodes_ways'),
+            reveal('.surface', helpString('intro.navigation.nodes_ways'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -188,13 +182,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, t('intro.navigation.' + textId));
+            reveal(box, helpString('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, t('intro.navigation.' + textId), { duration: 0 });
+                reveal(box, helpString('intro.navigation.' + textId), { duration: 0 });
             });
 
             context.on('enter.intro', function() {
@@ -227,7 +221,7 @@ export function uiIntroNavigation(context, reveal) {
         var box = pointBox(entity.loc, context);
         var onClick = function() { continueTo(editorTownHall); };
 
-        reveal(box, t('intro.navigation.selected_townhall'),
+        reveal(box, helpString('intro.navigation.selected_townhall'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
@@ -235,7 +229,7 @@ export function uiIntroNavigation(context, reveal) {
             var entity = context.hasEntity(hallId);
             if (!entity) return;
             var box = pointBox(entity.loc, context);
-            reveal(box, t('intro.navigation.selected_townhall'),
+            reveal(box, helpString('intro.navigation.selected_townhall'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -263,7 +257,7 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(presetTownHall); };
 
         reveal('.entity-editor-pane',
-            t('intro.navigation.editor_townhall'),
+            helpString('intro.navigation.editor_townhall'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
@@ -301,7 +295,7 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(fieldsTownHall); };
 
         reveal('.entity-editor-pane .section-feature-type',
-            t('intro.navigation.preset_townhall', { preset: preset.name() }),
+            helpString('intro.navigation.preset_townhall', { preset: preset.name() }),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
@@ -335,7 +329,7 @@ export function uiIntroNavigation(context, reveal) {
         var onClick = function() { continueTo(closeTownHall); };
 
         reveal('.entity-editor-pane .section-preset-fields',
-            t('intro.navigation.fields_townhall'),
+            helpString('intro.navigation.fields_townhall'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
@@ -365,7 +359,7 @@ export function uiIntroNavigation(context, reveal) {
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
-            t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
+            helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') })
         );
 
         context.on('exit.intro', function() {
@@ -378,7 +372,7 @@ export function uiIntroNavigation(context, reveal) {
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
-                t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
+                helpString('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
                 { duration: 0 }
             );
         });
@@ -401,7 +395,7 @@ export function uiIntroNavigation(context, reveal) {
 
         timeout(function() {
             reveal('.search-header input',
-                t('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
+                helpString('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
             );
 
             context.container().select('.search-header input')
@@ -417,7 +411,7 @@ export function uiIntroNavigation(context, reveal) {
 
         if (!firstName.empty() && firstName.text() === name) {
             reveal(first.node(),
-                t('intro.navigation.choose_street', { name: name }),
+                helpString('intro.navigation.choose_street', { name: name }),
                 { duration: 300 }
             );
 
@@ -451,7 +445,7 @@ export function uiIntroNavigation(context, reveal) {
         box.height = 500;
 
         reveal(box,
-            t('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
+            helpString('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
             { duration: 600, buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
@@ -462,7 +456,7 @@ export function uiIntroNavigation(context, reveal) {
                 var box = pointBox(entity.loc, context);
                 box.height = 500;
                 reveal(box,
-                    t('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
+                    helpString('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
                     { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
                 );
             });
@@ -501,7 +495,7 @@ export function uiIntroNavigation(context, reveal) {
         var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
         reveal('.entity-editor-pane',
-            t('intro.navigation.editor_street', {
+            helpString('intro.navigation.editor_street', {
                 button: icon(href, 'pre-text'),
                 field1: onewayField.label(),
                 field2: maxspeedField.label()
@@ -518,7 +512,7 @@ export function uiIntroNavigation(context, reveal) {
             var href = d3_select(selector).attr('href') || '#iD-icon-close';
 
             reveal('.entity-editor-pane',
-                t('intro.navigation.editor_street', {
+                helpString('intro.navigation.editor_street', {
                     button: icon(href, 'pre-text'),
                     field1: onewayField.label().toLowerCase(),
                     field2: maxspeedField.label().toLowerCase()
@@ -537,7 +531,7 @@ export function uiIntroNavigation(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            t('intro.navigation.play', { next: t('intro.points.title') }), {
+            helpString('intro.navigation.play', { next: t('intro.points.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-point',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index 5daf869376..e69e9aab08 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -5,12 +5,12 @@ import {
 } from 'd3-selection';
 
 import { presetManager } from '../../presets';
-import { t, localizer } from '../../core/localizer';
+import { t } from '../../core/localizer';
 import { actionChangePreset } from '../../actions/change_preset';
 import { modeBrowse } from '../../modes/browse';
 import { modeSelect } from '../../modes/select';
 import { utilRebind } from '../../util/rebind';
-import { icon, pointBox, pad, selectMenuItem, transitionTime } from './helper';
+import { helpString, 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',
-                t('intro.points.add_point', { button: icon('#iD-icon-point', 'pre-text') }));
+                helpString('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, t('intro.points.' + textId));
+        reveal(pointBox, helpString('intro.points.' + textId));
 
         context.map().on('move.intro drawn.intro', function() {
             pointBox = pad(building, 150, context);
-            reveal(pointBox, t('intro.points.' + textId), { duration: 0 });
+            reveal(pointBox, helpString('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',
-            t('intro.points.search_cafe', { preset: cafePreset.name() })
+            helpString('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',
-                    t('intro.points.search_cafe', { preset: cafePreset.name() })
+                    helpString('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(),
-                    t('intro.points.choose_cafe', { preset: cafePreset.name() }),
+                    helpString('intro.points.choose_cafe', { preset: cafePreset.name() }),
                     { duration: 300 }
                 );
 
@@ -176,7 +176,7 @@ export function uiIntroPoint(context, reveal) {
         }
 
         timeout(function() {
-            reveal('.entity-editor-pane', t('intro.points.feature_editor'), {
+            reveal('.entity-editor-pane', helpString('intro.points.feature_editor'), {
                 tooltipClass: 'intro-points-describe',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { continueTo(addName); }
@@ -209,7 +209,7 @@ export function uiIntroPoint(context, reveal) {
             // Give them an OK button instead.
             var entity = context.entity(_pointID);
             if (entity.tags.name) {
-                var tooltip = reveal('.entity-editor-pane', t('intro.points.add_name'), {
+                var tooltip = reveal('.entity-editor-pane', helpString('intro.points.add_name'), {
                     tooltipClass: 'intro-points-describe',
                     buttonText: t('intro.ok'),
                     buttonCallback: function() { continueTo(addCloseEditor); }
@@ -217,7 +217,7 @@ export function uiIntroPoint(context, reveal) {
                 tooltip.select('.instruction').style('display', 'none');
 
             } else {
-                reveal('.entity-editor-pane', t('intro.points.add_name'),
+                reveal('.entity-editor-pane', helpString('intro.points.add_name'),
                     { tooltipClass: 'intro-points-describe' }
                 );
             }
@@ -252,7 +252,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            t('intro.points.add_close', { button: icon(href, 'pre-text') })
+            helpString('intro.points.add_close', { button: icon(href, 'pre-text') })
         );
 
         function continueTo(nextStep) {
@@ -279,14 +279,14 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             var box = pointBox(entity.loc, context);
-            reveal(box, t('intro.points.reselect'), { duration: 600 });
+            reveal(box, helpString('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, t('intro.points.reselect'), { duration: 0 });
+                    reveal(box, helpString('intro.points.reselect'), { duration: 0 });
                 });
             }, 600); // after reveal..
 
@@ -322,7 +322,7 @@ export function uiIntroPoint(context, reveal) {
         });
 
         timeout(function() {
-            reveal('.entity-editor-pane', t('intro.points.update'),
+            reveal('.entity-editor-pane', helpString('intro.points.update'),
                 { tooltipClass: 'intro-points-describe' }
             );
         }, 400);
@@ -349,7 +349,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                t('intro.points.update_close', { button: icon('#iD-icon-apply', 'pre-text') })
+                helpString('intro.points.update_close', { button: icon('#iD-icon-apply', 'pre-text') })
             );
         }, 500);
 
@@ -369,14 +369,14 @@ export function uiIntroPoint(context, reveal) {
 
         var box = pointBox(entity.loc, context);
         var textId = context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch';
-        reveal(box, t('intro.points.' + textId), { duration: 600 });
+        reveal(box, helpString('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, t('intro.points.' + textId), { duration: 0 });
+                reveal(box, helpString('intro.points.' + textId), { duration: 0 });
             });
         }, 600); // after reveal
 
@@ -409,14 +409,14 @@ export function uiIntroPoint(context, reveal) {
         if (!node) { return continueTo(rightClickPoint); }
 
         reveal('.edit-menu',
-            t('intro.points.delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+            helpString('intro.points.delete'),
             { padding: 50 }
         );
 
         timeout(function() {
             context.map().on('move.intro', function() {
                 reveal('.edit-menu',
-                    t('intro.points.delete', { button: icon('#iD-operation-delete', 'pre-text') }),
+                    helpString('intro.points.delete'),
                     { duration: 0,  padding: 50 }
                 );
             });
@@ -448,9 +448,8 @@ export function uiIntroPoint(context, reveal) {
             continueTo(play);
         });
 
-        var iconName = '#iD-icon-' + (localizer.textDirection() === 'rtl' ? 'redo' : 'undo');
         reveal('.top-toolbar button.undo-button',
-            t('intro.points.undo', { button: icon(iconName, 'pre-text') })
+            helpString('intro.points.undo')
         );
 
         function continueTo(nextStep) {
@@ -463,7 +462,7 @@ export function uiIntroPoint(context, reveal) {
     function play() {
         dispatch.call('done');
         reveal('.ideditor',
-            t('intro.points.play', { next: t('intro.areas.title') }), {
+            helpString('intro.points.play', { next: t('intro.areas.title') }), {
                 tooltipBox: '.intro-nav-wrap .chapter-area',
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { reveal('.ideditor'); }
diff --git a/modules/ui/intro/start_editing.js b/modules/ui/intro/start_editing.js
index 75cd23db1a..47ba615fe3 100644
--- a/modules/ui/intro/start_editing.js
+++ b/modules/ui/intro/start_editing.js
@@ -4,7 +4,7 @@ import {
 } from 'd3-selection';
 
 import { t } from '../../core/localizer';
-import { icon } from './helper';
+import { helpString } from './helper';
 import { uiModal } from '../modal';
 import { utilRebind } from '../../util/rebind';
 
@@ -20,7 +20,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     function showHelp() {
         reveal('.map-control.help-control',
-            t('intro.startediting.help', { button: icon('#iD-icon-help', 'pre-text'), key: t('help.key') }), {
+            helpString('intro.startediting.help'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { shortcuts(); }
             }
@@ -29,7 +29,7 @@ export function uiIntroStartEditing(context, reveal) {
 
     function shortcuts() {
         reveal('.map-control.help-control',
-            t('intro.startediting.shortcuts', { key: t('shortcuts.toggle.key') }), {
+            helpString('intro.startediting.shortcuts'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { showSave(); }
             }
@@ -39,7 +39,7 @@ export function uiIntroStartEditing(context, reveal) {
     function showSave() {
         context.container().selectAll('.shaded').remove();  // in case user opened keyboard shortcuts
         reveal('.top-toolbar button.save',
-            t('intro.startediting.save'), {
+            helpString('intro.startediting.save'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { showStart(); }
             }
diff --git a/modules/ui/intro/welcome.js b/modules/ui/intro/welcome.js
index 841606d574..d4300748d9 100644
--- a/modules/ui/intro/welcome.js
+++ b/modules/ui/intro/welcome.js
@@ -1,5 +1,6 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 
+import { helpString } from './helper';
 import { t } from '../../core/localizer';
 import { utilRebind } from '../../util/rebind';
 
@@ -15,21 +16,21 @@ export function uiIntroWelcome(context, reveal) {
     function welcome() {
         context.map().centerZoom([-85.63591, 41.94285], 19);
         reveal('.intro-nav-wrap .chapter-welcome',
-            t('intro.welcome.welcome'),
+            helpString('intro.welcome.welcome'),
             { buttonText: t('intro.ok'), buttonCallback: practice }
         );
     }
 
     function practice() {
         reveal('.intro-nav-wrap .chapter-welcome',
-            t('intro.welcome.practice'),
+            helpString('intro.welcome.practice'),
             { buttonText: t('intro.ok'), buttonCallback: words }
         );
     }
 
     function words() {
         reveal('.intro-nav-wrap .chapter-welcome',
-            t('intro.welcome.words'),
+            helpString('intro.welcome.words'),
             { buttonText: t('intro.ok'), buttonCallback: chapters }
         );
     }
@@ -38,7 +39,7 @@ export function uiIntroWelcome(context, reveal) {
     function chapters() {
         dispatch.call('done');
         reveal('.intro-nav-wrap .chapter-navigation',
-            t('intro.welcome.chapters', { next: t('intro.navigation.title') })
+            helpString('intro.welcome.chapters', { next: t('intro.navigation.title') })
         );
     }
 
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 64592355b4..48924d7d18 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -1,14 +1,13 @@
 
 import marked from 'marked';
 import { svgIcon } from '../../svg/icon';
-import { uiCmd } from '../cmd';
 import { uiIntro } from '../intro/intro';
 import { uiShortcuts } from '../shortcuts';
 import { uiPane } from '../pane';
 
 import { t, localizer } from '../../core/localizer';
 import { uiTooltip } from '../tooltip';
-import { icon } from '../intro/helper';
+import { helpString } from '../intro/helper';
 
 export function uiPaneHelp(context) {
 
@@ -231,73 +230,15 @@ export function uiPaneHelp(context) {
         'help.qa.issues_h': 3
     };
 
-    var replacements = {
-        // insert icons corresponding to various UI elements
-        point_icon: icon('#iD-icon-point', 'pre-text'),
-        line_icon: icon('#iD-icon-line', 'pre-text'),
-        area_icon: icon('#iD-icon-area', 'pre-text'),
-        note_icon: icon('#iD-icon-note', 'pre-text add-note'),
-        plus: icon('#iD-icon-plus', 'pre-text'),
-        minus: icon('#iD-icon-minus', 'pre-text'),
-        move_icon: icon('#iD-operation-move', 'pre-text operation'),
-        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
-        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
-        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
-        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
-        layers_icon: icon('#iD-icon-layers', 'pre-text'),
-        data_icon: icon('#iD-icon-data', 'pre-text'),
-        inspect: icon('#iD-icon-inspect', 'pre-text'),
-        close: icon('#iD-icon-close', 'pre-text'),
-        undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
-        redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
-        save_icon: icon('#iD-icon-save', 'pre-text'),
-        leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
-        rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
-
-        // insert localized, platform-dependent keys
-        shift: uiCmd.display('⇧'),
-        alt: uiCmd.display('⌥'),
-        return: uiCmd.display('↵'),
-        space: t('shortcuts.key.space'),
-        add_note_key: t('modes.add_note.key'),
-        shortcuts_key: t('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.title'),
-        delete: t('operations.delete.title'),
-        move: t('operations.move.title'),
-        orthogonalize: t('operations.orthogonalize.title'),
-        merge: t('operations.merge.title'),
-        disconnect: t('operations.disconnect.title'),
-        map_data: t('map_data.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'),
-
-        // insert iD's version number
-        version: context.version
-    };
-
     // For each section, squash all the texts into a single markdown document
     var docs = docKeys.map(function(key) {
         var helpkey = 'help.' + key[0];
+        var helpPaneReplacements = { version: context.version };
         var text = key[1].reduce(function(all, part) {
             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 + t(subkey, replacements) + '\n\n';
+            return all + hhh + helpString(subkey, helpPaneReplacements) + '\n\n';
         }, '');
 
         return {

From 3892600814658ca59b1ed67106db8273efb6cf92 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincylvania@icloud.com>
Date: Fri, 10 Jul 2020 15:24:01 -0400
Subject: [PATCH 13/30] Reduce redundant strings in the walkthrough Update the
 lines walkthrough chapter for touchscreens Add toggled dispatch event to the
 edit menu

---
 data/core.yaml                 | 67 +++++++++++++++++++++-----------
 dist/locales/en.json           | 67 +++++++++++++++++++++-----------
 modules/ui/edit_menu.js        | 10 ++++-
 modules/ui/init.js             |  9 +++--
 modules/ui/intro/area.js       | 14 ++++---
 modules/ui/intro/line.js       | 70 ++++++++++++++++++++++++----------
 modules/ui/intro/navigation.js | 26 ++++++-------
 modules/ui/intro/point.js      |  8 ++--
 8 files changed, 177 insertions(+), 94 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 962a059327..ae2d7432b0 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1931,8 +1931,9 @@ en:
       chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Press '{next}' to continue.**"
     navigation:
       title: "Navigation"
-      drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
-      drag_touch: "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      map_info: "The main map area shows OpenStreetMap data on top of a background."
+      drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      drag_touch: "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
       zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
@@ -1948,17 +1949,20 @@ en:
       search_street: "You can also search for features in the current view, or worldwide. **Search for '{name}'.**"
       choose_street: "**Choose {name} from the list to select it.**"
       selected_street: "Great! {name} is now selected."
-      editor_street: "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**"
+      street_different_fields: "The fields shown for a street are different than the fields that were shown for the town hall."
+      editor_street: "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**"
       play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     points:
       title: "Points"
-      add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**"
+      points_info: "*Points* can be used to represent features such as shops, restaurants, and monuments."
+      add_point: "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**"
       place_point: "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**"
       place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**"
       search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**"
       choose_cafe: "**Choose {preset} from the list.**"
       feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
-      add_name: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**"
+      fields_info: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure."
+      add_name: "Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**"
       add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
       reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**"
       update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**"
@@ -1971,11 +1975,13 @@ en:
     areas:
       title: "Areas"
       add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**"
-      start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**"
-      start_playground_touch: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**"
+      start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature."
+      starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**"
+      starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**"
       continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
-      finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**"
-      finish_playground_touch: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**"
+      finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node."
+      finish_playground_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard."
+      finish_drawing: "**Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
       add_field: "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**"
@@ -1985,30 +1991,47 @@ en:
       play: "Good job! Try drawing a few more areas, and see what other kinds of area features you can add to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     lines:
       title: "Lines"
-      add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**"
-      start_line: "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**"
-      intersect: "Click or press `{space}` to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**"
+      add_line: "*Lines* are used to represent features such as roads, railroads, and rivers. **Press the {line_icon} {line} button to add a new line.**"
+      missing_road: "Here is a road that is missing. Let's add it!"
+      line_draw_info: "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary."
+      start_line: "**Start a new line by clicking at the top end of this missing road.**"
+      start_line_tap: "**Start a new line by tapping at the top end of this missing road.**"
+      intersect: "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**"
       retry_intersect: "The road needs to intersect {name}. Let's try again!"
-      continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**"
+      continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed."
+      finish_line_click: "When you're finished, click the last node again or press `{return}`."
+      finish_line_tap: "When you're finished, tap the last node again or press `{return}` on a keyboard."
+      finish_road: "**Finish drawing the road.**"
       choose_category_road: "**Select {category} from the list.**"
       choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**"
-      retry_preset_residential: "You didn't select the {preset} type. **Click here to choose again.**"
+      retry_preset_residential: "You didn't select the {preset} type. **Press this button to choose again.**"
       name_road: "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
       did_name_road: "Looks good! Next we will learn how to update the shape of a line."
       update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
       add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
-      start_drag_endpoint: "When a line is selected, you can drag any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**"
-      finish_drag_endpoint: "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**"
+      add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**"
+      start_drag_endpoint: "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag."
+      start_drag_endpoint_touch: "When a line is selected, you can tap-and-drag any of its nodes to adjust them."
+      drag_to_intersection: "**Drag the endpoint to the place where these roads should intersect.**"
+      spot_looks_good: "This spot looks good."
+      finish_drag_endpoint: "**Release the mouse button to finish dragging.**"
+      finish_drag_endpoint_touch: "**Let go of the node to finish dragging.**"
       start_drag_midpoint: "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**"
-      continue_drag_midpoint: "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click {ok}.**"
+      continue_drag_midpoint: "This line is looking much better! Continue to adjust this line until the curve matches the road shape. **When you're happy with how the line looks, press {ok}.**"
       delete_lines: "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
-      rightclick_intersection: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **{rightclick} Right-click on the intersection node.**"
+      split_street: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it."
+      rightclick_intersection: "**{rightclick} Right-click on the intersection node.**"
+      edit_menu_intersection_touch: "**Long-press on the intersection node.**"
       split_intersection: "**Press the {split_icon} {split} button to divide {street}.**"
       retry_split: "You didn't press the {split_icon} {split} button. Try again."
-      did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**"
-      did_split_single: "**Click the top part of {street2} to select it.**"
-      multi_select: "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**"
-      multi_rightclick: "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**"
+      did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**"
+      did_split_single: "**Select the top part of {street2}.**"
+      multi_select: "{selected} is now selected. Let's also select {other1}."
+      add_to_selection_click: "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**"
+      add_to_selection_touch: "**Tap-and-hold {selected} and then tap {other2} to select both.**"
+      multi_select_success: "Good! Both lines to delete are now selected."
+      multi_rightclick: "**{rightclick} Right-click on one of the lines to show the edit menu.**"
+      multi_edit_menu_touch: "**Long-press on one of the lines to show the edit menu.**"
       multi_delete: "**Press the {delete_icon} {delete} button to remove the extra lines.**"
       retry_delete: "You didn't press the {delete_icon} {delete} button. Try again."
       play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 020fa655f7..a0ad89adf8 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2406,8 +2406,9 @@
             },
             "navigation": {
                 "title": "Navigation",
-                "drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
-                "drag_touch": "The main map area shows OpenStreetMap data on top of a background.{br}You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "map_info": "The main map area shows OpenStreetMap data on top of a background.",
+                "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "drag_touch": "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
@@ -2423,18 +2424,21 @@
                 "search_street": "You can also search for features in the current view, or worldwide. **Search for '{name}'.**",
                 "choose_street": "**Choose {name} from the list to select it.**",
                 "selected_street": "Great! {name} is now selected.",
-                "editor_street": "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` the {button} button.**",
+                "street_different_fields": "The fields shown for a street are different than the fields that were shown for the town hall.",
+                "editor_street": "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**",
                 "play": "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "points": {
                 "title": "Points",
-                "add_point": "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**",
+                "points_info": "*Points* can be used to represent features such as shops, restaurants, and monuments.",
+                "add_point": "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**",
                 "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**",
                 "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**",
                 "search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**",
                 "choose_cafe": "**Choose {preset} from the list.**",
                 "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
-                "add_name": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.{br}Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**",
+                "fields_info": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.",
+                "add_name": "Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**",
                 "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
                 "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**",
                 "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**",
@@ -2448,11 +2452,13 @@
             "areas": {
                 "title": "Areas",
                 "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**",
-                "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Click or press `{space}` to place a starting node on one of the corners of the playground.**",
-                "start_playground_touch": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature. **Tap to place a starting node on one of the corners of the playground.**",
+                "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature.",
+                "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**",
+                "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**",
                 "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
-                "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish drawing an area for the playground.**",
-                "finish_playground_touch": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard. **Finish drawing an area for the playground.**",
+                "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.",
+                "finish_playground_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.",
+                "finish_drawing": "**Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
                 "add_field": "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**",
@@ -2463,30 +2469,47 @@
             },
             "lines": {
                 "title": "Lines",
-                "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Click the {line_icon} {line} button to add a new line.**",
-                "start_line": "Here is a road that is missing. Let's add it!{br}In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary. **Start a new line by clicking at the top end of this missing road.**",
-                "intersect": "Click or press `{space}` to add more nodes to the line.{br}Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on {name} to create an intersection connecting the two lines.**",
+                "add_line": "*Lines* are used to represent features such as roads, railroads, and rivers. **Press the {line_icon} {line} button to add a new line.**",
+                "missing_road": "Here is a road that is missing. Let's add it!",
+                "line_draw_info": "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary.",
+                "start_line": "**Start a new line by clicking at the top end of this missing road.**",
+                "start_line_tap": "**Start a new line by tapping at the top end of this missing road.**",
+                "intersect": "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**",
                 "retry_intersect": "The road needs to intersect {name}. Let's try again!",
-                "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.{br}When you are finished drawing, click on the last node again. **Finish drawing the road.**",
+                "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.",
+                "finish_line_click": "When you're finished, click the last node again or press `{return}`.",
+                "finish_line_tap": "When you're finished, tap the last node again or press `{return}` on a keyboard.",
+                "finish_road": "**Finish drawing the road.**",
                 "choose_category_road": "**Select {category} from the list.**",
                 "choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**",
-                "retry_preset_residential": "You didn't select the {preset} type. **Click here to choose again.**",
+                "retry_preset_residential": "You didn't select the {preset} type. **Press this button to choose again.**",
                 "name_road": "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
                 "did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
                 "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
                 "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",
-                "start_drag_endpoint": "When a line is selected, you can drag any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag. **Drag the endpoint to the place where these roads should intersect.**",
-                "finish_drag_endpoint": "This spot looks good. **Release the {leftclick} left mouse button to finish dragging.**",
+                "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**",
+                "start_drag_endpoint": "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag.",
+                "start_drag_endpoint_touch": "When a line is selected, you can tap-and-drag any of its nodes to adjust them.",
+                "drag_to_intersection": "**Drag the endpoint to the place where these roads should intersect.**",
+                "spot_looks_good": "This spot looks good.",
+                "finish_drag_endpoint": "**Release the mouse button to finish dragging.**",
+                "finish_drag_endpoint_touch": "**Let go of the node to finish dragging.**",
                 "start_drag_midpoint": "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**",
-                "continue_drag_midpoint": "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click {ok}.**",
+                "continue_drag_midpoint": "This line is looking much better! Continue to adjust this line until the curve matches the road shape. **When you're happy with how the line looks, press {ok}.**",
                 "delete_lines": "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
-                "rightclick_intersection": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **{rightclick} Right-click on the intersection node.**",
+                "split_street": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it.",
+                "rightclick_intersection": "**{rightclick} Right-click on the intersection node.**",
+                "edit_menu_intersection_touch": "**Long-press on the intersection node.**",
                 "split_intersection": "**Press the {split_icon} {split} button to divide {street}.**",
                 "retry_split": "You didn't press the {split_icon} {split} button. Try again.",
-                "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**",
-                "did_split_single": "**Click the top part of {street2} to select it.**",
-                "multi_select": "{selected} is now selected. Let's also select {other1}. You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**",
-                "multi_rightclick": "Good! Both lines to delete are now selected. **{rightclick} Right-click on one of the lines to show the edit menu.**",
+                "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**",
+                "did_split_single": "**Select the top part of {street2}.**",
+                "multi_select": "{selected} is now selected. Let's also select {other1}.",
+                "add_to_selection_click": "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**",
+                "add_to_selection_touch": "**Tap-and-hold {selected} and then tap {other2} to select both.**",
+                "multi_select_success": "Good! Both lines to delete are now selected.",
+                "multi_rightclick": "**{rightclick} Right-click on one of the lines to show the edit menu.**",
+                "multi_edit_menu_touch": "**Long-press on one of the lines to show the edit menu.**",
                 "multi_delete": "**Press the {delete_icon} {delete} button to remove the extra lines.**",
                 "retry_delete": "You didn't press the {delete_icon} {delete} button. Try again.",
                 "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js
index 55242ced6a..b149ba7c56 100644
--- a/modules/ui/edit_menu.js
+++ b/modules/ui/edit_menu.js
@@ -1,12 +1,16 @@
 import { event as d3_event, select as d3_select } from 'd3-selection';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
 
 import { geoVecAdd } from '../geo';
 import { localizer } from '../core/localizer';
 import { uiTooltip } from './tooltip';
+import { utilRebind } from '../util/rebind';
 import { svgIcon } from '../svg/icon';
 
 
 export function uiEditMenu(context) {
+    var dispatch = d3_dispatch('toggled');
+
     var _menu = d3_select(null);
     var _operations = [];
     // the position the menu should be displayed relative to
@@ -161,6 +165,8 @@ export function uiEditMenu(context) {
             }
             lastPointerUpType = null;
         }
+
+        dispatch.call('toggled', this, true);
     };
 
     function updatePosition() {
@@ -269,6 +275,8 @@ export function uiEditMenu(context) {
 
         _menu.remove();
         _tooltips = [];
+
+        dispatch.call('toggled', this, false);
     };
 
     editMenu.anchorLoc = function(val) {
@@ -290,5 +298,5 @@ export function uiEditMenu(context) {
         return editMenu;
     };
 
-    return editMenu;
+    return utilRebind(editMenu, dispatch, 'on');
 }
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 2c01c273d2..f2a8980c68 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -595,7 +595,11 @@ export function uiInit(context) {
     };
 
 
-    var _editMenu; // uiEditMenu
+    var _editMenu = uiEditMenu(context);
+
+    ui.editMenu = function() {
+        return _editMenu;
+    };
 
     ui.showEditMenu = function(anchorPoint, triggerType, operations) {
 
@@ -614,9 +618,6 @@ export function uiInit(context) {
             surfaceNode.focus();
         }
 
-        // don't load the menu until it's needed
-        if (!_editMenu) _editMenu = uiEditMenu(context);
-
         operations.forEach(function(operation) {
             if (operation.point) operation.point(anchorPoint);
         });
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 27fa81204d..0812d39313 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -90,15 +90,16 @@ export function uiIntroArea(context, reveal) {
         context.map().zoomEase(19.5, 500);
 
         timeout(function() {
-            var textId = context.lastPointerType() === 'mouse' ? 'start_playground' : 'start_playground_touch';
+            var textId = context.lastPointerType() === 'mouse' ? 'starting_node_click' : 'starting_node_tap';
+            var startDrawString = helpString('intro.areas.start_playground') + helpString('intro.areas.' + textId);
             revealPlayground(playground,
-                helpString('intro.areas.' + textId), { duration: 250 }
+                startDrawString, { duration: 250 }
             );
 
             timeout(function() {
                 context.map().on('move.intro drawn.intro', function() {
                     revealPlayground(playground,
-                        helpString('intro.areas.' + textId), { duration: 0 }
+                        startDrawString, { duration: 0 }
                     );
                 });
                 context.on('enter.intro', function(mode) {
@@ -167,15 +168,16 @@ export function uiIntroArea(context, reveal) {
         }
 
         _areaID = null;
-        var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_touch';
+        var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_tap';
+        var finishString = helpString('intro.areas.' + textId) + helpString('intro.areas.finish_drawing');
         revealPlayground(playground,
-            helpString('intro.areas.' + textId), { duration: 250 }
+            finishString, { duration: 250 }
         );
 
         timeout(function() {
             context.map().on('move.intro drawn.intro', function() {
                 revealPlayground(playground,
-                    helpString('intro.areas.' + textId), { duration: 0 }
+                    finishString, { duration: 0 }
                 );
             });
         }, 250);  // after reveal
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index a7a522cb9e..821118ccc7 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -95,13 +95,18 @@ export function uiIntroLine(context, reveal) {
         var padding = 70 * Math.pow(2, context.map().zoom() - 18);
         var box = pad(tulipRoadStart, padding, context);
         box.height = box.height + 100;
-        reveal(box, helpString('intro.lines.start_line'));
+
+        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);
+        reveal(box, startLineString);
 
         context.map().on('move.intro drawn.intro', function() {
             padding = 70 * Math.pow(2, context.map().zoom() - 18);
             box = pad(tulipRoadStart, padding, context);
             box.height = box.height + 100;
-            reveal(box, helpString('intro.lines.start_line'), { duration: 0 });
+            reveal(box, startLineString, { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -200,7 +205,11 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerEase(tulipRoadIntersection, 500);
 
-        reveal('.surface', helpString('intro.lines.continue_line'));
+        var continueLineText = helpString('intro.lines.continue_line') + '{br}' +
+            helpString('intro.lines.finish_line_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpString('intro.lines.finish_road');
+
+        reveal('.surface', continueLineText);
 
         context.on('enter.intro', function(mode) {
             if (mode.id === 'draw-line')
@@ -400,12 +409,13 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 40 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadAddNode, padding, context);
-        reveal(box, helpString('intro.lines.add_node'));
+        var addNodeString = helpString('intro.lines.add_node' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
+        reveal(box, addNodeString);
 
         context.map().on('move.intro drawn.intro', function() {
             var padding = 40 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadAddNode, padding, context);
-            reveal(box, helpString('intro.lines.add_node'), { duration: 0 });
+            reveal(box, addNodeString, { duration: 0 });
         });
 
         context.history().on('change.intro', function(changed) {
@@ -438,7 +448,9 @@ export function uiIntroLine(context, reveal) {
         }
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        reveal(box, helpString('intro.lines.start_drag_endpoint'));
+        var startDragString = helpString('intro.lines.start_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch')) +
+            helpString('intro.lines.drag_to_intersection');
+        reveal(box, startDragString);
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -446,7 +458,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 100 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragEndpoint, padding, context);
-            reveal(box, helpString('intro.lines.start_drag_endpoint'), { duration: 0 });
+            reveal(box, startDragString, { duration: 0 });
 
             var entity = context.entity(woodRoadEndID);
             if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) <= 4) {
@@ -468,7 +480,9 @@ export function uiIntroLine(context, reveal) {
 
         var padding = 100 * Math.pow(2, context.map().zoom() - 19);
         var box = pad(woodRoadDragEndpoint, padding, context);
-        reveal(box, helpString('intro.lines.finish_drag_endpoint'));
+        var finishDragString = helpString('intro.lines.spot_looks_good') +
+            helpString('intro.lines.finish_drag_endpoint' + (context.lastPointerType() === 'mouse' ? '' : '_touch'));
+        reveal(box, finishDragString);
 
         context.map().on('move.intro drawn.intro', function() {
             if (!context.hasEntity(woodRoadID) || !context.hasEntity(woodRoadEndID)) {
@@ -476,7 +490,7 @@ export function uiIntroLine(context, reveal) {
             }
             var padding = 100 * Math.pow(2, context.map().zoom() - 19);
             var box = pad(woodRoadDragEndpoint, padding, context);
-            reveal(box, helpString('intro.lines.finish_drag_endpoint'), { duration: 0 });
+            reveal(box, finishDragString, { duration: 0 });
 
             var entity = context.entity(woodRoadEndID);
             if (geoSphericalDistance(entity.loc, woodRoadDragEndpoint) > 4) {
@@ -633,18 +647,21 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerZoomEase(eleventhAvenueEnd, 18, 500);
 
+        var rightClickString = helpString('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'));
+
         timeout(function() {
             var padding = 60 * Math.pow(2, context.map().zoom() - 18);
             var box = pad(eleventhAvenueEnd, padding, context);
-            reveal(box, helpString('intro.lines.rightclick_intersection',
-                { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') })
-            );
+            reveal(box, rightClickString);
 
             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.rightclick_intersection',
-                    { street1: t('intro.graph.name.11th-avenue'), street2: t('intro.graph.name.washington-street') }),
+                reveal(box, rightClickString,
                     { duration: 0 }
                 );
             });
@@ -850,7 +867,10 @@ export function uiIntroLine(context, reveal) {
             }
 
             reveal(box,
-                helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other })
+                helpString('intro.lines.multi_select',
+                    { selected: selected, other1: other }) + ' ' +
+                helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
+                    { selected: selected, other2: other })
             );
 
             context.map().on('move.intro drawn.intro', function() {
@@ -869,7 +889,10 @@ export function uiIntroLine(context, reveal) {
                 }
 
                 reveal(box,
-                    helpString('intro.lines.multi_select', { selected: selected, other1: other, other2: other }),
+                    helpString('intro.lines.multi_select',
+                        { selected: selected, other1: other }) + ' ' +
+                    helpString('intro.lines.add_to_selection_' + (context.lastPointerType() === 'mouse' ? 'click' : 'touch'),
+                        { selected: selected, other2: other }),
                     { duration: 0 }
                 );
             });
@@ -909,15 +932,20 @@ 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.multi_rightclick'));
+
+        var rightClickString = helpString('intro.lines.multi_select_success') +
+            helpString('intro.lines.multi_' + (context.lastPointerType() === 'mouse' ? 'rightclick' : 'edit_menu_touch'));
+        reveal(box, rightClickString);
 
         context.map().on('move.intro drawn.intro', function() {
             var padding = 200 * Math.pow(2, context.map().zoom() - 18);
             var box = pad(twelfthAvenue, padding, context);
-            reveal(box, helpString('intro.lines.multi_rightclick'), { duration: 0 });
+            reveal(box, rightClickString, { duration: 0 });
         });
 
-        d3_select(window).on('click.intro contextmenu.intro', function() {
+        context.ui().editMenu().on('toggled.intro', function(open) {
+            if (!open) return;
+
             timeout(function() {
                 var ids = context.selectedIDs();
                 if (ids.length === 2 &&
@@ -933,7 +961,7 @@ export function uiIntroLine(context, reveal) {
                     return continueTo(didSplit);
                 }
             }, 300);  // after edit menu visible
-        }, true);
+        });
 
         context.history().on('change.intro', function() {
             if (!_washingtonSegmentID ||
@@ -947,7 +975,7 @@ export function uiIntroLine(context, reveal) {
 
         function continueTo(nextStep) {
             context.map().on('move.intro drawn.intro', null);
-            d3_select(window).on('click.intro contextmenu.intro', null, true);
+            context.ui().editMenu().on('toggled.intro', null);
             context.history().on('change.intro', null);
             nextStep();
         }
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index e0dbb807bf..87ee5828e2 100644
--- a/modules/ui/intro/navigation.js
+++ b/modules/ui/intro/navigation.js
@@ -59,10 +59,10 @@ export function uiIntroNavigation(context, reveal) {
             var centerStart = context.map().center();
 
             var textId = context.lastPointerType() === 'mouse' ? 'drag' : 'drag_touch';
-
-            reveal('.surface', helpString('intro.navigation.' + textId));
+            var dragString = helpString('intro.navigation.map_info') + '{br}' + helpString('intro.navigation.' + textId);
+            reveal('.surface', dragString);
             context.map().on('drawn.intro', function() {
-                reveal('.surface', helpString('intro.navigation.' + textId), { duration: 0 });
+                reveal('.surface', dragString, { duration: 0 });
             });
 
             context.map().on('move.intro', function() {
@@ -86,15 +86,12 @@ export function uiIntroNavigation(context, reveal) {
         var zoomStart = context.map().zoom();
 
         var textId = context.lastPointerType() === 'mouse' ? 'zoom' : 'zoom_touch';
+        var zoomString = helpString('intro.navigation.' + textId);
 
-        reveal('.surface',
-            helpString('intro.navigation.' + textId)
-        );
+        reveal('.surface', zoomString);
 
         context.map().on('drawn.intro', function() {
-            reveal('.surface',
-                helpString('intro.navigation.' + textId), { duration: 0 }
-            );
+            reveal('.surface', zoomString, { duration: 0 });
         });
 
         context.map().on('move.intro', function() {
@@ -494,13 +491,12 @@ 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',
+        reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
             helpString('intro.navigation.editor_street', {
                 button: icon(href, 'pre-text'),
                 field1: onewayField.label(),
                 field2: maxspeedField.label()
-            })
-        );
+            }));
 
         context.on('exit.intro', function() {
             continueTo(play);
@@ -511,11 +507,11 @@ 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',
+            reveal('.entity-editor-pane', helpString('intro.navigation.street_different_fields') + '{br}' +
                 helpString('intro.navigation.editor_street', {
                     button: icon(href, 'pre-text'),
-                    field1: onewayField.label().toLowerCase(),
-                    field2: maxspeedField.label().toLowerCase()
+                    field1: onewayField.label(),
+                    field2: maxspeedField.label()
                 }), { duration: 0 }
             );
         });
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index e69e9aab08..d0655777d4 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -48,7 +48,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             var tooltip = reveal('button.add-point',
-                helpString('intro.points.add_point'));
+                helpString('intro.points.points_info') + '{br}' + helpString('intro.points.add_point'));
 
             _pointID = null;
 
@@ -203,13 +203,15 @@ 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');
+
         timeout(function() {
             // It's possible for the user to add a name in a previous step..
             // If so, don't tell them to add the name in this step.
             // Give them an OK button instead.
             var entity = context.entity(_pointID);
             if (entity.tags.name) {
-                var tooltip = reveal('.entity-editor-pane', helpString('intro.points.add_name'), {
+                var tooltip = reveal('.entity-editor-pane', addNameString, {
                     tooltipClass: 'intro-points-describe',
                     buttonText: t('intro.ok'),
                     buttonCallback: function() { continueTo(addCloseEditor); }
@@ -217,7 +219,7 @@ export function uiIntroPoint(context, reveal) {
                 tooltip.select('.instruction').style('display', 'none');
 
             } else {
-                reveal('.entity-editor-pane', helpString('intro.points.add_name'),
+                reveal('.entity-editor-pane', addNameString,
                     { tooltipClass: 'intro-points-describe' }
                 );
             }

From e93e0fdbf99de399600c47786be2394465803ba9 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincylvania@icloud.com>
Date: Fri, 10 Jul 2020 16:02:30 -0400
Subject: [PATCH 14/30] Update buildings walkthrough chapter for touchscreens

---
 data/core.yaml               | 26 ++++++++++++++++---------
 dist/locales/en.json         | 26 ++++++++++++++++---------
 modules/ui/intro/area.js     |  5 +++--
 modules/ui/intro/building.js | 37 +++++++++++++++++++++++++-----------
 4 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index ae2d7432b0..7e7e7b0d4f 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1979,9 +1979,9 @@ en:
       starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**"
       starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**"
       continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
-      finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node."
-      finish_playground_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard."
-      finish_drawing: "**Finish drawing an area for the playground.**"
+      finish_area_click: "Finish the area by pressing `{return}`, or clicking again on either the first or last node."
+      finish_area_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard."
+      finish_playground: "**Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
       add_field: "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**"
@@ -2038,24 +2038,32 @@ en:
     buildings:
       title: "Buildings"
       add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**"
-      start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**"
-      continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**"
+      start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible."
+      building_corner_click: "**Click or press `{space}` to place a starting node on one of the corners of the building.**"
+      building_corner_tap: "**Tap one of the corners of the building to place a starting node.**"
+      continue_building: "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details."
+      finish_building: "**Finish tracing the building.**"
       retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
       choose_category_building: "**Choose {category} from the list.**"
       choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**"
       close: "**Press `{esc}` or the {apply} button to close the feature editor.**"
       rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**"
-      square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**"
+      edit_menu_building_touch: "**Long-press the building you created to show the edit menu.**"
+      square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**"
       retry_square: "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again."
       done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
       add_tank: "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**"
-      start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**"
-      continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**"
+      start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge."
+      tank_edge_click: "**Click or press `{space}` to place a starting node on the edge of the tank.**"
+      tank_edge_tap: "**Tap the edge of the tank to place a starting node.**"
+      continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw."
+      finish_tank: "**Finish tracing the tank.**"
       search_tank: "**Search for '{preset}'.**"
       choose_tank: "**Choose {preset} from the list.**"
       rightclick_tank: "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**"
+      edit_menu_tank_touch: "**Long-press the storage tank you created to show the edit menu.**"
       circle_tank: "**Press the {circularize_icon} {circularize} button to make the tank a circle.**"
-      retry_circle: "You didn't click the {circularize_icon} {circularize} button. Try again."
+      retry_circle: "You didn't press the {circularize_icon} {circularize} button. Try again."
       play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
     startediting:
       title: "Start Editing"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index a0ad89adf8..0643c29ed2 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2456,9 +2456,9 @@
                 "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**",
                 "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**",
                 "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
-                "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.",
-                "finish_playground_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.",
-                "finish_drawing": "**Finish drawing an area for the playground.**",
+                "finish_area_click": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.",
+                "finish_area_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.",
+                "finish_playground": "**Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
                 "add_field": "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**",
@@ -2517,24 +2517,32 @@
             "buildings": {
                 "title": "Buildings",
                 "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**",
-                "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**",
-                "continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**",
+                "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible.",
+                "building_corner_click": "**Click or press `{space}` to place a starting node on one of the corners of the building.**",
+                "building_corner_tap": "**Tap one of the corners of the building to place a starting node.**",
+                "continue_building": "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.",
+                "finish_building": "**Finish tracing the building.**",
                 "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!",
                 "choose_category_building": "**Choose {category} from the list.**",
                 "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**",
                 "close": "**Press `{esc}` or the {apply} button to close the feature editor.**",
                 "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**",
-                "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**",
+                "edit_menu_building_touch": "**Long-press the building you created to show the edit menu.**",
+                "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**",
                 "retry_square": "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again.",
                 "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
                 "add_tank": "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**",
-                "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**",
-                "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**",
+                "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge.",
+                "tank_edge_click": "**Click or press `{space}` to place a starting node on the edge of the tank.**",
+                "tank_edge_tap": "**Tap the edge of the tank to place a starting node.**",
+                "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.",
+                "finish_tank": "**Finish tracing the tank.**",
                 "search_tank": "**Search for '{preset}'.**",
                 "choose_tank": "**Choose {preset} from the list.**",
                 "rightclick_tank": "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**",
+                "edit_menu_tank_touch": "**Long-press the storage tank you created to show the edit menu.**",
                 "circle_tank": "**Press the {circularize_icon} {circularize} button to make the tank a circle.**",
-                "retry_circle": "You didn't click the {circularize_icon} {circularize} button. Try again.",
+                "retry_circle": "You didn't press the {circularize_icon} {circularize} button. Try again.",
                 "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "startediting": {
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 0812d39313..8aa81ac675 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -168,8 +168,9 @@ export function uiIntroArea(context, reveal) {
         }
 
         _areaID = null;
-        var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_tap';
-        var finishString = helpString('intro.areas.' + textId) + helpString('intro.areas.finish_drawing');
+
+        var finishString = helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpString('intro.areas.finish_playground');
         revealPlayground(playground,
             finishString, { duration: 250 }
         );
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index 551e60efcf..c8cf143930 100644
--- a/modules/ui/intro/building.js
+++ b/modules/ui/intro/building.js
@@ -95,10 +95,12 @@ export function uiIntroBuilding(context, reveal) {
         context.map().zoomEase(20, 500);
 
         timeout(function() {
-            revealHouse(house, helpString('intro.buildings.start_building'));
+            var startString = helpString('intro.buildings.start_building') +
+                helpString('intro.buildings.building_corner_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
+            revealHouse(house, startString);
 
             context.map().on('move.intro drawn.intro', function() {
-                revealHouse(house, helpString('intro.buildings.start_building'), { duration: 0 });
+                revealHouse(house, startString, { duration: 0 });
             });
 
             context.on('enter.intro', function(mode) {
@@ -123,10 +125,14 @@ export function uiIntroBuilding(context, reveal) {
 
         _houseID = null;
 
-        revealHouse(house, helpString('intro.buildings.continue_building'));
+        var continueString = helpString('intro.buildings.continue_building') + '{br}' +
+            helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpString('intro.buildings.finish_building');
+
+        revealHouse(house, continueString);
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, helpString('intro.buildings.continue_building'), { duration: 0 });
+            revealHouse(house, continueString, { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -329,7 +335,8 @@ export function uiIntroBuilding(context, reveal) {
         });
 
         context.map().on('move.intro drawn.intro', function() {
-            revealHouse(house, helpString('intro.buildings.rightclick_building'), { duration: 0 });
+            var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_building' : 'edit_menu_building_touch'));
+            revealHouse(house, rightclickString, { duration: 0 });
         });
 
         context.history().on('change.intro', function() {
@@ -464,10 +471,12 @@ export function uiIntroBuilding(context, reveal) {
         _tankID = null;
 
         timeout(function() {
-            revealTank(tank, helpString('intro.buildings.start_tank'));
+            var startString = helpString('intro.buildings.start_tank') +
+                helpString('intro.buildings.tank_edge_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap'));
+            revealTank(tank, startString);
 
             context.map().on('move.intro drawn.intro', function() {
-                revealTank(tank, helpString('intro.buildings.start_tank'), { duration: 0 });
+                revealTank(tank, startString, { duration: 0 });
             });
 
             context.on('enter.intro', function(mode) {
@@ -492,10 +501,14 @@ export function uiIntroBuilding(context, reveal) {
 
         _tankID = null;
 
-        revealTank(tank, helpString('intro.buildings.continue_tank'));
+        var continueString = helpString('intro.buildings.continue_tank') + '{br}' +
+            helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) +
+            helpString('intro.buildings.finish_tank');
+
+        revealTank(tank, continueString);
 
         context.map().on('move.intro drawn.intro', function() {
-            revealTank(tank, helpString('intro.buildings.continue_tank'), { duration: 0 });
+            revealTank(tank, continueString, { duration: 0 });
         });
 
         context.on('enter.intro', function(mode) {
@@ -646,10 +659,12 @@ export function uiIntroBuilding(context, reveal) {
                 }, 50);  // after menu visible
             });
 
-            revealTank(tank, helpString('intro.buildings.rightclick_tank'));
+            var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_tank' : 'edit_menu_tank_touch'));
+
+            revealTank(tank, rightclickString);
 
             context.map().on('move.intro drawn.intro', function() {
-                revealTank(tank, helpString('intro.buildings.rightclick_tank'), { duration: 0 });
+                revealTank(tank, rightclickString, { duration: 0 });
             });
 
             context.history().on('change.intro', function() {

From 0d4946fe47814ddf3999ef059179655d4f468aaf Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincylvania@icloud.com>
Date: Fri, 10 Jul 2020 16:46:00 -0400
Subject: [PATCH 15/30] Update more help pane strings for touchscreens

---
 data/core.yaml             | 60 +++++++++++++++++++-------------------
 dist/locales/en.json       | 60 +++++++++++++++++++-------------------
 modules/ui/intro/helper.js |  1 +
 3 files changed, 61 insertions(+), 60 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 7e7e7b0d4f..a6efda84f3 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1298,15 +1298,15 @@ en:
       open_data_h: "Open Data"
       open_data: "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright)."
       before_start_h: "Before you start"
-      before_start: "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"{start_the_walkthrough}\" on this screen to take the tutorial - it takes only about 15 minutes."
+      before_start: "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to start the tutorial—it takes only about 15 minutes."
       open_source_h: "Open Source"
       open_source: "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD)."
       open_source_help: "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)."
     overview:
       title: Overview
       navigation_h: "Navigation"
-      navigation_drag: "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on your keyboard."
-      navigation_zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by clicking the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on your keyboard."
+      navigation_drag: "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard."
+      navigation_zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on a keyboard."
       features_h: "Map Features"
       features: "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*."
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -1319,14 +1319,14 @@ en:
       multiselect_shift_click: "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items."
       multiselect_lasso: "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected."
       undo_redo_h: "Undo & Redo"
-      undo_redo: "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo_icon} **{undo}** button, and redo them by clicking the {redo_icon} **{redo}** button."
+      undo_redo: "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by pressing the {undo_icon} **{undo}** button, and redo them by pressing the {redo_icon} **{redo}** button."
       save_h: "Save"
-      save: "Click {save_icon} **{save}** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!"
+      save: "Press the {save_icon} **{save}** button to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!"
       save_validation: "On the save screen, you'll have a chance to review what you've done. iD will also perform some basic checks for missing data and may offer helpful suggestions and warnings if something doesn't seem right."
       upload_h: "Upload"
-      upload: "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone."
+      upload: "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then press **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone."
       backups_h: "Automatic Backups"
-      backups: "If you can't finish your edits in one sitting, for example if your computer crashes or you close the browser tab, your edits are still saved in your browser's storage. You can come back later (on the same browser and computer), and iD will offer to restore your work."
+      backups: "If you happen to close the browser before saving, your edits are still stored locally. You can come back later using the same browser and device, and iD will offer to restore your work."
       keyboard_h: "Keyboard Shortcuts"
       keyboard: "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
     feature_editor:
@@ -1334,12 +1334,12 @@ en:
       intro: "The *feature editor* appears alongside the map, and allows you to see and edit all of the information for the selected feature."
       definitions: "The top section displays the feature's type. The middle section contains *fields* showing the feature's attributes, such as its name or address."
       type_h: "Feature Type"
-      type: "You can click on the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from."
-      type_picker: "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also click the {inspect} **Info** icon next to the feature type to learn more about it."
+      type: "You can press the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from."
+      type_picker: "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also press the {inspect} **Info** icon next to the feature type to learn more about it."
       fields_h: "Fields"
       fields_all_fields: "The \"{fields}\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure."
       fields_example: "Each feature type will display different fields. For example, a road may display fields for its surface and speed limit, but a restaurant may display fields for the type of food it serves and the hours it is open."
-      fields_add_field: "You can also click the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more."
+      fields_add_field: "You can also use the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more."
       tags_h: "Tags"
       tags_all_tags: "Below the fields section, you can expand the \"{tags}\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap."
       tags_resources: "Editing a feature's tags requires intermediate knowledge about OpenStreetMap. You should consult resources like the [OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Main_Page) or [Taginfo](https://taginfo.openstreetmap.org/) to learn more about accepted OpenStreetMap tagging practices."
@@ -1347,7 +1347,7 @@ en:
       title: Points
       intro: "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there."
       add_point_h: "Adding Points"
-      add_point: "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
+      add_point: "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
       add_point_finish: "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`."
       move_point_h: "Moving Points"
       move_point: "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location."
@@ -1358,7 +1358,7 @@ en:
       title: Lines
       intro: "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent."
       add_line_h: "Adding Lines"
-      add_line: "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
+      add_line: "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
       add_line_draw: "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_line_finish: "To finish a line, press `{return}` or click again on the last node."
       modify_line_h: "Modifying Lines"
@@ -1383,7 +1383,7 @@ en:
       point_or_area_h: "Points or Areas?"
       point_or_area: "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building."
       add_area_h: "Adding Areas"
-      add_area_command: "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
+      add_area_command: "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
       add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_area_finish: "To finish an area, press `{return}` or click again on either the first or last node."
       square_area_h: "Square Corners"
@@ -1398,9 +1398,9 @@ en:
       title: Relations
       intro: "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation."
       edit_relation_h: "Editing Relations"
-      edit_relation: "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it."
-      edit_relation_add: "To add a feature to a relation, select the feature, then click the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option."
-      edit_relation_delete: "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically."
+      edit_relation: "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then select a relation to edit it."
+      edit_relation_add: "To add a feature to a relation, select the feature, then press the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option."
+      edit_relation_delete: "You can also press the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically."
       maintain_relation_h: "Maintaining Relations"
       maintain_relation: "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original."
       relation_types_h: "Relation Types"
@@ -1411,54 +1411,54 @@ en:
       turn_restriction_h: "Turn restrictions"
       turn_restriction: "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road."
       turn_restriction_field: "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"{turn_restrictions}\" field containing a model of the intersection."
-      turn_restriction_editing: "In the \"{turn_restrictions}\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices."
+      turn_restriction_editing: "In the \"{turn_restrictions}\" field, select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can press the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices."
       route_h: "Routes"
       route: "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route."
-      route_add: "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+      route_add: "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then press the {plus} add button to add this feature to a nearby existing relation or a new relation."
       boundary_h: "Boundaries"
       boundary: "A *boundary* relation is a group of one or more line features that together form an administrative boundary."
-      boundary_add: "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+      boundary_add: "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then press the {plus} add button to add this feature to a nearby existing relation or a new relation."
     notes:
       title: Notes
-      intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer."
+      intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, open the {data_icon} **{map_data}** panel and enable the {osm_notes} layer."
       add_note_h: "Adding Notes"
-      add_note: "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
+      add_note: "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
       move_note: "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
       save_note_h: "Saving Notes"
-      save_note: "You must save any note edits individually by clicking the buttons below the note comments. Note edits are **not** included in changesets that you upload to OpenStreetMap."
+      save_note: "You must save any note edits individually by pressing the buttons below the note comments. Note edits are **not** included in changesets that you upload to OpenStreetMap."
     imagery:
       title: Background Imagery
       intro: "The background imagery that appears beneath the map data is an important resource for mapping. This imagery can be aerial photos collected from satellites, airplanes, and drones, or it can be scanned historical maps or other freely available source data."
       sources_h: "Imagery Sources"
-      choosing: "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map."
+      choosing: "To see which imagery sources are available for editing, open the {layers_icon} **{background_settings}** panel on the side of the map."
       sources: "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference."
       offsets_h: "Adjusting Imagery Offset"
       offset: "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"{imagery_offset}\" section at the bottom of the Background Settings pane."
-      offset_change: "Click on the small triangles to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
+      offset_change: "Press the small triangle buttons to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
     streetlevel:
       title: Street Level Photos
       intro: "Street level photos are useful for mapping traffic signs, businesses, and other details that you can't see from satellite and aerial images. The iD editor supports street level photos from [Bing Streetside](https://www.microsoft.com/en-us/maps/streetside), [Mapillary](https://www.mapillary.com), and [OpenStreetCam](https://www.openstreetcam.org)."
       using_h: "Using Street Level Photos"
-      using: "To use street level photos for mapping, click the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers."
+      using: "To use street level photos for mapping, open the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers."
       photos: "When enabled, the photo layer displays a line along the sequence of photos. At higher zoom levels, a circle marks at each photo location, and at even higher zoom levels, a cone indicates the direction the camera was facing when the photo was taken."
-      viewer: "When you click on one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
+      viewer: "When you select one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
     gps:
       title: GPS Traces
-      intro: "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local computer. You can collect GPS traces with a smartphone, sports watch, or other GPS device."
+      intro: "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local device. You can collect GPS traces with a smartphone, sports watch, or other GPS device."
       survey: "For information on how to perform a GPS survey, read [Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/)."
       using_h: "Using GPS Traces"
-      using: "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data."
+      using: "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Open the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data."
       tracing: "The GPS track isn't sent to OpenStreetMap - the best way to use it is to draw on the map, using it as a guide for the new features that you add."
       upload: "You can also [upload your GPS data to OpenStreetMap](https://www.openstreetmap.org/trace/create) for other users to use."
     qa:
       title: Quality Assurance
-      intro: "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data_icon} **{map_data}** panel to enable a specific Q/A layer."
+      intro: "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, open the {data_icon} **{map_data}** panel and enable a specific Q/A layer."
       tools_h: "Tools"
       tools: "The following tools are currently supported: [KeepRight](https://www.keepright.at/), [ImproveOSM](https://improveosm.org/en/) and [Osmose](https://osmose.openstreetmap.fr/)."
       issues_h: "Handling Issues"
-      issues: "Handling Q/A issues is similar to handling notes. Click on a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
+      issues: "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
     field:
       restrictions:
         title: Turn Restrictions Help
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 0643c29ed2..8edcb00f7f 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1632,7 +1632,7 @@
                 "open_data_h": "Open Data",
                 "open_data": "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright).",
                 "before_start_h": "Before you start",
-                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Click \"{start_the_walkthrough}\" on this screen to take the tutorial - it takes only about 15 minutes.",
+                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to take the tutorial—it takes only about 15 minutes.",
                 "open_source_h": "Open Source",
                 "open_source": "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD).",
                 "open_source_help": "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)."
@@ -1640,8 +1640,8 @@
             "overview": {
                 "title": "Overview",
                 "navigation_h": "Navigation",
-                "navigation_drag": "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on your keyboard.",
-                "navigation_zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by clicking the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on your keyboard.",
+                "navigation_drag": "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard.",
+                "navigation_zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on a keyboard.",
                 "features_h": "Map Features",
                 "features": "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*.",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -1655,14 +1655,14 @@
                 "multiselect_shift_click": "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items.",
                 "multiselect_lasso": "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected.",
                 "undo_redo_h": "Undo & Redo",
-                "undo_redo": "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by clicking the {undo_icon} **{undo}** button, and redo them by clicking the {redo_icon} **{redo}** button.",
+                "undo_redo": "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by pressing the {undo_icon} **{undo}** button, and redo them by pressing the {redo_icon} **{redo}** button.",
                 "save_h": "Save",
-                "save": "Click {save_icon} **{save}** to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!",
+                "save": "Press the {save_icon} **{save}** button to finish your edits and send them to OpenStreetMap. You should remember to save your work frequently!",
                 "save_validation": "On the save screen, you'll have a chance to review what you've done. iD will also perform some basic checks for missing data and may offer helpful suggestions and warnings if something doesn't seem right.",
                 "upload_h": "Upload",
-                "upload": "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then click **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone.",
+                "upload": "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then press **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone.",
                 "backups_h": "Automatic Backups",
-                "backups": "If you can't finish your edits in one sitting, for example if your computer crashes or you close the browser tab, your edits are still saved in your browser's storage. You can come back later (on the same browser and computer), and iD will offer to restore your work.",
+                "backups": "If you happen to close the browser before saving, your edits are still stored locally. You can come back later using the same browser and device, and iD will offer to restore your work.",
                 "keyboard_h": "Keyboard Shortcuts",
                 "keyboard": "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
             },
@@ -1671,12 +1671,12 @@
                 "intro": "The *feature editor* appears alongside the map, and allows you to see and edit all of the information for the selected feature.",
                 "definitions": "The top section displays the feature's type. The middle section contains *fields* showing the feature's attributes, such as its name or address.",
                 "type_h": "Feature Type",
-                "type": "You can click on the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from.",
-                "type_picker": "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also click the {inspect} **Info** icon next to the feature type to learn more about it.",
+                "type": "You can press the feature type to change the feature to a different type. Everything that exists in the real world can be added to OpenStreetMap, so there are thousands of feature types to choose from.",
+                "type_picker": "The type picker displays the most common feature types, such as parks, hospitals, restaurants, roads, and buildings. You can search for anything by typing what you're looking for in the search box. You can also press the {inspect} **Info** icon next to the feature type to learn more about it.",
                 "fields_h": "Fields",
                 "fields_all_fields": "The \"{fields}\" section contains all of the feature's details that you may edit. In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.",
                 "fields_example": "Each feature type will display different fields. For example, a road may display fields for its surface and speed limit, but a restaurant may display fields for the type of food it serves and the hours it is open.",
-                "fields_add_field": "You can also click the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more.",
+                "fields_add_field": "You can also use the \"Add field\" dropdown to add more fields, such as a description, Wikipedia link, wheelchair access, and more.",
                 "tags_h": "Tags",
                 "tags_all_tags": "Below the fields section, you can expand the \"{tags}\" section to edit any of the OpenStreetMap *tags* for the selected feature. Each tag consists of a *key* and *value*, data elements that define all of the features stored in OpenStreetMap.",
                 "tags_resources": "Editing a feature's tags requires intermediate knowledge about OpenStreetMap. You should consult resources like the [OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Main_Page) or [Taginfo](https://taginfo.openstreetmap.org/) to learn more about accepted OpenStreetMap tagging practices."
@@ -1685,7 +1685,7 @@
                 "title": "Points",
                 "intro": "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there.",
                 "add_point_h": "Adding Points",
-                "add_point": "To add a point, click the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
+                "add_point": "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
                 "add_point_finish": "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`.",
                 "move_point_h": "Moving Points",
                 "move_point": "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location.",
@@ -1697,7 +1697,7 @@
                 "title": "Lines",
                 "intro": "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent.",
                 "add_line_h": "Adding Lines",
-                "add_line": "To add a line, click the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
+                "add_line": "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
                 "add_line_draw": "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_line_finish": "To finish a line, press `{return}` or click again on the last node.",
                 "modify_line_h": "Modifying Lines",
@@ -1723,7 +1723,7 @@
                 "point_or_area_h": "Points or Areas?",
                 "point_or_area": "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building.",
                 "add_area_h": "Adding Areas",
-                "add_area_command": "To add an area, click the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
+                "add_area_command": "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
                 "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_area_finish": "To finish an area, press `{return}` or click again on either the first or last node.",
                 "square_area_h": "Square Corners",
@@ -1739,9 +1739,9 @@
                 "title": "Relations",
                 "intro": "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation.",
                 "edit_relation_h": "Editing Relations",
-                "edit_relation": "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then click on the relation to select and edit it.",
-                "edit_relation_add": "To add a feature to a relation, select the feature, then click the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option.",
-                "edit_relation_delete": "You can also click the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically.",
+                "edit_relation": "At the bottom of the feature editor, you can expand the \"{relations}\" section to see if the selected feature is a member of any relations. You can then select a relation to edit it.",
+                "edit_relation_add": "To add a feature to a relation, select the feature, then press the {plus} add button in the \"{relations}\" section of the feature editor. You can choose from a list of nearby relations, or choose the \"{new_relation}\" option.",
+                "edit_relation_delete": "You can also press the {delete_icon} **{delete}** button to remove the selected feature from the relation. If you remove all of the members from a relation, the relation will be deleted automatically.",
                 "maintain_relation_h": "Maintaining Relations",
                 "maintain_relation": "For the most part, iD will maintain relations automatically as you edit. You should take care when replacing features that might be members of relations. For example if you delete a section of road and draw a new section of road to replace it, you should add the new section to the same relations (routes, turn restrictions, etc.) as the original.",
                 "relation_types_h": "Relation Types",
@@ -1752,59 +1752,59 @@
                 "turn_restriction_h": "Turn restrictions",
                 "turn_restriction": "A *turn restriction* relation is a group of several road segments in an intersection. Turn restrictions consist of a *from* road, *via* node or roads, and a *to* road.",
                 "turn_restriction_field": "To edit turn restrictions, select a junction node where two or more roads meet. The feature editor will display a special \"{turn_restrictions}\" field containing a model of the intersection.",
-                "turn_restriction_editing": "In the \"{turn_restrictions}\" field, click to select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can click on the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices.",
+                "turn_restriction_editing": "In the \"{turn_restrictions}\" field, select a \"from\" road, and see whether turns are allowed or restricted to any of the \"to\" roads. You can press the turn icons to toggle them between allowed and restricted. iD will create relations automatically and set the from, via, and to roles based on your choices.",
                 "route_h": "Routes",
                 "route": "A *route* relation is a group of one or more line features that together form a route network, like a bus route, train route, or highway route.",
-                "route_add": "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation.",
+                "route_add": "To add a feature to a route relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then press the {plus} add button to add this feature to a nearby existing relation or a new relation.",
                 "boundary_h": "Boundaries",
                 "boundary": "A *boundary* relation is a group of one or more line features that together form an administrative boundary.",
-                "boundary_add": "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then click the {plus} add button to add this feature to a nearby existing relation or a new relation."
+                "boundary_add": "To add a feature to a boundary relation, select the feature and scroll down to the \"{relations}\" section of the feature editor, then press the {plus} add button to add this feature to a nearby existing relation or a new relation."
             },
             "notes": {
                 "title": "Notes",
-                "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, click the {data_icon} **{map_data}** panel to enable the OpenStreetMap notes layer.",
+                "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, open the {data_icon} **{map_data}** panel and enable the {osm_notes} layer.",
                 "add_note_h": "Adding Notes",
-                "add_note": "To add a new note, click the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
+                "add_note": "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
                 "move_note": "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
                 "save_note_h": "Saving Notes",
-                "save_note": "You must save any note edits individually by clicking the buttons below the note comments. Note edits are **not** included in changesets that you upload to OpenStreetMap."
+                "save_note": "You must save any note edits individually by pressing the buttons below the note comments. Note edits are **not** included in changesets that you upload to OpenStreetMap."
             },
             "imagery": {
                 "title": "Background Imagery",
                 "intro": "The background imagery that appears beneath the map data is an important resource for mapping. This imagery can be aerial photos collected from satellites, airplanes, and drones, or it can be scanned historical maps or other freely available source data.",
                 "sources_h": "Imagery Sources",
-                "choosing": "To see which imagery sources are available for editing, click the {layers_icon} **{background_settings}** button on the side of the map.",
+                "choosing": "To see which imagery sources are available for editing, open the {layers_icon} **{background_settings}** panel on the side of the map.",
                 "sources": "By default, a [Bing Maps](https://www.bing.com/maps/) satellite layer is chosen as the background image. Depending on where you are editing, other imagery sources will be available. Some may be newer or have higher resolution, so it is always useful to check and see which layer is the best one to use as a mapping reference.",
                 "offsets_h": "Adjusting Imagery Offset",
                 "offset": "Imagery is sometimes offset slightly from accurate map data. If you see a lot of roads or buildings shifted from the background imagery, it may be the imagery that's incorrect, so don't move them all to match the background. Instead, you can adjust the background so that it matches the existing data by expanding the \"{imagery_offset}\" section at the bottom of the Background Settings pane.",
-                "offset_change": "Click on the small triangles to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
+                "offset_change": "Press the small triangle buttons to adjust the imagery offset in small steps, or hold the {leftclick} left mouse button and drag within the gray square to slide the imagery into alignment."
             },
             "streetlevel": {
                 "title": "Street Level Photos",
                 "intro": "Street level photos are useful for mapping traffic signs, businesses, and other details that you can't see from satellite and aerial images. The iD editor supports street level photos from [Bing Streetside](https://www.microsoft.com/en-us/maps/streetside), [Mapillary](https://www.mapillary.com), and [OpenStreetCam](https://www.openstreetcam.org).",
                 "using_h": "Using Street Level Photos",
-                "using": "To use street level photos for mapping, click the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers.",
+                "using": "To use street level photos for mapping, open the {data_icon} **{map_data}** panel on the side of the map to enable or disable the available photo layers.",
                 "photos": "When enabled, the photo layer displays a line along the sequence of photos. At higher zoom levels, a circle marks at each photo location, and at even higher zoom levels, a cone indicates the direction the camera was facing when the photo was taken.",
-                "viewer": "When you click on one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
+                "viewer": "When you select one of the photo locations, a photo viewer appears in the bottom corner of the map. The photo viewer contains controls to step forward and backward in the image sequence. It also shows the username of the person who captured the image, the date it was captured, and a link to view the image on the original site."
             },
             "gps": {
                 "title": "GPS Traces",
-                "intro": "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local computer. You can collect GPS traces with a smartphone, sports watch, or other GPS device.",
+                "intro": "Collected GPS traces are a valuable source of data for OpenStreetMap. This editor supports *.gpx*, *.geojson*, and *.kml* files on your local device. You can collect GPS traces with a smartphone, sports watch, or other GPS device.",
                 "survey": "For information on how to perform a GPS survey, read [Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/).",
                 "using_h": "Using GPS Traces",
-                "using": "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Click the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data.",
+                "using": "To use a GPS trace for mapping, drag and drop the data file onto the map editor. If it's recognized, it will be drawn on the map as a bright purple line. Open the {data_icon} **{map_data}** panel on the side of the map to enable, disable, or zoom to your GPS data.",
                 "tracing": "The GPS track isn't sent to OpenStreetMap - the best way to use it is to draw on the map, using it as a guide for the new features that you add.",
                 "upload": "You can also [upload your GPS data to OpenStreetMap](https://www.openstreetmap.org/trace/create) for other users to use."
             },
             "qa": {
                 "title": "Quality Assurance",
-                "intro": "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, click the {data_icon} **{map_data}** panel to enable a specific Q/A layer.",
+                "intro": "*Quality Assurance* (Q/A) tools can find improper tags, disconnected roads, and other issues with OpenStreetMap, which mappers can then fix. To view existing Q/A issues, open the {data_icon} **{map_data}** panel and enable a specific Q/A layer.",
                 "tools_h": "Tools",
                 "tools": "The following tools are currently supported: [KeepRight](https://www.keepright.at/), [ImproveOSM](https://improveosm.org/en/) and [Osmose](https://osmose.openstreetmap.fr/).",
                 "issues_h": "Handling Issues",
-                "issues": "Handling Q/A issues is similar to handling notes. Click on a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
+                "issues": "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue."
             },
             "field": {
                 "restrictions": {
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index cdae6582db..f69b7bfa82 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -103,6 +103,7 @@ export function helpString(id, replacements) {
         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'),

From d54e738eeb9d20486bc4709bc7376889189b3771 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincylvania@icloud.com>
Date: Fri, 10 Jul 2020 17:00:13 -0400
Subject: [PATCH 16/30] Fix disabled operation icon styling

---
 css/80_app.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/80_app.css b/css/80_app.css
index 41d658d5c1..f17ceeefb4 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -411,6 +411,7 @@ button[disabled].action {
     fill: #222;
     color: #79f;
 }
+button.disabled .icon.operation use,
 .icon.operation.disabled use {
     fill: rgba(32,32,32,.2);
     color: rgba(40,40,40,.2);

From 3229390178f7480a9dd5be91753672871d907383 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Sat, 11 Jul 2020 19:00:17 -0400
Subject: [PATCH 17/30] Clean up the mouse icons' size and clarity

---
 css/80_app.css                                     | 9 ---------
 modules/ui/intro/helper.js                         | 4 ++--
 modules/ui/shortcuts.js                            | 2 +-
 svg/iD-sprite/graphics/walkthrough-mouse-left.svg  | 5 +++++
 svg/iD-sprite/graphics/walkthrough-mouse-right.svg | 5 +++++
 svg/iD-sprite/graphics/walkthrough-mouse.svg       | 7 -------
 6 files changed, 13 insertions(+), 19 deletions(-)
 create mode 100644 svg/iD-sprite/graphics/walkthrough-mouse-left.svg
 create mode 100644 svg/iD-sprite/graphics/walkthrough-mouse-right.svg
 delete mode 100644 svg/iD-sprite/graphics/walkthrough-mouse.svg

diff --git a/css/80_app.css b/css/80_app.css
index f17ceeefb4..47d65cf628 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -4932,15 +4932,6 @@ img.tile-debug {
     color: #555;
 }
 
-svg.mouseclick use.left {
-    fill: rgba(112, 146, 255, 1);
-    color: rgba(112, 146, 255, 0);
-}
-svg.mouseclick use.right {
-    fill: rgba(112, 146, 255, 0);
-    color: rgba(112, 146, 255, 1);
-}
-
 .modal-shortcuts .shortcut-keys .gesture {
     color: #333;
     padding: 3px;
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index f69b7bfa82..7e712e8c91 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -73,8 +73,8 @@ export function helpString(id, replacements) {
         undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
         redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
         save_icon: icon('#iD-icon-save', 'pre-text'),
-        leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
-        rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
+        leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
+        rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 5ffbb7cbf2..60ed04496b 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -198,7 +198,7 @@ export function uiShortcuts(context) {
 
                 if (click && click[1]) {   // replace "left_click", "right_click" with mouse icon
                     selection
-                        .call(svgIcon('#iD-walkthrough-mouse', 'mouseclick', click[1]));
+                        .call(svgIcon('#iD-walkthrough-mouse-' + click[1], 'operation'));
                 } else {
                     selection
                         .append('kbd')
diff --git a/svg/iD-sprite/graphics/walkthrough-mouse-left.svg b/svg/iD-sprite/graphics/walkthrough-mouse-left.svg
new file mode 100644
index 0000000000..742c30ad78
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-mouse-left.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M10,1 L10,9 L5,9 L5,6 C5,3.23857625 7.23857625,1 10,1 Z" fill="currentColor"/>
+    <path d="M9.45,1.130523 C7.0027024,1.40387724 5.1,3.47973864 5.1,6 L5.1,8 L9.45,8 L9.45,1.130523 L9.45,1.130523 Z M10.55,1.130523 L10.55,8 L14.9,8 L14.9,6 C14.9,3.47973864 12.9972976,1.40387724 10.55,1.130523 L10.55,1.130523 Z M5.1,9 L5.1,14 C5.1,16.7061953 7.29380473,18.9 10,18.9 C12.7061953,18.9 14.9,16.7061953 14.9,14 L14.9,9 L5.1,9 Z M10,0 C13.3137085,-6.08718376e-16 16,2.6862915 16,6 L16,14 C16,17.3137085 13.3137085,20 10,20 C6.6862915,20 4,17.3137085 4,14 L4,6 C4,2.6862915 6.6862915,6.08718376e-16 10,0 Z" fill="inherit"/>
+</svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-mouse-right.svg b/svg/iD-sprite/graphics/walkthrough-mouse-right.svg
new file mode 100644
index 0000000000..1a48bfee9f
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-mouse-right.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M10,1 C12.7614237,1 15,3.23857625 15,6 L15,9 L10,9 L10,1 Z" fill="currentColor"/>
+    <path d="M9.45,1.130523 C7.0027024,1.40387724 5.1,3.47973864 5.1,6 L5.1,8 L9.45,8 L9.45,1.130523 L9.45,1.130523 Z M10.55,1.130523 L10.55,8 L14.9,8 L14.9,6 C14.9,3.47973864 12.9972976,1.40387724 10.55,1.130523 L10.55,1.130523 Z M5.1,9 L5.1,14 C5.1,16.7061953 7.29380473,18.9 10,18.9 C12.7061953,18.9 14.9,16.7061953 14.9,14 L14.9,9 L5.1,9 Z M10,0 C13.3137085,-6.08718376e-16 16,2.6862915 16,6 L16,14 C16,17.3137085 13.3137085,20 10,20 C6.6862915,20 4,17.3137085 4,14 L4,6 C4,2.6862915 6.6862915,6.08718376e-16 10,0 Z" fill="inherit"/>
+</svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-mouse.svg b/svg/iD-sprite/graphics/walkthrough-mouse.svg
deleted file mode 100644
index 7b5ebdbece..0000000000
--- a/svg/iD-sprite/graphics/walkthrough-mouse.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="60" height="60" viewBox="0 0 60 60">
-      <path d="M29.5,12 L29.5,27 L41,27 C41,17 37,12 29.5,12 z" fill="currentColor"/>
-      <path d="M29.5,12 L29.5,27 L18,27 C18,17 23,12 29.5,12 z" fill="inherit"/>
-      <path d="M29.5,11 C36.404,11 42,16.596 42,23.5 L42,41.5 C42,48.404 36.404,54 29.5,54 C22.596,54 17,48.404 17,41.5 L17,23.5 C17,16.596 22.596,11 29.5,11 z M19,28 L19,41.5 C19,47.299 23.701,52 29.5,52 C35.299,52 40,47.299 40,41.5 L40,28 L19,28 z M30.573,13.054 L30.5,13.05 L30.5,26 L40,26 L40,23.5 C39.823,17.619 36.075,14.176 30.573,13.054 z M19,26 L28.5,26 L28.5,13.05 C22.988,13.815 19.279,17.971 19,23.5 L19,26 z" fill="#000001"/>
-</svg>

From 365fa1bf0d2afd1a2d9d9b932a3b5c17d195c337 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Sat, 11 Jul 2020 19:27:50 -0400
Subject: [PATCH 18/30] Add tap and longpress icons to walkthrough

---
 data/core.yaml                                | 34 +++++++++---------
 dist/locales/en.json                          | 36 +++++++++----------
 modules/ui/intro/helper.js                    |  2 ++
 .../graphics/walkthrough-longpress.svg        |  5 +++
 svg/iD-sprite/graphics/walkthrough-tap.svg    |  5 +++
 5 files changed, 47 insertions(+), 35 deletions(-)
 create mode 100644 svg/iD-sprite/graphics/walkthrough-longpress.svg
 create mode 100644 svg/iD-sprite/graphics/walkthrough-tap.svg

diff --git a/data/core.yaml b/data/core.yaml
index 470a6d3e91..a9283d4f62 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1933,14 +1933,14 @@ en:
       title: "Navigation"
       map_info: "The main map area shows OpenStreetMap data on top of a background."
       drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
-      drag_touch: "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      drag_touch: "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
       zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
       click_townhall: "All features on the map can be selected by clicking on them. **Click the point to select it.**"
-      tap_townhall: "All features on the map can be selected by tapping on them. **Tap the point to select it.**"
+      tap_townhall: "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**"
       selected_townhall: "Great! The point is now selected. Selected features are drawn with a pulsing glow."
       editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
       preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}."
@@ -1957,7 +1957,7 @@ en:
       points_info: "*Points* can be used to represent features such as shops, restaurants, and monuments."
       add_point: "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**"
       place_point: "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**"
-      place_point_touch: "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**"
+      place_point_touch: "To place the new point on the map, {tap_icon} tap the location where it should go. **Tap the center of this building.**"
       search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**"
       choose_cafe: "**Choose {preset} from the list.**"
       feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
@@ -1968,7 +1968,7 @@ en:
       update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**"
       update_close: "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
       rightclick: "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**"
-      edit_menu_touch: "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**"
+      edit_menu_touch: "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**"
       delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**"
       undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**"
       play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
@@ -1977,10 +1977,10 @@ en:
       add_playground: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**"
       start_playground: "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature."
       starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**"
-      starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**"
+      starting_node_tap: "**{tap_icon} Tap to place a starting node on one of the corners of the playground.**"
       continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**"
       finish_area_click: "Finish the area by pressing `{return}`, or clicking again on either the first or last node."
-      finish_area_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard."
+      finish_area_tap: "Finish the area by {tap_icon} tapping again on either the first or last node, or by pressing `{return}` on a keyboard."
       finish_playground: "**Finish drawing an area for the playground.**"
       search_playground: "**Search for '{preset}'.**"
       choose_playground: "**Choose {preset} from the list.**"
@@ -1995,12 +1995,12 @@ en:
       missing_road: "Here is a road that is missing. Let's add it!"
       line_draw_info: "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary."
       start_line: "**Start a new line by clicking at the top end of this missing road.**"
-      start_line_tap: "**Start a new line by tapping at the top end of this missing road.**"
+      start_line_tap: "**Start a new line by {tap_icon} tapping at the top end of this missing road.**"
       intersect: "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**"
       retry_intersect: "The road needs to intersect {name}. Let's try again!"
       continue_line: "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed."
       finish_line_click: "When you're finished, click the last node again or press `{return}`."
-      finish_line_tap: "When you're finished, tap the last node again or press `{return}` on a keyboard."
+      finish_line_tap: "When you're finished, {tap_icon} tap the last node again or press `{return}` on a keyboard."
       finish_road: "**Finish drawing the road.**"
       choose_category_road: "**Select {category} from the list.**"
       choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**"
@@ -2009,9 +2009,9 @@ en:
       did_name_road: "Looks good! Next we will learn how to update the shape of a line."
       update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
       add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
-      add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**"
+      add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**"
       start_drag_endpoint: "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag."
-      start_drag_endpoint_touch: "When a line is selected, you can tap-and-drag any of its nodes to adjust them."
+      start_drag_endpoint_touch: "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them."
       drag_to_intersection: "**Drag the endpoint to the place where these roads should intersect.**"
       spot_looks_good: "This spot looks good."
       finish_drag_endpoint: "**Release the mouse button to finish dragging.**"
@@ -2021,17 +2021,17 @@ en:
       delete_lines: "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
       split_street: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it."
       rightclick_intersection: "**{rightclick} Right-click on the intersection node.**"
-      edit_menu_intersection_touch: "**Long-press on the intersection node.**"
+      edit_menu_intersection_touch: "**{longpress_icon} Long-press on the intersection node.**"
       split_intersection: "**Press the {split_icon} {split} button to divide {street}.**"
       retry_split: "You didn't press the {split_icon} {split} button. Try again."
       did_split_multi: "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**"
       did_split_single: "**Select the top part of {street2}.**"
       multi_select: "{selected} is now selected. Let's also select {other1}."
       add_to_selection_click: "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**"
-      add_to_selection_touch: "**Tap-and-hold {selected} and then tap {other2} to select both.**"
+      add_to_selection_touch: "**{longpress_icon} Tap-and-hold {selected} and then {tap_icon} tap {other2} with another finger to select both.**"
       multi_select_success: "Good! Both lines to delete are now selected."
       multi_rightclick: "**{rightclick} Right-click on one of the lines to show the edit menu.**"
-      multi_edit_menu_touch: "**Long-press on one of the lines to show the edit menu.**"
+      multi_edit_menu_touch: "**{longpress_icon} Long-press on one of the lines to show the edit menu.**"
       multi_delete: "**Press the {delete_icon} {delete} button to remove the extra lines.**"
       retry_delete: "You didn't press the {delete_icon} {delete} button. Try again."
       play: "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
@@ -2040,7 +2040,7 @@ en:
       add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**"
       start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible."
       building_corner_click: "**Click or press `{space}` to place a starting node on one of the corners of the building.**"
-      building_corner_tap: "**Tap one of the corners of the building to place a starting node.**"
+      building_corner_tap: "**{tap_icon} Tap one of the corners of the building to place a starting node.**"
       continue_building: "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details."
       finish_building: "**Finish tracing the building.**"
       retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
@@ -2048,20 +2048,20 @@ en:
       choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**"
       close: "**Press `{esc}` or the {apply} button to close the feature editor.**"
       rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**"
-      edit_menu_building_touch: "**Long-press the building you created to show the edit menu.**"
+      edit_menu_building_touch: "**{longpress_icon} Long-press the building you created to show the edit menu.**"
       square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**"
       retry_square: "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again."
       done_square: "See how the corners of the building moved into place? Let's learn another useful trick."
       add_tank: "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**"
       start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge."
       tank_edge_click: "**Click or press `{space}` to place a starting node on the edge of the tank.**"
-      tank_edge_tap: "**Tap the edge of the tank to place a starting node.**"
+      tank_edge_tap: "**{tap_icon} Tap the edge of the tank to place a starting node.**"
       continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw."
       finish_tank: "**Finish tracing the tank.**"
       search_tank: "**Search for '{preset}'.**"
       choose_tank: "**Choose {preset} from the list.**"
       rightclick_tank: "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**"
-      edit_menu_tank_touch: "**Long-press the storage tank you created to show the edit menu.**"
+      edit_menu_tank_touch: "**{longpress_icon} Long-press the storage tank you created to show the edit menu.**"
       circle_tank: "**Press the {circularize_icon} {circularize} button to make the tank a circle.**"
       retry_circle: "You didn't press the {circularize_icon} {circularize} button. Try again."
       play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index a8d8594592..72f378532d 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1632,7 +1632,7 @@
                 "open_data_h": "Open Data",
                 "open_data": "Edits that you make on this map will be visible to everyone who uses OpenStreetMap. Your edits can be based on personal knowledge, on-the-ground surveying, or imagery collected from aerial or street level photos. Copying from commercial sources, like Google Maps, [is strictly forbidden](https://www.openstreetmap.org/copyright).",
                 "before_start_h": "Before you start",
-                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to take the tutorial—it takes only about 15 minutes.",
+                "before_start": "You should be familiar with OpenStreetMap and this editor before you start editing. iD contains a walkthrough to teach you the basics of editing OpenStreetMap. Press the \"{start_the_walkthrough}\" button on this screen to start the tutorial—it takes only about 15 minutes.",
                 "open_source_h": "Open Source",
                 "open_source": "The iD editor is a collaborative open source project, and you are using version {version} now. The source code is available [on GitHub](https://github.com/openstreetmap/iD).",
                 "open_source_help": "You can help iD by [translating](https://github.com/openstreetmap/iD/blob/develop/CONTRIBUTING.md#translating) or [reporting bugs](https://github.com/openstreetmap/iD/issues)."
@@ -2408,14 +2408,14 @@
                 "title": "Navigation",
                 "map_info": "The main map area shows OpenStreetMap data on top of a background.",
                 "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
-                "drag_touch": "You can tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "drag_touch": "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
                 "click_townhall": "All features on the map can be selected by clicking on them. **Click the point to select it.**",
-                "tap_townhall": "All features on the map can be selected by tapping on them. **Tap the point to select it.**",
+                "tap_townhall": "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**",
                 "selected_townhall": "Great! The point is now selected. Selected features are drawn with a pulsing glow.",
                 "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",
                 "preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.",
@@ -2433,7 +2433,7 @@
                 "points_info": "*Points* can be used to represent features such as shops, restaurants, and monuments.",
                 "add_point": "They mark a specific location, and describe what's there. **Press the {point_icon} {point} button to add a new point.**",
                 "place_point": "To place the new point on the map, position your mouse cursor where the point should go, then {leftclick} left-click or press `{space}`. **Move the mouse pointer over this building, then left-click or press `{space}`.**",
-                "place_point_touch": "To place the new point on the map, tap the location where it should go. **Tap the center of this building.**",
+                "place_point_touch": "To place the new point on the map, {tap_icon} tap the location where it should go. **Tap the center of this building.**",
                 "search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'.**",
                 "choose_cafe": "**Choose {preset} from the list.**",
                 "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
@@ -2444,7 +2444,7 @@
                 "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**",
                 "update_close": "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
                 "rightclick": "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**",
-                "edit_menu_touch": "You can long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**",
+                "edit_menu_touch": "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**",
                 "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**",
                 "undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Press the {undo_icon} {undo} button to get the point back.**",
                 "play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, press '{next}'.**"
@@ -2454,10 +2454,10 @@
                 "add_playground": "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas.{br}They can also be used for more detailed mapping of many features you might normally map as points. **Press the {area_icon} {area} button to add a new area.**",
                 "start_playground": "Let's add this playground to the map by drawing an area. Areas are drawn by placing *nodes* along the outer edge of the feature.",
                 "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**",
-                "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**",
+                "starting_node_tap": "**{tap_icon} Tap to place a starting node on one of the corners of the playground.**",
                 "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**",
                 "finish_area_click": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.",
-                "finish_area_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.",
+                "finish_area_tap": "Finish the area by {tap_icon} tapping again on either the first or last node, or by pressing `{return}` on a keyboard.",
                 "finish_playground": "**Finish drawing an area for the playground.**",
                 "search_playground": "**Search for '{preset}'.**",
                 "choose_playground": "**Choose {preset} from the list.**",
@@ -2473,12 +2473,12 @@
                 "missing_road": "Here is a road that is missing. Let's add it!",
                 "line_draw_info": "In OpenStreetMap, lines should be drawn down the center of the road. You can drag and zoom the map while drawing if necessary.",
                 "start_line": "**Start a new line by clicking at the top end of this missing road.**",
-                "start_line_tap": "**Start a new line by tapping at the top end of this missing road.**",
+                "start_line_tap": "**Start a new line by {tap_icon} tapping at the top end of this missing road.**",
                 "intersect": "Continue drawing the line by placing more nodes along the road.{br}Roads, along with paths and ferry routes, must be properly connected to each other for navigation apps to work. **Place an intersection node on {name} to connect the two lines.**",
                 "retry_intersect": "The road needs to intersect {name}. Let's try again!",
                 "continue_line": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed.",
                 "finish_line_click": "When you're finished, click the last node again or press `{return}`.",
-                "finish_line_tap": "When you're finished, tap the last node again or press `{return}` on a keyboard.",
+                "finish_line_tap": "When you're finished, {tap_icon} tap the last node again or press `{return}` on a keyboard.",
                 "finish_road": "**Finish drawing the road.**",
                 "choose_category_road": "**Select {category} from the list.**",
                 "choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**",
@@ -2487,9 +2487,9 @@
                 "did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
                 "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
                 "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",
-                "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**",
+                "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**",
                 "start_drag_endpoint": "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag.",
-                "start_drag_endpoint_touch": "When a line is selected, you can tap-and-drag any of its nodes to adjust them.",
+                "start_drag_endpoint_touch": "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them.",
                 "drag_to_intersection": "**Drag the endpoint to the place where these roads should intersect.**",
                 "spot_looks_good": "This spot looks good.",
                 "finish_drag_endpoint": "**Release the mouse button to finish dragging.**",
@@ -2499,17 +2499,17 @@
                 "delete_lines": "It's OK to delete lines for roads that don't exist in the real world.{br}Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
                 "split_street": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it.",
                 "rightclick_intersection": "**{rightclick} Right-click on the intersection node.**",
-                "edit_menu_intersection_touch": "**Long-press on the intersection node.**",
+                "edit_menu_intersection_touch": "**{longpress_icon} Long-press on the intersection node.**",
                 "split_intersection": "**Press the {split_icon} {split} button to divide {street}.**",
                 "retry_split": "You didn't press the {split_icon} {split} button. Try again.",
                 "did_split_multi": "Good job! {street1} is now split into two pieces. The top part can be removed. **Select the top part of {street2}.**",
                 "did_split_single": "**Select the top part of {street2}.**",
                 "multi_select": "{selected} is now selected. Let's also select {other1}.",
                 "add_to_selection_click": "You can hold `{shift}` while clicking to select multiple things. **Shift-click on {other2}.**",
-                "add_to_selection_touch": "**Tap-and-hold {selected} and then tap {other2} to select both.**",
+                "add_to_selection_touch": "**{longpress_icon} Tap-and-hold {selected} and then {tap_icon} tap {other2} with another finger to select both.**",
                 "multi_select_success": "Good! Both lines to delete are now selected.",
                 "multi_rightclick": "**{rightclick} Right-click on one of the lines to show the edit menu.**",
-                "multi_edit_menu_touch": "**Long-press on one of the lines to show the edit menu.**",
+                "multi_edit_menu_touch": "**{longpress_icon} Long-press on one of the lines to show the edit menu.**",
                 "multi_delete": "**Press the {delete_icon} {delete} button to remove the extra lines.**",
                 "retry_delete": "You didn't press the {delete_icon} {delete} button. Try again.",
                 "play": "Great! Use the skills that you've learned in this chapter to practice editing some more lines. **When you are ready to continue to the next chapter, press '{next}'.**"
@@ -2519,7 +2519,7 @@
                 "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**",
                 "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible.",
                 "building_corner_click": "**Click or press `{space}` to place a starting node on one of the corners of the building.**",
-                "building_corner_tap": "**Tap one of the corners of the building to place a starting node.**",
+                "building_corner_tap": "**{tap_icon} Tap one of the corners of the building to place a starting node.**",
                 "continue_building": "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.",
                 "finish_building": "**Finish tracing the building.**",
                 "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!",
@@ -2527,20 +2527,20 @@
                 "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**",
                 "close": "**Press `{esc}` or the {apply} button to close the feature editor.**",
                 "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**",
-                "edit_menu_building_touch": "**Long-press the building you created to show the edit menu.**",
+                "edit_menu_building_touch": "**{longpress_icon} Long-press the building you created to show the edit menu.**",
                 "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**",
                 "retry_square": "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again.",
                 "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.",
                 "add_tank": "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**",
                 "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge.",
                 "tank_edge_click": "**Click or press `{space}` to place a starting node on the edge of the tank.**",
-                "tank_edge_tap": "**Tap the edge of the tank to place a starting node.**",
+                "tank_edge_tap": "**{tap_icon} Tap the edge of the tank to place a starting node.**",
                 "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.",
                 "finish_tank": "**Finish tracing the tank.**",
                 "search_tank": "**Search for '{preset}'.**",
                 "choose_tank": "**Choose {preset} from the list.**",
                 "rightclick_tank": "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**",
-                "edit_menu_tank_touch": "**Long-press the storage tank you created to show the edit menu.**",
+                "edit_menu_tank_touch": "**{longpress_icon} Long-press the storage tank you created to show the edit menu.**",
                 "circle_tank": "**Press the {circularize_icon} {circularize} button to make the tank a circle.**",
                 "retry_circle": "You didn't press the {circularize_icon} {circularize} button. Try again.",
                 "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**"
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 7e712e8c91..4b293e856c 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -75,6 +75,8 @@ export function helpString(id, replacements) {
         save_icon: icon('#iD-icon-save', 'pre-text'),
         leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
         rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
+        tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
+        longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/svg/iD-sprite/graphics/walkthrough-longpress.svg b/svg/iD-sprite/graphics/walkthrough-longpress.svg
new file mode 100644
index 0000000000..64257248b9
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-longpress.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M7.86048705,6.9951281 C8.96236588,7.07217897 9.91807723,6.24139177 9.9951281,5.13951295 C10.072179,4.03763412 9.24139177,3.08192277 8.13951295,3.0048719 C7.03763412,2.92782103 6.08192277,3.75860823 6.0048719,4.86048705 C5.92782103,5.96236588 6.75860823,6.91807723 7.86048705,6.9951281 Z M7.65121763,9.98782025 C4.89652057,9.79519307 2.81955257,7.40591469 3.01217975,4.65121763 C3.20480693,1.89652057 5.59408531,-0.180447435 8.34878237,0.0121797487 C11.1034794,0.204806932 13.1804474,2.59408531 12.9878203,5.34878237 C12.7951931,8.10347943 10.4059147,10.1804474 7.65121763,9.98782025 Z" fill="currentColor"/>
+    <path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
+</svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-tap.svg b/svg/iD-sprite/graphics/walkthrough-tap.svg
new file mode 100644
index 0000000000..0807f37b60
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-tap.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M6.72026326,3.43469021 C6.40040739,3.68491118 6.16597202,4.02281125 6.04366924,4.42284563 L3.17475497,3.54573052 C3.48596687,2.52780226 4.09255063,1.68141532 4.87180132,1.07181306 L6.72026326,3.43469021 Z M5.98452476,5.07962475 C6.00603199,5.4851562 6.14835692,5.87100592 6.40589591,6.20064079 L4.04186365,8.04762522 C3.38652944,7.20883569 3.041132,6.22648376 2.9887349,5.23850548 L5.98452476,5.07962475 Z M8.58467966,3.09706893 C8.19837594,2.97181818 7.78714949,2.96641377 7.38711511,3.08871656 L6.51,0.21980229 C7.52792826,-0.0914096107 8.56881216,-0.0618224581 9.5099468,0.243320388 L8.58467966,3.09706893 Z M9.89523551,4.40704449 C9.78988354,4.01484648 9.57044608,3.66701952 9.25,3.39813333 L11.1783628,1.1 C11.9937706,1.78420832 12.5358627,2.67328134 12.792527,3.62877596 L9.89523551,4.40704449 Z M6.95310719,6.67125583 C7.29383066,6.89222152 7.68964613,7.00387501 8.10770396,6.98927611 L8.21240245,9.98744859 C7.14861169,10.024597 6.15085276,9.72661741 5.3207633,9.18828849 L6.95310719,6.67125583 Z M9.5,6.30723366 C9.76084239,5.99597884 9.91990141,5.61672085 9.95635976,5.2 L12.9449439,5.46146723 C12.8521719,6.52185591 12.4348172,7.47586311 11.7993384,8.23415943 L9.5,6.30723366 Z" fill="currentColor"/>
+    <path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
+</svg>

From 1514648468240b4162b5e1a44a5a7fa2df2cf82a Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Sat, 11 Jul 2020 21:04:07 -0400
Subject: [PATCH 19/30] Add doubletap and touch-and-drag icons to the
 walkthrough Update tap and longpress icons

---
 data/core.yaml                                         | 8 ++++----
 dist/locales/en.json                                   | 8 ++++----
 modules/ui/intro/helper.js                             | 2 ++
 svg/iD-sprite/graphics/walkthrough-doubletap.svg       | 5 +++++
 svg/iD-sprite/graphics/walkthrough-longpress.svg       | 4 ++--
 svg/iD-sprite/graphics/walkthrough-tap.svg             | 4 ++--
 svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg | 5 +++++
 7 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 svg/iD-sprite/graphics/walkthrough-doubletap.svg
 create mode 100644 svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg

diff --git a/data/core.yaml b/data/core.yaml
index a9283d4f62..400831050e 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1933,9 +1933,9 @@ en:
       title: "Navigation"
       map_info: "The main map area shows OpenStreetMap data on top of a background."
       drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
-      drag_touch: "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
+      drag_touch: "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
-      zoom_touch: "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
+      zoom_touch: "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -2009,9 +2009,9 @@ en:
       did_name_road: "Looks good! Next we will learn how to update the shape of a line."
       update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
       add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
-      add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**"
+      add_node_touch: "We can add some nodes to this line to improve its shape. One way to add a node is to {doubletap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**"
       start_drag_endpoint: "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag."
-      start_drag_endpoint_touch: "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them."
+      start_drag_endpoint_touch: "When a line is selected, you can {touchdrag_icon} tap-and-drag any of its nodes to adjust them."
       drag_to_intersection: "**Drag the endpoint to the place where these roads should intersect.**"
       spot_looks_good: "This spot looks good."
       finish_drag_endpoint: "**Release the mouse button to finish dragging.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 72f378532d..6c86b9509b 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2408,9 +2408,9 @@
                 "title": "Navigation",
                 "map_info": "The main map area shows OpenStreetMap data on top of a background.",
                 "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
-                "drag_touch": "You can {longpress_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
+                "drag_touch": "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
-                "zoom_touch": "You can zoom the map by pinching it with two fingers, double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
+                "zoom_touch": "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
@@ -2487,9 +2487,9 @@
                 "did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
                 "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
                 "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",
-                "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to {tap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**",
+                "add_node_touch": "We can add some nodes to this line to improve its shape. One way to add a node is to {doubletap_icon} double-tap the line where you want to add a node. **Double-tap on the line to create a new node.**",
                 "start_drag_endpoint": "When a line is selected, you can adjust any of its nodes by clicking and holding down the {leftclick} left mouse button while you drag.",
-                "start_drag_endpoint_touch": "When a line is selected, you can {longpress_icon} tap-and-drag any of its nodes to adjust them.",
+                "start_drag_endpoint_touch": "When a line is selected, you can {touchdrag_icon} tap-and-drag any of its nodes to adjust them.",
                 "drag_to_intersection": "**Drag the endpoint to the place where these roads should intersect.**",
                 "spot_looks_good": "This spot looks good.",
                 "finish_drag_endpoint": "**Release the mouse button to finish dragging.**",
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 4b293e856c..f3af18cf4c 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -76,7 +76,9 @@ export function helpString(id, replacements) {
         leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
         rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
         tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
+        doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
         longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
+        touchdrag_icon: icon('#iD-walkthrough-touchdrag-right', 'pre-text operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/svg/iD-sprite/graphics/walkthrough-doubletap.svg b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
new file mode 100644
index 0000000000..849f7a7d26
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.65123202,10.9876144 C11.4058154,11.1802337 13.7949952,9.10335137 13.9876144,6.34876798 C14.1802337,3.59418459 12.1033514,1.2050048 9.34876798,1.01238557 C6.59418459,0.819766331 4.2050048,2.89664863 4.01238557,5.65123202 C3.81976633,8.40581541 5.89664863,10.7949952 8.65123202,10.9876144 Z M8.72098562,9.99009155 C6.51731891,9.83599616 4.85581307,7.92465233 5.00990845,5.72098562 C5.16400384,3.51731891 7.07534767,1.85581307 9.27901438,2.00990845 C11.4826811,2.16400384 13.1441869,4.07534767 12.9900915,6.27901438 C12.8359962,8.48268109 10.9246523,10.1441869 8.72098562,9.99009155 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
+    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
+</svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-longpress.svg b/svg/iD-sprite/graphics/walkthrough-longpress.svg
index 64257248b9..6e9b4473f0 100644
--- a/svg/iD-sprite/graphics/walkthrough-longpress.svg
+++ b/svg/iD-sprite/graphics/walkthrough-longpress.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M7.86048705,6.9951281 C8.96236588,7.07217897 9.91807723,6.24139177 9.9951281,5.13951295 C10.072179,4.03763412 9.24139177,3.08192277 8.13951295,3.0048719 C7.03763412,2.92782103 6.08192277,3.75860823 6.0048719,4.86048705 C5.92782103,5.96236588 6.75860823,6.91807723 7.86048705,6.9951281 Z M7.65121763,9.98782025 C4.89652057,9.79519307 2.81955257,7.40591469 3.01217975,4.65121763 C3.20480693,1.89652057 5.59408531,-0.180447435 8.34878237,0.0121797487 C11.1034794,0.204806932 13.1804474,2.59408531 12.9878203,5.34878237 C12.7951931,8.10347943 10.4059147,10.1804474 7.65121763,9.98782025 Z" fill="currentColor"/>
-    <path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
+    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
+    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
 </svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-tap.svg b/svg/iD-sprite/graphics/walkthrough-tap.svg
index 0807f37b60..d65e39dc7d 100644
--- a/svg/iD-sprite/graphics/walkthrough-tap.svg
+++ b/svg/iD-sprite/graphics/walkthrough-tap.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M6.72026326,3.43469021 C6.40040739,3.68491118 6.16597202,4.02281125 6.04366924,4.42284563 L3.17475497,3.54573052 C3.48596687,2.52780226 4.09255063,1.68141532 4.87180132,1.07181306 L6.72026326,3.43469021 Z M5.98452476,5.07962475 C6.00603199,5.4851562 6.14835692,5.87100592 6.40589591,6.20064079 L4.04186365,8.04762522 C3.38652944,7.20883569 3.041132,6.22648376 2.9887349,5.23850548 L5.98452476,5.07962475 Z M8.58467966,3.09706893 C8.19837594,2.97181818 7.78714949,2.96641377 7.38711511,3.08871656 L6.51,0.21980229 C7.52792826,-0.0914096107 8.56881216,-0.0618224581 9.5099468,0.243320388 L8.58467966,3.09706893 Z M9.89523551,4.40704449 C9.78988354,4.01484648 9.57044608,3.66701952 9.25,3.39813333 L11.1783628,1.1 C11.9937706,1.78420832 12.5358627,2.67328134 12.792527,3.62877596 L9.89523551,4.40704449 Z M6.95310719,6.67125583 C7.29383066,6.89222152 7.68964613,7.00387501 8.10770396,6.98927611 L8.21240245,9.98744859 C7.14861169,10.024597 6.15085276,9.72661741 5.3207633,9.18828849 L6.95310719,6.67125583 Z M9.5,6.30723366 C9.76084239,5.99597884 9.91990141,5.61672085 9.95635976,5.2 L12.9449439,5.46146723 C12.8521719,6.52185591 12.4348172,7.47586311 11.7993384,8.23415943 L9.5,6.30723366 Z" fill="currentColor"/>
-    <path d="M7,13 L7,5 C7,4.44771525 7.44771525,4 8,4 C8.55228475,4 9,4.44771525 9,5 L9,9 C9,8.44771525 9.44771525,8 10,8 C10.5522847,8 11,8.44771525 11,9 L11,10 C11,9.44771525 11.4477153,9 12,9 C12.5522847,9 13,9.44771525 13,10 L13,11 C13,10.4477153 13.4477153,10 14,10 C14.5522847,10 15,10.4477153 15,11 L15,16 C15,18.209134 13.209143,19.999991 11.000009,19.999991 C10.2659918,20 9.59932211,20 9,20 C7.25562789,20 5.75375111,18.7687556 5.41165159,17.058258 L4.19611614,10.9805807 C4.10732158,10.5366079 4.39525043,10.1047146 4.83922323,10.01592 C4.89216058,10.0053326 4.94601429,10 5,10 C5.59719029,10 6.12737961,10.3821388 6.31622777,10.9486833 L7,13 L7,13 Z" fill="inherit"/>
+    <path d="M8.72098562,8.99009155 C6.51731891,8.83599616 4.85581307,6.92465233 5.00990845,4.72098562 C5.16400384,2.51731891 7.07534767,0.855813065 9.27901438,1.00990845 C11.4826811,1.16400384 13.1441869,3.07534767 12.9900915,5.27901438 C12.8359962,7.48268109 10.9246523,9.14418693 8.72098562,8.99009155 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"></path>
+    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"></path>
 </svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg b/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg
new file mode 100644
index 0000000000..976117267a
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M10.873934,4 L14,4 L14,2 L15,1 L19,5 L15,9 L14,8 L14,6 L10.8735405,6 C10.4024659,7.83337491 8.67686556,9.12686 6.72098562,8.99009155 C4.51731891,8.83599616 2.85581307,6.92465233 3.00990845,4.72098562 C3.16400384,2.51731891 5.07534767,0.855813065 7.27901438,1.00990845 C9.04063914,1.13309326 10.4557959,2.37924807 10.873934,4 Z M6.86049281,6.99504577 C7.96232617,7.07209347 8.91799808,6.24134055 8.99504577,5.13950719 C9.07209347,4.03767383 8.24134055,3.08200192 7.13950719,3.00495423 C6.03767383,2.92790653 5.08200192,3.75865945 5.00495423,4.86049281 C4.92790653,5.96232617 5.75865945,6.91799808 6.86049281,6.99504577 Z" fill="currentColor"></path>
+    <path d="M6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 L8,9 C8,8.44771525 8.44771525,8 9,8 C9.55228475,8 10,8.44771525 10,9 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,15 C14,17.209134 12.209143,18.999991 10.000009,18.999991 C9.26599179,19 8.59932211,19 8,19 C6.25562789,19 4.75375111,17.7687556 4.41165159,16.058258 L3.19611614,10.9805807 C3.10732158,10.5366079 3.39525043,10.1047146 3.83922323,10.01592 C3.89216058,10.0053326 3.94601429,10 4,10 C4.59719029,10 5.12737961,10.3821388 5.31622777,10.9486833 L6,13 L6,5 Z" fill="inherit"></path>
+</svg>

From bf5ed60f9693d9fd1063190c45533dba8dc3724a Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Sun, 12 Jul 2020 19:04:39 -0400
Subject: [PATCH 20/30] Update walkthrough touch icons

---
 modules/ui/intro/helper.js                             | 2 +-
 svg/iD-sprite/graphics/walkthrough-doubletap.svg       | 4 ++--
 svg/iD-sprite/graphics/walkthrough-longpress.svg       | 4 ++--
 svg/iD-sprite/graphics/walkthrough-tap.svg             | 4 ++--
 svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg | 5 -----
 svg/iD-sprite/graphics/walkthrough-touchdrag.svg       | 5 +++++
 6 files changed, 12 insertions(+), 12 deletions(-)
 delete mode 100644 svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg
 create mode 100644 svg/iD-sprite/graphics/walkthrough-touchdrag.svg

diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index f3af18cf4c..4d166f6e70 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -78,7 +78,7 @@ export function helpString(id, replacements) {
         tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
         doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
         longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
-        touchdrag_icon: icon('#iD-walkthrough-touchdrag-right', 'pre-text operation'),
+        touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'pre-text operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/svg/iD-sprite/graphics/walkthrough-doubletap.svg b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
index 849f7a7d26..68994fa0ee 100644
--- a/svg/iD-sprite/graphics/walkthrough-doubletap.svg
+++ b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.65123202,10.9876144 C11.4058154,11.1802337 13.7949952,9.10335137 13.9876144,6.34876798 C14.1802337,3.59418459 12.1033514,1.2050048 9.34876798,1.01238557 C6.59418459,0.819766331 4.2050048,2.89664863 4.01238557,5.65123202 C3.81976633,8.40581541 5.89664863,10.7949952 8.65123202,10.9876144 Z M8.72098562,9.99009155 C6.51731891,9.83599616 4.85581307,7.92465233 5.00990845,5.72098562 C5.16400384,3.51731891 7.07534767,1.85581307 9.27901438,2.00990845 C11.4826811,2.16400384 13.1441869,4.07534767 12.9900915,6.27901438 C12.8359962,8.48268109 10.9246523,10.1441869 8.72098562,9.99009155 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
-    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
+    <path d="M8.65123202,9.98761443 C5.89664863,9.7949952 3.81976633,7.40581541 4.01238557,4.65123202 C4.2050048,1.89664863 6.59418459,-0.180233669 9.34876798,0.0123855661 C12.1033514,0.205004801 14.1802337,2.59418459 13.9876144,5.34876798 C13.7949952,8.10335137 11.4058154,10.1802337 8.65123202,9.98761443 Z M8.72098562,8.99009155 C10.9246523,9.14418693 12.8359962,7.48268109 12.9900915,5.27901438 C13.1441869,3.07534767 11.4826811,1.16400384 9.27901438,1.00990845 C7.07534767,0.855813065 5.16400384,2.51731891 5.00990845,4.72098562 C4.85581307,6.92465233 6.51731891,8.83599616 8.72098562,8.99009155 Z M8.79073921,7.99256866 C7.13798918,7.87699712 5.8918598,6.44348925 6.00743134,4.79073921 C6.12300288,3.13798918 7.55651075,1.8918598 9.20926079,2.00743134 C10.8620108,2.12300288 12.1081402,3.55651075 11.9925687,5.20926079 C11.8769971,6.86201082 10.4434892,8.1081402 8.79073921,7.99256866 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"/>
+    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"/>
 </svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-longpress.svg b/svg/iD-sprite/graphics/walkthrough-longpress.svg
index 6e9b4473f0..0a7b40c265 100644
--- a/svg/iD-sprite/graphics/walkthrough-longpress.svg
+++ b/svg/iD-sprite/graphics/walkthrough-longpress.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"></path>
-    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"></path>
+    <path d="M8.65123202,9.98761443 C5.89664863,9.7949952 3.81976633,7.40581541 4.01238557,4.65123202 C4.2050048,1.89664863 6.59418459,-0.180233669 9.34876798,0.0123855661 C12.1033514,0.205004801 14.1802337,2.59418459 13.9876144,5.34876798 C13.7949952,8.10335137 11.4058154,10.1802337 8.65123202,9.98761443 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"/>
+    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"/>
 </svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-tap.svg b/svg/iD-sprite/graphics/walkthrough-tap.svg
index d65e39dc7d..82acab4116 100644
--- a/svg/iD-sprite/graphics/walkthrough-tap.svg
+++ b/svg/iD-sprite/graphics/walkthrough-tap.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M8.72098562,8.99009155 C6.51731891,8.83599616 4.85581307,6.92465233 5.00990845,4.72098562 C5.16400384,2.51731891 7.07534767,0.855813065 9.27901438,1.00990845 C11.4826811,1.16400384 13.1441869,3.07534767 12.9900915,5.27901438 C12.8359962,7.48268109 10.9246523,9.14418693 8.72098562,8.99009155 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"></path>
-    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"></path>
+    <path d="M7.72026326,3.43469021 C7.40040739,3.68491118 7.16597202,4.02281125 7.04366924,4.42284563 L4.17475497,3.54573052 C4.48596687,2.52780226 5.09255063,1.68141532 5.87180132,1.07181306 L7.72026326,3.43469021 Z M6.98452476,5.07962475 C7.00603199,5.4851562 7.14835692,5.87100592 7.40589591,6.20064079 L5.04186365,8.04762522 C4.38652944,7.20883569 4.041132,6.22648376 3.9887349,5.23850548 L6.98452476,5.07962475 Z M9.58467966,3.09706893 C9.19837594,2.97181818 8.78714949,2.96641377 8.38711511,3.08871656 L7.51,0.21980229 C8.52792826,-0.0914096107 9.56881216,-0.0618224581 10.5099468,0.243320388 L9.58467966,3.09706893 Z M10.8952355,4.40704449 C10.7898835,4.01484648 10.5704461,3.66701952 10.25,3.39813333 L12.1783628,1.1 C12.9937706,1.78420832 13.5358627,2.67328134 13.792527,3.62877596 L10.8952355,4.40704449 Z M7.95310719,6.67125583 C8.29383066,6.89222152 8.68964613,7.00387501 9.10770396,6.98927611 L9.21240245,9.98744859 C8.14861169,10.024597 7.15085276,9.72661741 6.3207633,9.18828849 L7.95310719,6.67125583 Z M10.5,6.30723366 C10.7608424,5.99597884 10.9199014,5.61672085 10.9563598,5.2 L13.9449439,5.46146723 C13.8521719,6.52185591 13.4348172,7.47586311 12.7993384,8.23415943 L10.5,6.30723366 Z" fill="currentColor"/>
+    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"/>
 </svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg b/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg
deleted file mode 100644
index 976117267a..0000000000
--- a/svg/iD-sprite/graphics/walkthrough-touchdrag-right.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M10.873934,4 L14,4 L14,2 L15,1 L19,5 L15,9 L14,8 L14,6 L10.8735405,6 C10.4024659,7.83337491 8.67686556,9.12686 6.72098562,8.99009155 C4.51731891,8.83599616 2.85581307,6.92465233 3.00990845,4.72098562 C3.16400384,2.51731891 5.07534767,0.855813065 7.27901438,1.00990845 C9.04063914,1.13309326 10.4557959,2.37924807 10.873934,4 Z M6.86049281,6.99504577 C7.96232617,7.07209347 8.91799808,6.24134055 8.99504577,5.13950719 C9.07209347,4.03767383 8.24134055,3.08200192 7.13950719,3.00495423 C6.03767383,2.92790653 5.08200192,3.75865945 5.00495423,4.86049281 C4.92790653,5.96232617 5.75865945,6.91799808 6.86049281,6.99504577 Z" fill="currentColor"></path>
-    <path d="M6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 L8,9 C8,8.44771525 8.44771525,8 9,8 C9.55228475,8 10,8.44771525 10,9 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,15 C14,17.209134 12.209143,18.999991 10.000009,18.999991 C9.26599179,19 8.59932211,19 8,19 C6.25562789,19 4.75375111,17.7687556 4.41165159,16.058258 L3.19611614,10.9805807 C3.10732158,10.5366079 3.39525043,10.1047146 3.83922323,10.01592 C3.89216058,10.0053326 3.94601429,10 4,10 C4.59719029,10 5.12737961,10.3821388 5.31622777,10.9486833 L6,13 L6,5 Z" fill="inherit"></path>
-</svg>
diff --git a/svg/iD-sprite/graphics/walkthrough-touchdrag.svg b/svg/iD-sprite/graphics/walkthrough-touchdrag.svg
new file mode 100644
index 0000000000..baf0944e51
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-touchdrag.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M7.17089955,4 C7.60868534,2.75922055 8.83295642,1.91119076 10.2092608,2.00743134 C11.4383491,2.09337756 12.4425623,2.90818733 12.829104,4 L15,4 L15,2 L16,1 L20,5 L16,9 L15,8 L15,6 L12.8291005,6 C12.3913147,7.24077945 11.1670436,8.08880924 9.79073921,7.99256866 C8.56165094,7.90662244 7.5574377,7.09181267 7.17089596,6 L5,6 L5,8 L4,9 L-3.55271368e-15,5 L4,1 L5,2 L5,4 L7.17089955,4 Z M9.86049281,6.99504577 C10.9623262,7.07209347 11.9179981,6.24134055 11.9950458,5.13950719 C12.0720935,4.03767383 11.2413405,3.08200192 10.1395072,3.00495423 C9.03767383,2.92790653 8.08200192,3.75865945 8.00495423,4.86049281 C7.92790653,5.96232617 8.75865945,6.91799808 9.86049281,6.99504577 Z" fill="currentColor"/>
+    <path d="M9,5 C9,4.44771525 9.44771525,4 10,4 C10.5522847,4 11,4.44771525 11,5 L11,9 C11,8.44771525 11.4477153,8 12,8 C12.5522847,8 13,8.44771525 13,9 L13,10 C13,9.44771525 13.4477153,9 14,9 C14.5522847,9 15,9.44771525 15,10 L15,11 C15,10.4477153 15.4477153,10 16,10 C16.5522847,10 17,10.4477153 17,11 L17,15 C17,17.209134 15.209143,18.999991 13.000009,18.999991 C12.2659918,19 11.5993221,19 11,19 C9.25562789,19 7.75375111,17.7687556 7.41165159,16.058258 L6.19611614,10.9805807 C6.10732158,10.5366079 6.39525043,10.1047146 6.83922323,10.01592 C6.89216058,10.0053326 6.94601429,10 7,10 C7.59719029,10 8.12737961,10.3821388 8.31622777,10.9486833 L9,13 L9,5 Z" fill="inherit"/>
+</svg>

From 477b7a2743c7c33649c96497c649b8426b440ffc Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Sun, 12 Jul 2020 20:48:07 -0400
Subject: [PATCH 21/30] Start updating the documentation for touch input

---
 data/core.yaml       | 26 +++++++++++++-------------
 dist/locales/en.json | 26 +++++++++++++-------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 400831050e..9fb6fd55d2 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1305,16 +1305,16 @@ en:
     overview:
       title: Overview
       navigation_h: "Navigation"
-      navigation_drag: "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard."
-      navigation_zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on a keyboard."
+      navigation_drag: "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard."
+      navigation_zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard."
       features_h: "Map Features"
       features: "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*."
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
     editing:
       title: "Editing & Saving"
       select_h: "Select"
-      select_left_click: "{leftclick} Left-click on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address."
-      select_right_click: "{rightclick} Right-click on a feature to display the editing menu, which shows the commands that are available, such as rotating, moving, and deleting."
+      select_left_click: "{leftclick} Left-click or {tap_icon} tap on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address."
+      select_right_click: "{rightclick} Right-click or {longpress_icon} long-press on a feature to display the edit menu, which shows the commands that are available, such as rotating, moving, and deleting."
       multiselect_h: "Multiselect"
       multiselect_shift_click: "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items."
       multiselect_lasso: "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected."
@@ -1326,7 +1326,7 @@ en:
       upload_h: "Upload"
       upload: "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then press **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone."
       backups_h: "Automatic Backups"
-      backups: "If you happen to close the browser before saving, your edits are still stored locally. You can come back later using the same browser and device, and iD will offer to restore your work."
+      backups: "If you happen to close the browser before saving, your edits are still stored locally. iD will offer to restore your work when you come back later on the same browser and device."
       keyboard_h: "Keyboard Shortcuts"
       keyboard: "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
     feature_editor:
@@ -1348,12 +1348,12 @@ en:
       intro: "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there."
       add_point_h: "Adding Points"
       add_point: "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
-      add_point_finish: "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`."
+      add_point_finish: "To place the new point on the map with a mouse, position the cursor where the point should go, then {leftclick} left-click or press `{space}`. On a touchscreen, simply {tap_icon} tap the location."
       move_point_h: "Moving Points"
       move_point: "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location."
       delete_point_h: "Deleting Points"
       delete_point: "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it."
-      delete_point_command: "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+      delete_point_command: "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
     lines:
       title: Lines
       intro: "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent."
@@ -1363,20 +1363,20 @@ en:
       add_line_finish: "To finish a line, press `{return}` or click again on the last node."
       modify_line_h: "Modifying Lines"
       modify_line_dragnode: "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations."
-      modify_line_addnode: "You can also create new nodes along a line either by {leftclick}**x2** double-clicking on the line or by dragging the small triangles at the midpoints between nodes."
+      modify_line_addnode: "You can also create new nodes along a line by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping the line, or by dragging the small triangles at the midpoints between nodes."
       connect_line_h: "Connecting Lines"
       connect_line: "Having roads connected properly is important for the map and essential for providing driving directions."
       connect_line_display: "The connections between roads are drawn with gray circles. The endpoints of a line are drawn with larger white circles if they don't connect to anything."
       connect_line_drag: "To connect a line to another feature, drag one of the line's nodes onto the other feature until both features snap together. Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features."
       connect_line_tag: "If you know that the connection has traffic lights or crosswalks, you can add them by selecting the connecting node and using the feature editor to select the correct feature's type."
       disconnect_line_h: "Disconnecting Lines"
-      disconnect_line_command: "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect_icon} **{disconnect}** command from the editing menu."
+      disconnect_line_command: "To disconnect a road from another feature, {rightclick} right-click or {longpress_icon} long-press the connecting node and select the {disconnect_icon} **{disconnect}** command from the edit menu."
       move_line_h: "Moving Lines"
-      move_line_command: "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location."
+      move_line_command: "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the edit menu. Then move the mouse, and {leftclick} left-click to place the line in a new location."
       move_line_connected: "Lines that are connected to other features will stay connected as you move the line to a new location. iD may prevent you from moving a line across another connected line."
       delete_line_h: "Deleting Lines"
       delete_line: "If a line is entirely incorrect, for example a road that doesn't exist in the real world, it's OK to delete it. Be careful when deleting features: the background imagery you are using might be outdated, and a road that looks wrong could simply be newly built."
-      delete_line_command: "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+      delete_line_command: "To delete a line, {rightclick} right-click or {longpress_icon} long-press the line to show the edit menu, then use the {delete_icon} **{delete}** command."
     areas:
       title: Areas
       intro: "*Areas* are used to show the boundaries of features like lakes, buildings, and residential areas. Areas should be traced around the edge of the feature that they represent, for example, around the base of a building."
@@ -1387,13 +1387,13 @@ en:
       add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
       add_area_finish: "To finish an area, press `{return}` or click again on either the first or last node."
       square_area_h: "Square Corners"
-      square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu."
+      square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click or {longpress_icon} long-press the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the edit menu."
       modify_area_h: "Modifying Areas"
       modify_area_dragnode: "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations."
       modify_area_addnode: "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes."
       delete_area_h: "Deleting Areas"
       delete_area: "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built."
-      delete_area_command: "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+      delete_area_command: "To delete an area, {rightclick} right-click or {longpress_icon} long-press the area to show the edit menu, then use the {delete_icon} **{delete}** command."
     relations:
       title: Relations
       intro: "A *relation* is a special type of feature in OpenStreetMap that groups together other features. The features that belong to a relation are called *members*, and each member can have a *role* in the relation."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 6c86b9509b..7ac79e1975 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1640,8 +1640,8 @@
             "overview": {
                 "title": "Overview",
                 "navigation_h": "Navigation",
-                "navigation_drag": "You can drag the map by pressing and holding down the {leftclick} left mouse button and moving the mouse around. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard.",
-                "navigation_zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons along the side of the map. You can also use the `+`, `-` keys on a keyboard.",
+                "navigation_drag": "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard.",
+                "navigation_zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard.",
                 "features_h": "Map Features",
                 "features": "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*.",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -1649,8 +1649,8 @@
             "editing": {
                 "title": "Editing & Saving",
                 "select_h": "Select",
-                "select_left_click": "{leftclick} Left-click on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address.",
-                "select_right_click": "{rightclick} Right-click on a feature to display the editing menu, which shows the commands that are available, such as rotating, moving, and deleting.",
+                "select_left_click": "{leftclick} Left-click or {tap_icon} tap on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address.",
+                "select_right_click": "{rightclick} Right-click or {longpress_icon} long-press on a feature to display the edit menu, which shows the commands that are available, such as rotating, moving, and deleting.",
                 "multiselect_h": "Multiselect",
                 "multiselect_shift_click": "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items.",
                 "multiselect_lasso": "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected.",
@@ -1662,7 +1662,7 @@
                 "upload_h": "Upload",
                 "upload": "Before uploading your changes you must enter a [changeset comment](https://wiki.openstreetmap.org/wiki/Good_changeset_comments). Then press **{upload}** to send your changes to OpenStreetMap, where they will be merged into the map and publicly visible to everyone.",
                 "backups_h": "Automatic Backups",
-                "backups": "If you happen to close the browser before saving, your edits are still stored locally. You can come back later using the same browser and device, and iD will offer to restore your work.",
+                "backups": "If you happen to close the browser before saving, your edits are still stored locally. iD will offer to restore your work when you come back later on the same browser and device.",
                 "keyboard_h": "Keyboard Shortcuts",
                 "keyboard": "You can view a list of keyboard shortcuts by pressing the `{shortcuts_key}` key."
             },
@@ -1686,12 +1686,12 @@
                 "intro": "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there.",
                 "add_point_h": "Adding Points",
                 "add_point": "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
-                "add_point_finish": "To place the new point on the map, position the mouse cursor where the point should go, then {leftclick} left-click or press `{space}`.",
+                "add_point_finish": "To place the new point on the map with a mouse, position the cursor where the point should go, then {leftclick} left-click or press `{space}`. On a touchscreen, simply {tap_icon} tap the location.",
                 "move_point_h": "Moving Points",
                 "move_point": "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location.",
                 "delete_point_h": "Deleting Points",
                 "delete_point": "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it.",
-                "delete_point_command": "To delete a point, {rightclick} right-click on the point to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+                "delete_point_command": "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "lines": {
                 "title": "Lines",
@@ -1702,20 +1702,20 @@
                 "add_line_finish": "To finish a line, press `{return}` or click again on the last node.",
                 "modify_line_h": "Modifying Lines",
                 "modify_line_dragnode": "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations.",
-                "modify_line_addnode": "You can also create new nodes along a line either by {leftclick}**x2** double-clicking on the line or by dragging the small triangles at the midpoints between nodes.",
+                "modify_line_addnode": "You can also create new nodes along a line by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping the line, or by dragging the small triangles at the midpoints between nodes.",
                 "connect_line_h": "Connecting Lines",
                 "connect_line": "Having roads connected properly is important for the map and essential for providing driving directions.",
                 "connect_line_display": "The connections between roads are drawn with gray circles. The endpoints of a line are drawn with larger white circles if they don't connect to anything.",
                 "connect_line_drag": "To connect a line to another feature, drag one of the line's nodes onto the other feature until both features snap together. Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features.",
                 "connect_line_tag": "If you know that the connection has traffic lights or crosswalks, you can add them by selecting the connecting node and using the feature editor to select the correct feature's type.",
                 "disconnect_line_h": "Disconnecting Lines",
-                "disconnect_line_command": "To disconnect a road from another feature, {rightclick} right-click the connecting node and select the {disconnect_icon} **{disconnect}** command from the editing menu.",
+                "disconnect_line_command": "To disconnect a road from another feature, {rightclick} right-click or {longpress_icon} long-press the connecting node and select the {disconnect_icon} **{disconnect}** command from the edit menu.",
                 "move_line_h": "Moving Lines",
-                "move_line_command": "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the editing menu. Then move the mouse, and {leftclick} left-click to place the line in a new location.",
+                "move_line_command": "To move an entire line, {rightclick} right-click the line and select the {move_icon} **{move}** command from the edit menu. Then move the mouse, and {leftclick} left-click to place the line in a new location.",
                 "move_line_connected": "Lines that are connected to other features will stay connected as you move the line to a new location. iD may prevent you from moving a line across another connected line.",
                 "delete_line_h": "Deleting Lines",
                 "delete_line": "If a line is entirely incorrect, for example a road that doesn't exist in the real world, it's OK to delete it. Be careful when deleting features: the background imagery you are using might be outdated, and a road that looks wrong could simply be newly built.",
-                "delete_line_command": "To delete a line, {rightclick} right-click on the line to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+                "delete_line_command": "To delete a line, {rightclick} right-click or {longpress_icon} long-press the line to show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "areas": {
                 "title": "Areas",
@@ -1727,13 +1727,13 @@
                 "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
                 "add_area_finish": "To finish an area, press `{return}` or click again on either the first or last node.",
                 "square_area_h": "Square Corners",
-                "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the editing menu.",
+                "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click or {longpress_icon} long-press the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the edit menu.",
                 "modify_area_h": "Modifying Areas",
                 "modify_area_dragnode": "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations.",
                 "modify_area_addnode": "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes.",
                 "delete_area_h": "Deleting Areas",
                 "delete_area": "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built.",
-                "delete_area_command": "To delete an area, {rightclick} right-click on the area to select it and show the edit menu, then use the {delete_icon} **{delete}** command."
+                "delete_area_command": "To delete an area, {rightclick} right-click or {longpress_icon} long-press the area to show the edit menu, then use the {delete_icon} **{delete}** command."
             },
             "relations": {
                 "title": "Relations",

From a4f3cd3fa3f3cf467558642a9eb3e3c5813f7885 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 10:54:21 -0400
Subject: [PATCH 22/30] Make tap circle larger in longpress icon

---
 svg/iD-sprite/graphics/walkthrough-longpress.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/svg/iD-sprite/graphics/walkthrough-longpress.svg b/svg/iD-sprite/graphics/walkthrough-longpress.svg
index 0a7b40c265..4e4e19620f 100644
--- a/svg/iD-sprite/graphics/walkthrough-longpress.svg
+++ b/svg/iD-sprite/graphics/walkthrough-longpress.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M8.65123202,9.98761443 C5.89664863,9.7949952 3.81976633,7.40581541 4.01238557,4.65123202 C4.2050048,1.89664863 6.59418459,-0.180233669 9.34876798,0.0123855661 C12.1033514,0.205004801 14.1802337,2.59418459 13.9876144,5.34876798 C13.7949952,8.10335137 11.4058154,10.1802337 8.65123202,9.98761443 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"/>
-    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"/>
+    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"/>
+    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"/>
 </svg>

From f5d280682e4590953bca11ac758cbfc44984ab0d Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 10:57:59 -0400
Subject: [PATCH 23/30] Add mousewheel icon to help and walkthrough

---
 data/core.yaml                                    | 4 ++--
 dist/locales/en.json                              | 4 ++--
 modules/ui/intro/helper.js                        | 1 +
 svg/iD-sprite/graphics/walkthrough-mousewheel.svg | 5 +++++
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 svg/iD-sprite/graphics/walkthrough-mousewheel.svg

diff --git a/data/core.yaml b/data/core.yaml
index 9fb6fd55d2..27680bc3f2 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1306,7 +1306,7 @@ en:
       title: Overview
       navigation_h: "Navigation"
       navigation_drag: "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard."
-      navigation_zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard."
+      navigation_zoom: "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard."
       features_h: "Map Features"
       features: "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*."
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -1934,7 +1934,7 @@ en:
       map_info: "The main map area shows OpenStreetMap data on top of a background."
       drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       drag_touch: "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
-      zoom: "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
+      zoom: "You can zoom the map by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
       zoom_touch: "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 7ac79e1975..c8c53aa001 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1641,7 +1641,7 @@
                 "title": "Overview",
                 "navigation_h": "Navigation",
                 "navigation_drag": "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard.",
-                "navigation_zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard.",
+                "navigation_zoom": "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard.",
                 "features_h": "Map Features",
                 "features": "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*.",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -2409,7 +2409,7 @@
                 "map_info": "The main map area shows OpenStreetMap data on top of a background.",
                 "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "drag_touch": "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
-                "zoom": "You can zoom the map by scrolling with a mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
+                "zoom": "You can zoom the map by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "zoom_touch": "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 4d166f6e70..580a4ccee6 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -75,6 +75,7 @@ export function helpString(id, replacements) {
         save_icon: icon('#iD-icon-save', 'pre-text'),
         leftclick: icon('#iD-walkthrough-mouse-left', 'pre-text operation'),
         rightclick: icon('#iD-walkthrough-mouse-right', 'pre-text operation'),
+        mousewheel_icon: icon('#iD-walkthrough-mousewheel', 'pre-text operation'),
         tap_icon: icon('#iD-walkthrough-tap', 'pre-text operation'),
         doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
         longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
diff --git a/svg/iD-sprite/graphics/walkthrough-mousewheel.svg b/svg/iD-sprite/graphics/walkthrough-mousewheel.svg
new file mode 100644
index 0000000000..38d510b6ab
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-mousewheel.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M10,1.1 C7.29380473,1.1 5.1,3.29380473 5.1,6 L5.1,14 C5.1,16.7061953 7.29380473,18.9 10,18.9 C12.7061953,18.9 14.9,16.7061953 14.9,14 L14.9,6 C14.9,3.29380473 12.7061953,1.1 10,1.1 Z M10,0 C13.3137085,-6.08718376e-16 16,2.6862915 16,6 L16,14 C16,17.3137085 13.3137085,20 10,20 C6.6862915,20 4,17.3137085 4,14 L4,6 C4,2.6862915 6.6862915,6.08718376e-16 10,0 Z M10,3.5 C9.44771525,3.5 9,3.94771525 9,4.5 L9,8.5 C9,9.05228475 9.44771525,9.5 10,9.5 C10.5522847,9.5 11,9.05228475 11,8.5 L11,4.5 C11,3.94771525 10.5522847,3.5 10,3.5 Z M10,2.5 C11.1045695,2.5 12,3.3954305 12,4.5 L12,8.5 C12,9.6045695 11.1045695,10.5 10,10.5 C8.8954305,10.5 8,9.6045695 8,8.5 L8,4.5 C8,3.3954305 8.8954305,2.5 10,2.5 Z" fill="inherit"></path>
+    <path d="M10,3.5 C10.5522847,3.5 11,3.94771525 11,4.5 L11,8.5 C11,9.05228475 10.5522847,9.5 10,9.5 C9.44771525,9.5 9,9.05228475 9,8.5 L9,4.5 C9,3.94771525 9.44771525,3.5 10,3.5 Z" fill="currentColor"></path>
+</svg>

From 31740f1ebbd175cf00ee9513833282b14917c6e3 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 11:26:42 -0400
Subject: [PATCH 24/30] Add pinch-to-zoom icon to help and walkthrough

---
 data/core.yaml                                     | 4 ++--
 dist/locales/en.json                               | 4 ++--
 modules/ui/intro/helper.js                         | 1 +
 svg/iD-sprite/graphics/walkthrough-pinch-apart.svg | 5 +++++
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 svg/iD-sprite/graphics/walkthrough-pinch-apart.svg

diff --git a/data/core.yaml b/data/core.yaml
index 27680bc3f2..ab32e21871 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1306,7 +1306,7 @@ en:
       title: Overview
       navigation_h: "Navigation"
       navigation_drag: "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard."
-      navigation_zoom: "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard."
+      navigation_zoom: "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by {pinch_icon} pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard."
       features_h: "Map Features"
       features: "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*."
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -1935,7 +1935,7 @@ en:
       drag: "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       drag_touch: "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
       zoom: "You can zoom the map by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**"
-      zoom_touch: "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
+      zoom_touch: "You can zoom the map by {pinch_icon} pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index c8c53aa001..4776c260ba 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1641,7 +1641,7 @@
                 "title": "Overview",
                 "navigation_h": "Navigation",
                 "navigation_drag": "You can drag the map by holding down the {leftclick} left mouse button and moving the mouse around, or by {touchdrag_icon} dragging on a touchscreen. You can also use the `↓`, `↑`, `←`, `→` arrow keys on a keyboard.",
-                "navigation_zoom": "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard.",
+                "navigation_zoom": "You can zoom in or out by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by {pinch_icon} pinching with two fingers on a touchscreen. You can also press the {plus} / {minus} buttons along the side of the map or the `+`, `-` keys on a keyboard.",
                 "features_h": "Map Features",
                 "features": "We use the word *features* to describe things that appear on the map, such as roads, buildings, or points of interest. Anything in the real world can be mapped as a feature on OpenStreetMap. Map features are represented on the map using *points*, *lines*, or *areas*.",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
@@ -2410,7 +2410,7 @@
                 "drag": "You can click-and-drag the map with the {leftclick} left mouse button to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "drag_touch": "You can {touchdrag_icon} tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
                 "zoom": "You can zoom the map by scrolling with a {mousewheel_icon} mouse wheel or trackpad, or by pressing the {plus} / {minus} buttons. **Zoom the map!**",
-                "zoom_touch": "You can zoom the map by pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
+                "zoom_touch": "You can zoom the map by {pinch_icon} pinching it with two fingers, {doubletap_icon} double-tapping a location, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 580a4ccee6..43bd9a9a6a 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -80,6 +80,7 @@ export function helpString(id, replacements) {
         doubletap_icon: icon('#iD-walkthrough-doubletap', 'pre-text operation'),
         longpress_icon: icon('#iD-walkthrough-longpress', 'pre-text operation'),
         touchdrag_icon: icon('#iD-walkthrough-touchdrag', 'pre-text operation'),
+        pinch_icon: icon('#iD-walkthrough-pinch-apart', 'pre-text operation'),
 
         // insert keys; may be localized and platform-dependent
         shift: uiCmd.display('⇧'),
diff --git a/svg/iD-sprite/graphics/walkthrough-pinch-apart.svg b/svg/iD-sprite/graphics/walkthrough-pinch-apart.svg
new file mode 100644
index 0000000000..617fe704a7
--- /dev/null
+++ b/svg/iD-sprite/graphics/walkthrough-pinch-apart.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M6,12 L6,8 L4,8 L2,6 L6.91268923,-1.59872116e-14 L11.9126892,6 L10,8 L8,8 L8,12 L10,12 L12,14 L6.95634462,20 L2,14 L4,12 L6,12 Z M6.86049281,16.9950458 C7.96232617,17.0720935 8.91799808,16.2413405 8.99504577,15.1395072 C9.07209347,14.0376738 8.24134055,13.0820019 7.13950719,13.0049542 C6.03767383,12.9279065 5.08200192,13.7586595 5.00495423,14.8604928 C4.92790653,15.9623262 5.75865945,16.9179981 6.86049281,16.9950458 Z M6.86049281,6.99504577 C7.96232617,7.07209347 8.91799808,6.24134055 8.99504577,5.13950719 C9.07209347,4.03767383 8.24134055,3.08200192 7.13950719,3.00495423 C6.03767383,2.92790653 5.08200192,3.75865945 5.00495423,4.86049281 C4.92790653,5.96232617 5.75865945,6.91799808 6.86049281,6.99504577 Z" fill="currentColor"/>
+    <path d="M6,5 C6.00519002,4.49349619 6.41999983,4.08710108 6.92650363,4.0922911 C7.17456075,4.09483288 7.41100871,4.19775003 7.58190584,4.37756372 L11.9751431,9 C11.9917144,8.33333333 12.3333333,8 13,8 C13.6666667,8 14,8.66666667 14,10 C14,9.44771525 14.4477153,9 15,9 C15.5522847,9 16,9.44771525 16,10 L16.0616257,11 C16.0616257,10.4477153 16.5093409,10 17.0616257,10 C17.6139104,10 17.9502861,10.5469022 17.9502861,11.099187 L17.9502861,13.6849734 C17.9502861,15.8941074 16.8309668,18 14.6218328,18 C13.8878155,18.000009 12,18 11,17 C10,16 7.96481899,16 7.42419436,16 C6,16 5,15 7,14 C9,13 11,15 11,13 C11,11 5.98821303,6.15031261 6,5 Z" fill="inherit"/>
+</svg>

From 27faeae96a74a286008a22e3ef32cb53d8b257c6 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 12:21:08 -0400
Subject: [PATCH 25/30] Add touch info to keyboard shortcuts screen

---
 data/shortcuts.json     | 6 +++---
 modules/ui/shortcuts.js | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/data/shortcuts.json b/data/shortcuts.json
index 7620679d9f..c235a1e182 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -107,7 +107,7 @@
             "text": "shortcuts.browsing.selecting.title"
           },
           {
-            "shortcuts": ["Left-click", "shortcuts.key.space"],
+            "shortcuts": ["Left-click", "Tap", "shortcuts.key.space"],
             "text": "shortcuts.browsing.selecting.select_one"
           },
           {
@@ -131,7 +131,7 @@
             "text": "shortcuts.browsing.with_selected.title"
           },
           {
-            "shortcuts": ["Right-click", "☰"],
+            "shortcuts": ["Right-click", "Long-press", "☰"],
             "text": "shortcuts.browsing.with_selected.edit_menu"
           },
           {
@@ -193,7 +193,7 @@
             "text": "shortcuts.editing.drawing.add_note"
           },
           {
-            "shortcuts": ["Left-click", "shortcuts.key.space"],
+            "shortcuts": ["Left-click", "Tap", "shortcuts.key.space"],
             "text": "shortcuts.editing.drawing.place_point"
           },
           {
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 60ed04496b..4612682803 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -199,6 +199,12 @@ export function uiShortcuts(context) {
                 if (click && click[1]) {   // replace "left_click", "right_click" with mouse icon
                     selection
                         .call(svgIcon('#iD-walkthrough-mouse-' + click[1], 'operation'));
+                } else if (d.shortcut.toLowerCase() === 'long-press') {
+                    selection
+                        .call(svgIcon('#iD-walkthrough-longpress', 'longpress operation'));
+                } else if (d.shortcut.toLowerCase() === 'tap') {
+                    selection
+                        .call(svgIcon('#iD-walkthrough-tap', 'tap operation'));
                 } else {
                     selection
                         .append('kbd')

From a3475251b80da3f7cd6a100dfaad61e43cd9592e Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 13:22:32 -0400
Subject: [PATCH 26/30] Update more of the documentation for touch input

---
 data/core.yaml           | 36 ++++++++++++++++++++----------------
 dist/locales/en.json     | 36 ++++++++++++++++++++----------------
 modules/ui/panes/help.js |  5 ++++-
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index ab32e21871..12efc71949 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1313,8 +1313,9 @@ en:
     editing:
       title: "Editing & Saving"
       select_h: "Select"
-      select_left_click: "{leftclick} Left-click or {tap_icon} tap on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address."
-      select_right_click: "{rightclick} Right-click or {longpress_icon} long-press on a feature to display the edit menu, which shows the commands that are available, such as rotating, moving, and deleting."
+      select_left_click: "{leftclick} Left-click or {tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar."
+      select_right_click: "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete."
+      select_space: "The `{space}` key can also be used in place of left-click when selecting and drawing."
       multiselect_h: "Multiselect"
       multiselect_shift_click: "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items."
       multiselect_lasso: "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected."
@@ -1347,10 +1348,10 @@ en:
       title: Points
       intro: "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there."
       add_point_h: "Adding Points"
-      add_point: "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol."
-      add_point_finish: "To place the new point on the map with a mouse, position the cursor where the point should go, then {leftclick} left-click or press `{space}`. On a touchscreen, simply {tap_icon} tap the location."
+      add_point: "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`."
+      add_point_finish: "Next, place the new point on the map. With a mouse, position the cursor where the point should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location."
       move_point_h: "Moving Points"
-      move_point: "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location."
+      move_point: "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen."
       delete_point_h: "Deleting Points"
       delete_point: "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it."
       delete_point_command: "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1358,11 +1359,12 @@ en:
       title: Lines
       intro: "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent."
       add_line_h: "Adding Lines"
-      add_line: "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol."
-      add_line_draw: "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
-      add_line_finish: "To finish a line, press `{return}` or click again on the last node."
+      add_line: "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`."
+      add_line_draw: "Next, mark the line's starting location. With a mouse, position the cursor where the line should begin and {leftclick} left-click to place a node. On a touchscreen, {tap_icon} tap the location."
+      add_line_continue: "Continue placing nodes by {leftclick} clicking or {tap_icon} tapping along the shape of the line. While drawing, you can zoom in or drag the map in order to add more detail."
+      add_line_finish: "To finish a line, click or tap on the last node again or press `{return}`."
       modify_line_h: "Modifying Lines"
-      modify_line_dragnode: "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations."
+      modify_line_dragnode: "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations."
       modify_line_addnode: "You can also create new nodes along a line by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping the line, or by dragging the small triangles at the midpoints between nodes."
       connect_line_h: "Connecting Lines"
       connect_line: "Having roads connected properly is important for the map and essential for providing driving directions."
@@ -1383,14 +1385,15 @@ en:
       point_or_area_h: "Points or Areas?"
       point_or_area: "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building."
       add_area_h: "Adding Areas"
-      add_area_command: "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol."
-      add_area_draw: "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail."
-      add_area_finish: "To finish an area, press `{return}` or click again on either the first or last node."
+      add_area_command: "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`."
+      add_area_draw: "Next, place the first corner of the area. With a mouse, position the cursor over any corner and {leftclick} left-click to place a node. On a touchscreen, {tap_icon} tap the location."
+      add_area_continue: "Continue placing nodes by {leftclick} clicking or {tap_icon} tapping along the edge of the area. While drawing, you can zoom in or drag the map in order to add more detail."
+      add_area_finish: "To finish an area, click or tap on the first or last node again or press `{return}`."
       square_area_h: "Square Corners"
       square_area_command: "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click or {longpress_icon} long-press the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the edit menu."
       modify_area_h: "Modifying Areas"
-      modify_area_dragnode: "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations."
-      modify_area_addnode: "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes."
+      modify_area_dragnode: "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations."
+      modify_area_addnode: "You can also create new nodes along an area by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping an edge, or by dragging the small triangles at the midpoints between nodes."
       delete_area_h: "Deleting Areas"
       delete_area: "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built."
       delete_area_command: "To delete an area, {rightclick} right-click or {longpress_icon} long-press the area to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1422,8 +1425,9 @@ en:
       title: Notes
       intro: "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, open the {data_icon} **{map_data}** panel and enable the {osm_notes} layer."
       add_note_h: "Adding Notes"
-      add_note: "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`."
-      move_note: "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location."
+      add_note: "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`."
+      place_note: "Next, place the new note on the map. With a mouse, position the cursor where the note should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location."
+      move_note: "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen. Only new notes can be moved."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
       save_note_h: "Saving Notes"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 4776c260ba..cf2684c275 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1649,8 +1649,9 @@
             "editing": {
                 "title": "Editing & Saving",
                 "select_h": "Select",
-                "select_left_click": "{leftclick} Left-click or {tap_icon} tap on a feature to select it. This will highlight it with a pulsing glow, and the sidebar will display details about that feature, such as its name or address.",
-                "select_right_click": "{rightclick} Right-click or {longpress_icon} long-press on a feature to display the edit menu, which shows the commands that are available, such as rotating, moving, and deleting.",
+                "select_left_click": "{leftclick} Left-click or {tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar.",
+                "select_right_click": "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete.",
+                "select_space": "The `{space}` key can also be used in place of left-click when selecting and drawing.",
                 "multiselect_h": "Multiselect",
                 "multiselect_shift_click": "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items.",
                 "multiselect_lasso": "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected.",
@@ -1685,10 +1686,10 @@
                 "title": "Points",
                 "intro": "*Points* can be used to represent features such as shops, restaurants, and monuments. They mark a specific location, and describe what's there.",
                 "add_point_h": "Adding Points",
-                "add_point": "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`. This will change the mouse cursor to a cross symbol.",
-                "add_point_finish": "To place the new point on the map with a mouse, position the cursor where the point should go, then {leftclick} left-click or press `{space}`. On a touchscreen, simply {tap_icon} tap the location.",
+                "add_point": "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`.",
+                "add_point_finish": "Next, place the new point on the map. With a mouse, position the cursor where the point should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location.",
                 "move_point_h": "Moving Points",
-                "move_point": "To move a point, place the mouse cursor over the point, then press and hold the {leftclick} left mouse button while dragging the point to its new location.",
+                "move_point": "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen.",
                 "delete_point_h": "Deleting Points",
                 "delete_point": "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it.",
                 "delete_point_command": "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1697,11 +1698,12 @@
                 "title": "Lines",
                 "intro": "*Lines* are used to represent features such as roads, railroads, and rivers. Lines should be drawn down the center of the feature that they represent.",
                 "add_line_h": "Adding Lines",
-                "add_line": "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`. This will change the mouse cursor to a cross symbol.",
-                "add_line_draw": "Next, position the mouse cursor where the line should begin and {leftclick} left-click or press `{space}` to begin placing nodes along the line. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
-                "add_line_finish": "To finish a line, press `{return}` or click again on the last node.",
+                "add_line": "To add a line, press the {line_icon} **{line}** button on the toolbar above the map, or press the shortcut key `2`.",
+                "add_line_draw": "Next, mark the line's starting location. With a mouse, position the cursor where the line should begin and {leftclick} left-click to place a node. On a touchscreen, {tap_icon} tap the location.",
+                "add_line_continue": "Continue placing nodes by {leftclick} clicking or {tap_icon} tapping along the shape of the line. While drawing, you can zoom in or drag the map in order to add more detail.",
+                "add_line_finish": "To finish a line, click or tap on the last node again or press `{return}`.",
                 "modify_line_h": "Modifying Lines",
-                "modify_line_dragnode": "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first {leftclick} left-click to select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations.",
+                "modify_line_dragnode": "Often you'll see lines that aren't shaped correctly, for example a road that does not match up with the background imagery. To adjust the shape of a line, first select it. All nodes of the line will be drawn as small circles. You can then drag the nodes to better locations.",
                 "modify_line_addnode": "You can also create new nodes along a line by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping the line, or by dragging the small triangles at the midpoints between nodes.",
                 "connect_line_h": "Connecting Lines",
                 "connect_line": "Having roads connected properly is important for the map and essential for providing driving directions.",
@@ -1723,14 +1725,15 @@
                 "point_or_area_h": "Points or Areas?",
                 "point_or_area": "Many features can be represented as points or areas. You should map buildings and property outlines as areas whenever possible. Place points inside a building area to represent businesses, amenities, and other features located inside the building.",
                 "add_area_h": "Adding Areas",
-                "add_area_command": "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`. This will change the mouse cursor to a cross symbol.",
-                "add_area_draw": "Next, position the mouse cursor at one of the corners of the feature and {leftclick} left-click or press `{space}` to begin placing nodes around the outer edge of the area. Continue placing more nodes by clicking or pressing `{space}`. While drawing, you can zoom in or drag the map in order to add more detail.",
-                "add_area_finish": "To finish an area, press `{return}` or click again on either the first or last node.",
+                "add_area_command": "To add an area, press the {area_icon} **{area}** button on the toolbar above the map, or press the shortcut key `3`.",
+                "add_area_draw": "Next, place the first corner of the area. With a mouse, position the cursor over any corner and {leftclick} left-click to place a node. On a touchscreen, {tap_icon} tap the location.",
+                "add_area_continue": "Continue placing nodes by {leftclick} clicking or {tap_icon} tapping along the edge of the area. While drawing, you can zoom in or drag the map in order to add more detail.",
+                "add_area_finish": "To finish an area, click or tap on the first or last node again or press `{return}`.",
                 "square_area_h": "Square Corners",
                 "square_area_command": "Many area features like buildings have square corners. To square the corners of an area, {rightclick} right-click or {longpress_icon} long-press the edge of the area and select the {orthogonalize_icon} **{orthogonalize}** command from the edit menu.",
                 "modify_area_h": "Modifying Areas",
-                "modify_area_dragnode": "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first {leftclick} left-click to select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations.",
-                "modify_area_addnode": "You can also create new nodes along an area either by {leftclick}**x2** double-clicking on the edge of the area or by dragging the small triangles at the midpoints between nodes.",
+                "modify_area_dragnode": "Often you'll see areas that aren't shaped correctly, for example a building that does not match up with the background imagery. To adjust the shape of an area, first select it. All nodes of the area will be drawn as small circles. You can then drag the nodes to better locations.",
+                "modify_area_addnode": "You can also create new nodes along an area by {leftclick}**x2** double-clicking or {doubletap_icon} double-tapping an edge, or by dragging the small triangles at the midpoints between nodes.",
                 "delete_area_h": "Deleting Areas",
                 "delete_area": "If an area is entirely incorrect, for example a building that doesn't exist in the real world, it's OK to delete it. Be cautious when deleting features - the background imagery you are using might be outdated, and a building that looks wrong could simply be newly built.",
                 "delete_area_command": "To delete an area, {rightclick} right-click or {longpress_icon} long-press the area to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1764,8 +1767,9 @@
                 "title": "Notes",
                 "intro": "*Notes* are used to alert other users that a feature requires fixing or attention. Notes mark a specific location on the map. To view existing notes or add new ones, open the {data_icon} **{map_data}** panel and enable the {osm_notes} layer.",
                 "add_note_h": "Adding Notes",
-                "add_note": "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`. This will change the mouse cursor to a cross symbol. To place the new note on the map, position the mouse cursor where the note should go, then {leftclick} left-click or press `{space}`.",
-                "move_note": "Only new notes can be moved. To move a note, place the mouse cursor over the new note, then press and hold the {leftclick} left mouse button while dragging the note to its new location.",
+                "add_note": "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`.",
+                "place_note": "Next, place the new note on the map. With a mouse, position the cursor where the note should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location.",
+                "move_note": "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen. Only new notes can be moved.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
                 "save_note_h": "Saving Notes",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 48924d7d18..e4c4be13df 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -34,6 +34,7 @@ export function uiPaneHelp(context) {
             'select_h',
             'select_left_click',
             'select_right_click',
+            'select_space',
             'multiselect_h',
             'multiselect_shift_click',
             'multiselect_lasso',
@@ -79,6 +80,7 @@ export function uiPaneHelp(context) {
             'add_line_h',
             'add_line',
             'add_line_draw',
+            'add_line_continue',
             'add_line_finish',
             'modify_line_h',
             'modify_line_dragnode',
@@ -104,6 +106,7 @@ export function uiPaneHelp(context) {
             'add_area_h',
             'add_area_command',
             'add_area_draw',
+            'add_area_continue',
             'add_area_finish',
             'square_area_h',
             'square_area_command',
@@ -142,13 +145,13 @@ export function uiPaneHelp(context) {
             'intro',
             'add_note_h',
             'add_note',
+            'place_note',
             'move_note',
             'update_note_h',
             'update_note',
             'save_note_h',
             'save_note'
         ]],
-
         ['imagery', [
             'intro',
             'sources_h',

From d3d80bed5fd29ca55e65cac0659e56e2d024dcb6 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 13:30:58 -0400
Subject: [PATCH 27/30] Prioritize the UI button over the hotkey for closing
 the feature editor in the walkthrough Only show one hotkey for closing the
 feature editor in the walkthrough

---
 data/core.yaml       | 10 +++++-----
 dist/locales/en.json | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 12efc71949..0ced740b31 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1949,12 +1949,12 @@ en:
       editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
       preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}."
       fields_townhall: "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address."
-      close_townhall: "**Close the feature editor by pressing `{esc}` or the {button} button in the upper corner.**"
+      close_townhall: "**Close the feature editor by pressing the {button} button in the upper corner or `{esc}`.**"
       search_street: "You can also search for features in the current view, or worldwide. **Search for '{name}'.**"
       choose_street: "**Choose {name} from the list to select it.**"
       selected_street: "Great! {name} is now selected."
       street_different_fields: "The fields shown for a street are different than the fields that were shown for the town hall."
-      editor_street: "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**"
+      editor_street: "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing the {button} button or `{esc}`.**"
       play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
     points:
       title: "Points"
@@ -1967,10 +1967,10 @@ en:
       feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
       fields_info: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure."
       add_name: "Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**"
-      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
+      add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press the {button} button or `{esc}` to close the feature editor.**"
       reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**"
       update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**"
-      update_close: "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
+      update_close: "**When you are finished updating the cafe, press the {button} button or `{esc}` to close the feature editor.**"
       rightclick: "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**"
       edit_menu_touch: "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**"
       delete: "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**"
@@ -2009,7 +2009,7 @@ en:
       choose_category_road: "**Select {category} from the list.**"
       choose_preset_residential: "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**"
       retry_preset_residential: "You didn't select the {preset} type. **Press this button to choose again.**"
-      name_road: "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**"
+      name_road: "**Give this road a name, then press the {button} button or `{esc}` to close the feature editor.**"
       did_name_road: "Looks good! Next we will learn how to update the shape of a line."
       update_line: "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right."
       add_node: "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index cf2684c275..7304f02f09 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2424,12 +2424,12 @@
                 "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",
                 "preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.",
                 "fields_townhall": "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address.",
-                "close_townhall": "**Close the feature editor by pressing `{esc}` or the {button} button in the upper corner.**",
+                "close_townhall": "**Close the feature editor by pressing the {button} button in the upper corner or `{esc}`.**",
                 "search_street": "You can also search for features in the current view, or worldwide. **Search for '{name}'.**",
                 "choose_street": "**Choose {name} from the list to select it.**",
                 "selected_street": "Great! {name} is now selected.",
                 "street_different_fields": "The fields shown for a street are different than the fields that were shown for the town hall.",
-                "editor_street": "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing `{esc}` or the {button} button.**",
+                "editor_street": "For this selected street, the feature editor shows fields like '{field1}' and '{field2}'. **Close the feature editor by pressing the {button} button or `{esc}`.**",
                 "play": "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
             },
             "points": {
@@ -2443,10 +2443,10 @@
                 "feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
                 "fields_info": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure.",
                 "add_name": "Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe.**",
-                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
+                "add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, press the {button} button or `{esc}` to close the feature editor.**",
                 "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the cafe you just created.**",
                 "update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details.**",
-                "update_close": "**When you are finished updating the cafe, press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
+                "update_close": "**When you are finished updating the cafe, press the {button} button or `{esc}` to close the feature editor.**",
                 "rightclick": "You can {rightclick} right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed.{br}A right-click might be the same as a control-click or two-finger click. **Right-click to select the point you created and show the edit menu.**",
                 "edit_menu_touch": "You can {longpress_icon} long-press on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Press-and-hold the point you created to show the edit menu.**",
                 "delete": "It's OK to delete features that don't exist in the real world.{br}Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Press the {delete_icon} {delete} button to remove the point.**",
@@ -2487,7 +2487,7 @@
                 "choose_category_road": "**Select {category} from the list.**",
                 "choose_preset_residential": "There are many different types of roads, but this one is a residential road. **Choose the {preset} type.**",
                 "retry_preset_residential": "You didn't select the {preset} type. **Press this button to choose again.**",
-                "name_road": "**Give this road a name, then press `{esc}`, `{return}`, or the {button} button to close the feature editor.**",
+                "name_road": "**Give this road a name, then press the {button} button or `{esc}` to close the feature editor.**",
                 "did_name_road": "Looks good! Next we will learn how to update the shape of a line.",
                 "update_line": "Sometimes you will need to change the shape of an existing line. Here is a road that doesn't look quite right.",
                 "add_node": "We can add some nodes to this line to improve its shape. One way to add a node is to double-click the line where you want to add a node. **Double-click on the line to create a new node.**",

From d734edb646c2c3c4f8bfa66dfe8f52184b5d8a71 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 13:33:17 -0400
Subject: [PATCH 28/30] Add leftclick icon

---
 data/core.yaml       | 2 +-
 dist/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 0ced740b31..36e96b37bb 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1943,7 +1943,7 @@ en:
       features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
       points_lines_areas: "Map features are represented using *points, lines, or areas.*"
       nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
-      click_townhall: "All features on the map can be selected by clicking on them. **Click the point to select it.**"
+      click_townhall: "All features on the map can be selected by {leftclick} clicking on them. **Click the point to select it.**"
       tap_townhall: "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**"
       selected_townhall: "Great! The point is now selected. Selected features are drawn with a pulsing glow."
       editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 7304f02f09..ea858ac4bb 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -2418,7 +2418,7 @@
                 "features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
                 "points_lines_areas": "Map features are represented using *points, lines, or areas.*",
                 "nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
-                "click_townhall": "All features on the map can be selected by clicking on them. **Click the point to select it.**",
+                "click_townhall": "All features on the map can be selected by {leftclick} clicking on them. **Click the point to select it.**",
                 "tap_townhall": "All features on the map can be selected by {tap_icon} tapping on them. **Tap the point to select it.**",
                 "selected_townhall": "Great! The point is now selected. Selected features are drawn with a pulsing glow.",
                 "editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",

From 85e02dea8705b585039cb668e62ecac0200df64d Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 14:14:45 -0400
Subject: [PATCH 29/30] Add info about touchscreen multiselection to the help
 pane

---
 data/core.yaml           | 3 ++-
 dist/locales/en.json     | 3 ++-
 modules/ui/panes/help.js | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 36e96b37bb..e0cb00c69d 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1317,7 +1317,8 @@ en:
       select_right_click: "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete."
       select_space: "The `{space}` key can also be used in place of left-click when selecting and drawing."
       multiselect_h: "Multiselect"
-      multiselect_shift_click: "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items."
+      multiselect: "Selecting multiple features together lets you quickly edit them all at once."
+      multiselect_shift_click: "With a mouse and keyboard, hold `{shift}` and {leftclick} left-click features to add them to the selection. On a touchscreen, {longpress_icon} tap-and-hold one feature while {tap_icon} tapping additional features with another finger."
       multiselect_lasso: "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected."
       undo_redo_h: "Undo & Redo"
       undo_redo: "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by pressing the {undo_icon} **{undo}** button, and redo them by pressing the {redo_icon} **{redo}** button."
diff --git a/dist/locales/en.json b/dist/locales/en.json
index ea858ac4bb..9e1fda685b 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1653,7 +1653,8 @@
                 "select_right_click": "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete.",
                 "select_space": "The `{space}` key can also be used in place of left-click when selecting and drawing.",
                 "multiselect_h": "Multiselect",
-                "multiselect_shift_click": "`{shift}`+{leftclick} left-click to select several features together.  This makes it easier to move or delete multiple items.",
+                "multiselect": "Selecting multiple features together lets you quickly edit them all at once.",
+                "multiselect_shift_click": "With a mouse and keyboard, hold `{shift}` and {leftclick} left-click features to add them to the selection. On a touchscreen, {longpress_icon} tap-and-hold one feature while {tap_icon} tapping additional features with another finger.",
                 "multiselect_lasso": "Another way to select multiple features is to hold down the `{shift}` key, then press and hold down the {leftclick} left mouse button and drag the mouse to draw a selection lasso. All of the points inside the lasso area will be selected.",
                 "undo_redo_h": "Undo & Redo",
                 "undo_redo": "Your edits are stored locally in your browser until you choose to save them to the OpenStreetMap server. You can undo edits by pressing the {undo_icon} **{undo}** button, and redo them by pressing the {redo_icon} **{redo}** button.",
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index e4c4be13df..a77ef0c811 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -36,6 +36,7 @@ export function uiPaneHelp(context) {
             'select_right_click',
             'select_space',
             'multiselect_h',
+            'multiselect',
             'multiselect_shift_click',
             'multiselect_lasso',
             'undo_redo_h',

From 99383355b21a310aba92529dfb7bdbc006381a95 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 13 Jul 2020 14:33:49 -0400
Subject: [PATCH 30/30] Update doubletap icon Use consistent close button
 Update a few strings

---
 data/core.yaml                                   | 8 ++++----
 dist/locales/en.json                             | 8 ++++----
 modules/ui/intro/area.js                         | 2 +-
 modules/ui/intro/building.js                     | 6 +++---
 modules/ui/intro/helper.js                       | 2 --
 modules/ui/intro/line.js                         | 2 +-
 modules/ui/intro/point.js                        | 2 +-
 svg/iD-sprite/graphics/walkthrough-doubletap.svg | 4 ++--
 8 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index e0cb00c69d..80d36ba07e 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1315,7 +1315,7 @@ en:
       select_h: "Select"
       select_left_click: "{leftclick} Left-click or {tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar."
       select_right_click: "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete."
-      select_space: "The `{space}` key can also be used in place of left-click when selecting and drawing."
+      select_space: "The `{space}` key can also be used instead of left-click when selecting and drawing."
       multiselect_h: "Multiselect"
       multiselect: "Selecting multiple features together lets you quickly edit them all at once."
       multiselect_shift_click: "With a mouse and keyboard, hold `{shift}` and {leftclick} left-click features to add them to the selection. On a touchscreen, {longpress_icon} tap-and-hold one feature while {tap_icon} tapping additional features with another finger."
@@ -1352,7 +1352,7 @@ en:
       add_point: "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`."
       add_point_finish: "Next, place the new point on the map. With a mouse, position the cursor where the point should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location."
       move_point_h: "Moving Points"
-      move_point: "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen."
+      move_point: "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap-and-drag it on a touchscreen."
       delete_point_h: "Deleting Points"
       delete_point: "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it."
       delete_point_command: "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1428,7 +1428,7 @@ en:
       add_note_h: "Adding Notes"
       add_note: "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`."
       place_note: "Next, place the new note on the map. With a mouse, position the cursor where the note should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location."
-      move_note: "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen. Only new notes can be moved."
+      move_note: "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap-and-drag it on a touchscreen. Only new notes can be moved."
       update_note_h: "Closing, Reopening, and Commenting"
       update_note: "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved."
       save_note_h: "Saving Notes"
@@ -2051,7 +2051,7 @@ en:
       retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
       choose_category_building: "**Choose {category} from the list.**"
       choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**"
-      close: "**Press `{esc}` or the {apply} button to close the feature editor.**"
+      close: "**Press the {button} button or `{esc}` to close the feature editor.**"
       rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**"
       edit_menu_building_touch: "**{longpress_icon} Long-press the building you created to show the edit menu.**"
       square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 9e1fda685b..2adb27e112 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1651,7 +1651,7 @@
                 "select_h": "Select",
                 "select_left_click": "{leftclick} Left-click or {tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar.",
                 "select_right_click": "{rightclick} Right-click or {longpress_icon} long-press a feature to display the edit menu, which provides commands such as copy, rotate, and delete.",
-                "select_space": "The `{space}` key can also be used in place of left-click when selecting and drawing.",
+                "select_space": "The `{space}` key can also be used instead of left-click when selecting and drawing.",
                 "multiselect_h": "Multiselect",
                 "multiselect": "Selecting multiple features together lets you quickly edit them all at once.",
                 "multiselect_shift_click": "With a mouse and keyboard, hold `{shift}` and {leftclick} left-click features to add them to the selection. On a touchscreen, {longpress_icon} tap-and-hold one feature while {tap_icon} tapping additional features with another finger.",
@@ -1690,7 +1690,7 @@
                 "add_point": "To add a point, press the {point_icon} **{point}** button on the toolbar above the map, or press the shortcut key `1`.",
                 "add_point_finish": "Next, place the new point on the map. With a mouse, position the cursor where the point should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location.",
                 "move_point_h": "Moving Points",
-                "move_point": "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen.",
+                "move_point": "To move a point, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap-and-drag it on a touchscreen.",
                 "delete_point_h": "Deleting Points",
                 "delete_point": "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it.",
                 "delete_point_command": "To delete a point, {rightclick} right-click or {longpress_icon} long-press the point to show the edit menu, then use the {delete_icon} **{delete}** command."
@@ -1770,7 +1770,7 @@
                 "add_note_h": "Adding Notes",
                 "add_note": "To add a new note, press the {note_icon} **{note}** button on the toolbar above the map, or press the shortcut key `{add_note_key}`.",
                 "place_note": "Next, place the new note on the map. With a mouse, position the cursor where the note should go and {leftclick} left-click. On a touchscreen, {tap_icon} tap the location.",
-                "move_note": "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap and drag it on a touchscreen. Only new notes can be moved.",
+                "move_note": "To move a note, {leftclick} left-click and drag it with a mouse or {touchdrag_icon} tap-and-drag it on a touchscreen. Only new notes can be moved.",
                 "update_note_h": "Closing, Reopening, and Commenting",
                 "update_note": "An existing note can be updated by closing it, reopening it, or adding a comment to it. Closing a note indicates that the problem has been resolved. Reopening a note indicates that the original issue is not resolved.",
                 "save_note_h": "Saving Notes",
@@ -2530,7 +2530,7 @@
                 "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!",
                 "choose_category_building": "**Choose {category} from the list.**",
                 "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**",
-                "close": "**Press `{esc}` or the {apply} button to close the feature editor.**",
+                "close": "**Press the {button} button or `{esc}` to close the feature editor.**",
                 "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**",
                 "edit_menu_building_touch": "**{longpress_icon} Long-press the building you created to show the edit menu.**",
                 "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**",
diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js
index 8aa81ac675..2eabd6b67b 100644
--- a/modules/ui/intro/area.js
+++ b/modules/ui/intro/area.js
@@ -436,7 +436,7 @@ export function uiIntroArea(context, reveal) {
         });
 
         reveal('.entity-editor-pane',
-            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-apply', 'pre-text') }),
+            helpString('intro.areas.describe_playground', { button: icon('#iD-icon-close', 'pre-text') }),
             { duration: 300 }
         );
 
diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js
index c8cf143930..226127b33a 100644
--- a/modules/ui/intro/building.js
+++ b/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, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
+import { helpString, icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
 
 
 export function uiIntroBuilding(context, reveal) {
@@ -300,7 +300,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close')
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
             );
         }, 500);
 
@@ -628,7 +628,7 @@ export function uiIntroBuilding(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.buildings.close')
+                helpString('intro.buildings.close', { button: icon('#iD-icon-close', 'pre-text') })
             );
         }, 500);
 
diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js
index 43bd9a9a6a..36a4554f28 100644
--- a/modules/ui/intro/helper.js
+++ b/modules/ui/intro/helper.js
@@ -67,8 +67,6 @@ export function helpString(id, replacements) {
         layers_icon: icon('#iD-icon-layers', 'pre-text'),
         data_icon: icon('#iD-icon-data', 'pre-text'),
         inspect: icon('#iD-icon-inspect', 'pre-text'),
-        close: icon('#iD-icon-close', 'pre-text'),
-        apply: icon('#iD-icon-apply', 'pre-text'),
         help_icon: icon('#iD-icon-help', 'pre-text'),
         undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
         redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js
index 821118ccc7..72fcb0ac2b 100644
--- a/modules/ui/intro/line.js
+++ b/modules/ui/intro/line.js
@@ -338,7 +338,7 @@ export function uiIntroLine(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.lines.name_road', { button: icon('#iD-icon-apply', 'pre-text') }),
+                helpString('intro.lines.name_road', { button: icon('#iD-icon-close', 'pre-text') }),
                 { tooltipClass: 'intro-lines-name_road' }
             );
         }, 500);
diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js
index d0655777d4..8aa6fe53af 100644
--- a/modules/ui/intro/point.js
+++ b/modules/ui/intro/point.js
@@ -351,7 +351,7 @@ export function uiIntroPoint(context, reveal) {
 
         timeout(function() {
             reveal('.entity-editor-pane',
-                helpString('intro.points.update_close', { button: icon('#iD-icon-apply', 'pre-text') })
+                helpString('intro.points.update_close', { button: icon('#iD-icon-close', 'pre-text') })
             );
         }, 500);
 
diff --git a/svg/iD-sprite/graphics/walkthrough-doubletap.svg b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
index 68994fa0ee..a783dfc44b 100644
--- a/svg/iD-sprite/graphics/walkthrough-doubletap.svg
+++ b/svg/iD-sprite/graphics/walkthrough-doubletap.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M8.65123202,9.98761443 C5.89664863,9.7949952 3.81976633,7.40581541 4.01238557,4.65123202 C4.2050048,1.89664863 6.59418459,-0.180233669 9.34876798,0.0123855661 C12.1033514,0.205004801 14.1802337,2.59418459 13.9876144,5.34876798 C13.7949952,8.10335137 11.4058154,10.1802337 8.65123202,9.98761443 Z M8.72098562,8.99009155 C10.9246523,9.14418693 12.8359962,7.48268109 12.9900915,5.27901438 C13.1441869,3.07534767 11.4826811,1.16400384 9.27901438,1.00990845 C7.07534767,0.855813065 5.16400384,2.51731891 5.00990845,4.72098562 C4.85581307,6.92465233 6.51731891,8.83599616 8.72098562,8.99009155 Z M8.79073921,7.99256866 C7.13798918,7.87699712 5.8918598,6.44348925 6.00743134,4.79073921 C6.12300288,3.13798918 7.55651075,1.8918598 9.20926079,2.00743134 C10.8620108,2.12300288 12.1081402,3.55651075 11.9925687,5.20926079 C11.8769971,6.86201082 10.4434892,8.1081402 8.79073921,7.99256866 Z M8.86049281,6.99504577 C9.96232617,7.07209347 10.9179981,6.24134055 10.9950458,5.13950719 C11.0720935,4.03767383 10.2413405,3.08200192 9.13950719,3.00495423 C8.03767383,2.92790653 7.08200192,3.75865945 7.00495423,4.86049281 C6.92790653,5.96232617 7.75865945,6.91799808 8.86049281,6.99504577 Z" fill="currentColor"/>
-    <path d="M8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9 C10,8.44771525 10.4477153,8 11,8 C11.5522847,8 12,8.44771525 12,9 L12,10 C12,9.44771525 12.4477153,9 13,9 C13.5522847,9 14,9.44771525 14,10 L14,11 C14,10.4477153 14.4477153,10 15,10 C15.5522847,10 16,10.4477153 16,11 L16,15 C16,17.209134 14.209143,18.999991 12.000009,18.999991 C11.2659918,19 10.5993221,19 10,19 C8.25562789,19 6.75375111,17.7687556 6.41165159,16.058258 L5.19611614,10.9805807 C5.10732158,10.5366079 5.39525043,10.1047146 5.83922323,10.01592 C5.89216058,10.0053326 5.94601429,10 6,10 C6.59719029,10 7.12737961,10.3821388 7.31622777,10.9486833 L8,13 L8,5 Z" fill="inherit"/>
+    <path d="M8.58147843,11.9851373 C5.27597836,11.7539942 2.7837196,8.8869785 3.01486268,5.58147843 C3.24600576,2.27597836 6.1130215,-0.216280402 9.41852157,0.0148626794 C12.7240216,0.246005761 15.2162804,3.1130215 14.9851373,6.41852157 C14.7539942,9.72402164 11.8869785,12.2162804 8.58147843,11.9851373 Z M8.65123202,10.9876144 C11.4058154,11.1802337 13.7949952,9.10335137 13.9876144,6.34876798 C14.1802337,3.59418459 12.1033514,1.2050048 9.34876798,1.01238557 C6.59418459,0.819766331 4.2050048,2.89664863 4.01238557,5.65123202 C3.81976633,8.40581541 5.89664863,10.7949952 8.65123202,10.9876144 Z M8.72098562,9.99009155 C6.51731891,9.83599616 4.85581307,7.92465233 5.00990845,5.72098562 C5.16400384,3.51731891 7.07534767,1.85581307 9.27901438,2.00990845 C11.4826811,2.16400384 13.1441869,4.07534767 12.9900915,6.27901438 C12.8359962,8.48268109 10.9246523,10.1441869 8.72098562,9.99009155 Z M8.86049281,7.99504577 C9.96232617,8.07209347 10.9179981,7.24134055 10.9950458,6.13950719 C11.0720935,5.03767383 10.2413405,4.08200192 9.13950719,4.00495423 C8.03767383,3.92790653 7.08200192,4.75865945 7.00495423,5.86049281 C6.92790653,6.96232617 7.75865945,7.91799808 8.86049281,7.99504577 Z" fill="currentColor"/>
+    <path d="M8,6 C8,5.44771525 8.44771525,5 9,5 C9.55228475,5 10,5.44771525 10,6 L10,10 C10,9.44771525 10.4477153,9 11,9 C11.5522847,9 12,9.44771525 12,10 L12,11 C12,10.4477153 12.4477153,10 13,10 C13.5522847,10 14,10.4477153 14,11 L14,12 C14,11.4477153 14.4477153,11 15,11 C15.5522847,11 16,11.4477153 16,12 L16,16 C16,18.209134 14.209143,19.999991 12.000009,19.999991 C11.2659918,20 10.5993221,20 10,20 C8.25562789,20 6.75375111,18.7687556 6.41165159,17.058258 L5.19611614,11.9805807 C5.10732158,11.5366079 5.39525043,11.1047146 5.83922323,11.01592 C5.89216058,11.0053326 5.94601429,11 6,11 C6.59719029,11 7.12737961,11.3821388 7.31622777,11.9486833 L8,14 L8,6 Z" fill="inherit"/>
 </svg>