From 6bd647f8c6e0cec64281d53b2d7fe4610475bca0 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Wed, 14 Aug 2019 17:29:26 +0200
Subject: [PATCH] =?UTF-8?q?Accessibility:=20Unable=20to=20navigate=20to=20?=
 =?UTF-8?q?close=20'X'=20icon=20with=20keyboa=E2=80=A6=20(#5964)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/application/umb-tour.html      | 22 ++++++++++---------
 .../application/umbtour/umb-tour-step.html    |  8 +++++--
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
index b756d23b5000..5410d453c4ca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
@@ -4,22 +4,22 @@
     <div class="umb-tour__pulse"></div>
 
     <div class="umb-tour__popover shadow-depth-2" ng-class="{'umb-tour__popover--l': model.currentStep.type === 'intro' || model.currentStepIndex === model.steps.length}">
-        
+
         <div ng-if="!configuredView && !elementNotFound">
 
             <!-- Regular steps -->
             <umb-tour-step ng-if="model.currentStepIndex < model.steps.length" on-close="model.endTour()">
-                    
+
                 <umb-tour-step-header
                     title="model.currentStep.title">
                 </umb-tour-step-header>
-    
+
                 <umb-tour-step-content
                     content="model.currentStep.content">
                 </umb-tour-step-content>
-    
+
                 <umb-tour-step-footer>
-                    
+
                     <div class="flex justify-between items-center">
 
                         <div>
@@ -27,9 +27,11 @@
                                 current-step="model.currentStepIndex + 1"
                                 total-steps="model.steps.length">
                             </umb-tour-step-counter>
-                            <div ng-if="model.allowDisable && model.currentStep.type === 'intro'" style="font-size: 13px;"><a href="" class="underline" ng-click="model.disableTour()">Don't show this tour again</a></div>
+                            <div ng-if="model.allowDisable && model.currentStep.type === 'intro'">
+                                <button type="button" class="underline" ng-click="model.disableTour()" style="font-size: 13px; background: transparent; border: none; padding: 0;" prevent-default>Don't show this tour again</button>
+                            </div>
                         </div>
-                        
+
                         <div ng-if="model.currentStep.type !== 'intro'">
                             <umb-button size="xs" ng-if="!model.currentStep.event" button-style="action" type="button" action="model.nextStep()" label="Next"></umb-button>
                         </div>
@@ -40,7 +42,7 @@
                     </div>
 
                 </umb-tour-step-footer>
-        
+
             </umb-tour-step>
 
             <!-- Outro step -->
@@ -64,7 +66,7 @@ <h3 class="bold">Congratulations!</h3>
 
         <!-- Custom step view -->
         <div ng-if="configuredView && !loadingStep && !elementNotFound" ng-include="configuredView"></div>
-        
+
         <!-- Dom element not found error -->
         <div ng-if="elementNotFound && !loadingStep">
             <umb-tour-step class="tc">
@@ -83,4 +85,4 @@ <h4 class="bold color-red">Oh, we got lost!</h4>
 
     </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
index 4180477c04c2..a2caff4ff2f5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
@@ -2,9 +2,13 @@
 
 
     <div ng-if="hideClose !== true">
-        <button class="icon-wrong umb-tour-step__close" ng-click="close()"></button>
+        <button class="icon-wrong umb-tour-step__close" ng-click="close()">
+            <span class="sr-only">
+                <localize key="general_close">Close</localize>
+            </span>
+        </button>
     </div>
 
     <div ng-transclude></div>
 
-</div>
\ No newline at end of file
+</div>