Accessibility: Unable to navigate to close 'X' icon with keyboa… (#5964)

umbraco · Aug 14, 2019 · 6bd647f · 6bd647f
1 parent 8d0df6c
commit 6bd647f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -4,32 +4,34 @@
     <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>
                             <umb-tour-step-counter
                                 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>
+</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
@@ -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>
+</div>