A11y improvements

src/core/hint.js

@@ -5,7 +5,6 @@ import getOffset from "../util/getOffset";
 import cloneObject from "../util/cloneObject";
 import forEach from "../util/forEach";
 import DOMEvent from "./DOMEvent";
-import setAnchorAsButton from "../util/setAnchorAsButton";
 import setHelperLayerPosition from "./setHelperLayerPosition";
 import placeTooltip from "./placeTooltip";
 import createElement from "../util/createElement";
@@ -169,10 +168,10 @@ export async function addHints() {
       return;
     }
 
-    const hint = createElement("a", {
+    const hint = createElement("button", {
       className: "introjs-hint",
     });
-    setAnchorAsButton(hint);
+    hint.setAttribute("type", "button");
 
     hint.onclick = getHintClick(i);
 
@@ -333,9 +332,9 @@ export async function showHintDialog(stepId) {
   tooltipTextLayer.appendChild(tooltipWrapper);
 
   if (this._options.hintShowButton) {
-    const closeButton = createElement("a");
+    const closeButton = createElement("button");
     closeButton.className = this._options.buttonClass;
-    closeButton.setAttribute("role", "button");
+    closeButton.setAttribute("type", "button");
     closeButton.innerHTML = this._options.hintButtonLabel;
     closeButton.onclick = hideHint.bind(this, stepId);
     tooltipTextLayer.appendChild(closeButton);

src/core/showElement.js

@@ -4,7 +4,6 @@ import addClass from "../util/addClass";
 import scrollTo from "../util/scrollTo";
 import exitIntro from "./exitIntro";
 import forEach from "../util/forEach";
-import setAnchorAsButton from "../util/setAnchorAsButton";
 import { nextStep, previousStep } from "./steps";
 import setHelperLayerPosition from "./setHelperLayerPosition";
 import placeTooltip from "./placeTooltip";
@@ -73,22 +72,22 @@ function _createBullets(targetElement) {
 
   forEach(this._introItems, ({ step }, i) => {
     const innerLi = createElement("li");
-    const anchorLink = createElement("a");
+    const anchorButton = createElement("button");
 
     innerLi.setAttribute("role", "presentation");
-    anchorLink.setAttribute("role", "tab");
+    anchorButton.setAttribute("type", "button");
+    anchorButton.setAttribute("role", "tab");
 
-    anchorLink.onclick = anchorClick;
+    anchorButton.onclick = anchorClick;
 
     if (i === targetElement.step - 1) {
-      anchorLink.className = "active";
+      anchorButton.className = "active";
     }
 
-    setAnchorAsButton(anchorLink);
-    anchorLink.innerHTML = " ";
-    anchorLink.setAttribute("data-step-number", step);
+    anchorButton.innerHTML = " ";
+    anchorButton.setAttribute("data-step-number", step);
 
-    innerLi.appendChild(anchorLink);
+    innerLi.appendChild(anchorButton);
     ulContainer.appendChild(innerLi);
   });
 
@@ -125,10 +124,10 @@ export function _recreateBullets(oldReferenceLayer, targetElement) {
 function _updateBullets(oldReferenceLayer, targetElement) {
   if (this._options.showBullets) {
     oldReferenceLayer.querySelector(
-      ".introjs-bullets li > a.active"
+      ".introjs-bullets li > button.active"
     ).className = "";
     oldReferenceLayer.querySelector(
-      `.introjs-bullets li > a[data-step-number="${targetElement.step}"]`
+      `.introjs-bullets li > button[data-step-number="${targetElement.step}"]`
     ).className = "active";
   }
 }
@@ -396,7 +395,7 @@ export default async function _showElement(targetElement) {
     referenceLayer.appendChild(tooltipLayer);
 
     //next button
-    nextTooltipButton = createElement("a");
+    nextTooltipButton = createElement("button");
 
     nextTooltipButton.onclick = async () => {
       if (self._introItems.length - 1 !== self._currentStep) {
@@ -414,27 +413,24 @@ export default async function _showElement(targetElement) {
       }
     };
 
-    setAnchorAsButton(nextTooltipButton);
     nextTooltipButton.innerHTML = this._options.nextLabel;
 
     //previous button
-    prevTooltipButton = createElement("a");
+    prevTooltipButton = createElement("button");
 
     prevTooltipButton.onclick = async () => {
       if (self._currentStep !== 0) {
         await previousStep.call(self);
       }
     };
 
-    setAnchorAsButton(prevTooltipButton);
     prevTooltipButton.innerHTML = this._options.prevLabel;
 
     //skip button
-    skipTooltipButton = createElement("a", {
+    skipTooltipButton = createElement("button", {
       className: "introjs-skipbutton",
     });
 
-    setAnchorAsButton(skipTooltipButton);
     skipTooltipButton.innerHTML = this._options.skipLabel;
 
     skipTooltipButton.onclick = async () => {
@@ -515,6 +511,7 @@ export default async function _showElement(targetElement) {
         prevTooltipButton !== null
       ) {
         prevTooltipButton.className = `${this._options.buttonClass} introjs-prevbutton introjs-disabled`;
+        prevTooltipButton.setAttribute("disabled", "disabled");
       }
     }
   } else if (
@@ -555,6 +552,7 @@ export default async function _showElement(targetElement) {
           );
         } else {
           nextTooltipButton.className = `${this._options.buttonClass} introjs-nextbutton introjs-disabled`;
+          prevTooltipButton.setAttribute("disabled", "disabled");
         }
       }
     }
@@ -565,24 +563,26 @@ export default async function _showElement(targetElement) {
       prevTooltipButton !== null
     ) {
       prevTooltipButton.className = `${this._options.buttonClass} introjs-prevbutton`;
+      prevTooltipButton.removeAttribute("disabled");
     }
     if (
       typeof nextTooltipButton !== "undefined" &&
       nextTooltipButton !== null
     ) {
       nextTooltipButton.className = `${this._options.buttonClass} introjs-nextbutton`;
+      nextTooltipButton.removeAttribute("disabled");
       nextTooltipButton.innerHTML = this._options.nextLabel;
     }
   }
 
   if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) {
-    prevTooltipButton.setAttribute("role", "button");
+    prevTooltipButton.setAttribute("type", "button");
   }
   if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) {
-    nextTooltipButton.setAttribute("role", "button");
+    nextTooltipButton.setAttribute("type", "button");
   }
   if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) {
-    skipTooltipButton.setAttribute("role", "button");
+    skipTooltipButton.setAttribute("type", "button");
   }
 
   //Set focus on "next" button, so that hitting Enter always moves you onto the next step

src/styles/introjs.scss

@@ -93,7 +93,6 @@ tr.introjs-showElement {
 
 .introjs-arrow {
   border: 5px solid transparent;
-  content: "";
   position: absolute;
 }
 
@@ -234,6 +233,10 @@ tr.introjs-showElement {
 }
 
 .introjs-button {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
   box-sizing: content-box;
   position: relative;
   overflow: visible;
@@ -285,6 +288,10 @@ tr.introjs-showElement {
 }
 
 .introjs-skipbutton {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
   position: absolute;
   top: 0;
   right: 0;
@@ -360,7 +367,11 @@ tr.introjs-showElement {
       float: left;
       margin: 0 2px;
 
-      a {
+      button {
+        appearance: none;
+        border: 0;
+        background: none;
+        padding: 0;
         transition: width 0.1s ease-in;
         box-sizing: content-box;
         display: block;
@@ -380,7 +391,7 @@ tr.introjs-showElement {
         }
       }
 
-      a.active {
+      button.active {
         width: 15px;
         background: #999;
       }

tests/cypress/support/commands.js

@@ -31,9 +31,9 @@ compareSnapshotCommand({
 });
 
 Cypress.Commands.add("nextStep", () => {
-  cy.get(".introjs-nextbutton").click();
+  cy.get(".introjs-nextbutton").click({ force: true });
 });
 
 Cypress.Commands.add("prevStep", () => {
-  cy.get(".introjs-prevbutton").click();
+  cy.get(".introjs-prevbutton").click({ force: true });
 });

themes/introjs-dark.css

@@ -218,7 +218,7 @@ tr.introjs-showElement > th {
   float: left;
   margin: 0 2px;
 }
-.introjs-bullets ul li a {
+.introjs-bullets ul li button {
   display: block;
   width: 8px;
   height: 8px;
@@ -228,10 +228,10 @@ tr.introjs-showElement > th {
   -webkit-border-radius: 10px;
   text-decoration: none;
 }
-.introjs-bullets ul li a:hover {
+.introjs-bullets ul li button:hover {
   background: rgba(255,255,255,0.2);
 }
-.introjs-bullets ul li a.active {
+.introjs-bullets ul li button.active {
   background: rgba(255,255,255,0.2);
 }
 .introjsFloatingElement {

themes/introjs-nassim.css

@@ -263,7 +263,7 @@
   float: left;
   margin: 0 2px;
 }
-.introjs-bullets ul li a {
+.introjs-bullets ul li button {
   display: block;
   width: 6px;
   height: 6px;
@@ -273,10 +273,10 @@
   -webkit-border-radius: 10px;
   text-decoration: none;
 }
-.introjs-bullets ul li a:hover {
+.introjs-bullets ul li button:hover {
   background: #999;
 }
-.introjs-bullets ul li a.active {
+.introjs-bullets ul li button.active {
   background: #999;
 }
 

themes/introjs-nazanin.css

@@ -232,7 +232,7 @@
   float: left;
   margin: 0 2px;
 }
-.introjs-bullets ul li a {
+.introjs-bullets ul li button {
   display: block;
   width: 6px;
   height: 6px;
@@ -242,10 +242,10 @@
   -webkit-border-radius: 10px;
   text-decoration: none;
 }
-.introjs-bullets ul li a:hover {
+.introjs-bullets ul li button:hover {
   background: #999;
 }
-.introjs-bullets ul li a.active {
+.introjs-bullets ul li button.active {
   background: #999;
 }
 

themes/introjs-royal.css

@@ -249,7 +249,7 @@
   float: left;
   margin: 0 2px;
 }
-.introjs-bullets ul li a {
+.introjs-bullets ul li button {
   display: block;
   width: 6px;
   height: 6px;
@@ -259,10 +259,10 @@
   -webkit-border-radius: 10px;
   text-decoration: none;
 }
-.introjs-bullets ul li a:hover {
+.introjs-bullets ul li button:hover {
   background: #999;
 }
-.introjs-bullets ul li a.active {
+.introjs-bullets ul li button.active {
   background: #999;
 }