From 5329e803e2de99fc39f6c3c82da8ce3a44a7af67 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 27 Sep 2021 17:35:24 +0100
Subject: [PATCH] Add keyboard handling to tourGuide - escape/enter

---
 .../editor-client/locales/en-US/editor.json   |  4 +++
 .../editor-client/src/js/ui/tour/tourGuide.js | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index 33747b96d..95c803216 100755
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -1133,6 +1133,10 @@
         "preview": "UI Preview",
         "defaultValue": "Default value"
     },
+    "tourGuide": {
+        "start": "Start",
+        "next": "Next"
+    },
     "languages" : {
         "de": "German",
         "en-US": "English",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
index ddb89431e..755d264d7 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js
@@ -95,6 +95,7 @@ RED.tourGuide = (function() {
 
         function endTour(err) {
             $(window).off("resize.red-ui-tourGuide");
+            $(document).off('keydown.red-ui-tourGuide');
             if (popover) {
                 popover.close();
             }
@@ -269,17 +270,19 @@ RED.tourGuide = (function() {
             // }
 
             $('<small>').text((state.index+1)+"/"+state.count).appendTo(stepToolbar)
+            var nextButton;
             if (fullscreen || !step.wait) {
-                var nextButton = $('<button type="button" class="red-ui-button" style="position: absolute; right:0;bottom:0;"></button>').appendTo(stepToolbar).click(function(evt) {
+                nextButton = $('<button type="button" class="red-ui-button" style="position: absolute; right:0;bottom:0;"></button>').appendTo(stepToolbar).one('click',function(evt) {
                     evt.preventDefault();
                     stepEventListener();
                 });
                 if (state.index === state.count - 1) {
-                    $('<span>close</span>').appendTo(nextButton);
+                    $('<span></span>').text(RED._("common.label.close")).appendTo(nextButton);
                 } else if (state.index === 0) {
-                    $('<span>start</span>').appendTo(nextButton);
+                    $('<span>start</span>').text(RED._("tourGuide.start")).appendTo(nextButton);
                 } else if (state.index < state.count-1) {
-                    $('<span>next <i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
+                    $('<span></span>').text(RED._("tourGuide.next")).appendTo(nextButton);
+                    $('<span style="margin-left: 4px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
                 }
             }
 
@@ -299,6 +302,16 @@ RED.tourGuide = (function() {
                     content: stepContent
                 }).open();
             }
+            $(document).off('keydown.red-ui-tourGuide');
+            $(document).on('keydown.red-ui-tourGuide', function(evt) {
+                if (evt.key === "Escape" || evt.key === "Esc") {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    completeStep(step, state, function() {
+                        done(false);
+                    });
+                }
+            })
             popover.element.toggleClass("red-ui-tourGuide-popover-full",!!fullscreen);
             popover.move({
                 target: targetElement,
@@ -307,6 +320,11 @@ RED.tourGuide = (function() {
                 direction: direction,
             })
 
+            if (nextButton) {
+                setTimeout(function() {
+                    nextButton.focus();
+                },50);
+            }
 
             var isSVG = targetElement[0] instanceof SVGElement;
             if (step.fallback) {