Accessibility improvements and refactorign

demo/scripts/demo.js

@@ -111,7 +111,7 @@ document.addEventListener("DOMContentLoaded", function () {
   document.querySelector('#animated-tour')
     .addEventListener('click', () => {
       if (boringTourDriver.isActivated) {
-        boringTourDriver.reset();
+        boringTourDriver.reset(true);
       }
 
       animatedTourDriver.start();
@@ -120,7 +120,7 @@ document.addEventListener("DOMContentLoaded", function () {
   document.querySelector('#boring-tour')
     .addEventListener('click', () => {
       if (animatedTourDriver.isActivated) {
-        animatedTourDriver.reset();
+        animatedTourDriver.reset(true);
       }
 
       boringTourDriver.start();

src/common/constants.js

@@ -34,10 +34,10 @@ export const POPOVER_HTML = `
     <div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
     <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
     <div class="${CLASS_POPOVER_FOOTER}">
-      <a href="javascript:void(0)" class="${CLASS_CLOSE_BTN}">Close</a>
+      <button class="${CLASS_CLOSE_BTN}">Close</button>
       <span class="driver-btn-group">
-        <a class="${CLASS_PREV_STEP_BTN}" href="javascript:void(0)">&larr; Previous</a>
-        <a class="${CLASS_NEXT_STEP_BTN}" href="javascript:void(0)">Next &rarr;</a>
+        <button class="${CLASS_PREV_STEP_BTN}">&larr; Previous</button>
+        <button class="${CLASS_NEXT_STEP_BTN}">Next &rarr;</button>
       </span>
     </div>
   </div>`;

src/core/overlay.js

@@ -20,6 +20,8 @@ export default class Overlay {
 
     this.window = window;
     this.document = document;
+
+    this.removeNode = this.removeNode.bind(this);
   }
 
   /**
@@ -120,10 +122,11 @@ export default class Overlay {
   /**
    * Removes the overlay and cancel any listeners
    */
-  clear() {
+  clear(immediate = false) {
     // Deselect the highlighted element if any
     if (this.highlightedElement) {
-      this.highlightedElement.onDeselected(true);
+      const hideStage = true;
+      this.highlightedElement.onDeselected(hideStage);
     }
 
     this.highlightedElement = null;
@@ -136,9 +139,9 @@ export default class Overlay {
     // Clear any existing timers and remove node
     this.window.clearTimeout(this.hideTimer);
 
-    if (this.options.animate) {
+    if (this.options.animate && !immediate) {
       this.node.style.opacity = '0';
-      this.hideTimer = window.setTimeout(this.removeNode, ANIMATION_DURATION_MS);
+      this.hideTimer = this.window.setTimeout(this.removeNode, ANIMATION_DURATION_MS);
     } else {
       this.removeNode();
     }

src/driver.scss

@@ -56,7 +56,7 @@ div#driver-popover-item {
     clear: both;
     margin-top: 5px;
 
-    a {
+    button {
       display: inline-block;
       padding: 3px 10px;
       border: 1px solid #d4d4d4;
@@ -72,7 +72,7 @@ div#driver-popover-item {
       margin: 10px 0 0;
     }
 
-    a.driver-disabled {
+    button.driver-disabled {
       color: #808080;
       cursor: default;
       pointer-events: none;

src/index.js

@@ -147,10 +147,10 @@ export default class Driver {
   /**
    * Resets the steps if any and clears the overlay
    */
-  reset() {
+  reset(immediate = false) {
     this.currentStep = 0;
     this.isActivated = false;
-    this.overlay.clear();
+    this.overlay.clear(immediate);
   }
 
   /**