14744 tour not coded to best practice (#15133)

* Apply focusLockService to TourStepDirective

Apply focusLockService to TourStepDirective in order to ensure that
non-modal page contents are inert and do not interfere with focus on
modal dialog with regards to screen reading technologies.

* Add properties to umb-tour.html.

Add properties to umb-tour html page to ensure that it aligns with modal
dialog best practices.

* Add dialog properties to Umbraco tour .html files.

Add properties relating to dialog and accessibility to the Umbraco tour
.html files, including aria-label, role, and tab index.

Author: nagolucky18

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstep.directive.js

@@ -14,16 +14,18 @@
 (function () {
     'use strict';
 
-    function TourStepDirective() {
+    function TourStepDirective(focusLockService) {
 
         function link(scope, element, attrs, ctrl) {
 
             scope.close = function () {
                 if (scope.onClose) {
-                   scope.onClose();
+                  scope.onClose();
+                  focusLockService.removeInertAttribute();
                 }
             }
 
+            focusLockService.addInertAttribute();
         }
 
         var directive = {

src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html

@@ -1,4 +1,4 @@
-<div class="umb-tour">
+<div class="umb-tour" tabindex="0" role="dialog" aria-label="tour">
 
     <umb-loader class="umb-tour__loader" ng-if="loadingStep"></umb-loader>
 
@@ -29,7 +29,7 @@
                                 total-steps="model.steps.length">
                             </umb-tour-step-counter>
                             <div ng-if="model.allowDisable && model.currentStep.type === 'intro'">
-                                <button type="button" class="underline" ng-click="model.disableTour()" prevent-default>Don't show this tour again</button>
+                                <button type="button" class="underline" ng-click="model.disableTour()" tabindex="0" prevent-default>Don't show this tour again</button>
                             </div>
                         </div>
 
@@ -58,7 +58,7 @@ <h3 class="bold">Congratulations!</h3>
                 </umb-tour-step-content>
 
                 <umb-tour-step-footer>
-                    <umb-button type="button" button-style="action" size="m" action="model.completeTour()" label="Complete"></umb-button>
+                    <umb-button type="button" button-style="action" size="m" action="model.completeTour()" label="Complete" tabindex="0"></umb-button>
                 </umb-tour-step-footer>
 
             </umb-tour-step>

src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-content.html

@@ -1,4 +1,4 @@
 <div class="umb-tour-step__content">
-    <div ng-bind-html="content"></div>
+    <div ng-bind-html="content" tabindex="0"></div>
     <div ng-transclude></div>
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-counter.html

@@ -1 +1 @@
-<div class="umb-tour-step__counter">{{ currentStep }}/{{ totalSteps }}</div>
+<div class="umb-tour-step__counter" tabindex="0">{{ currentStep }}/{{ totalSteps }}</div>

src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html

@@ -1,4 +1,4 @@
 <div class="umb-tour-step__header">
-    <div class="umb-tour-step__title">{{title}}</div>
+    <div class="umb-tour-step__title" id="step-title" tabindex="0">{{title}}</div>
     <div ng-transclude></div>
-</div>
+</div>