From fb3bcb76cc5e349b6874d6a29a6a7a0837fc5f59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 14:32:34 -0400 Subject: [PATCH 1/8] [FIX] Remove content on non pseudo-element --- src/styles/introjs.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss index fcc9f2f0f..7c5f83910 100644 --- a/src/styles/introjs.scss +++ b/src/styles/introjs.scss @@ -93,7 +93,6 @@ tr.introjs-showElement { .introjs-arrow { border: 5px solid transparent; - content: ""; position: absolute; } From 4fa79a005ec0607727d6379bbd75a09ae55ff9cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 14:33:03 -0400 Subject: [PATCH 2/8] [FIX] Use semantic buttons instead of links role=button --- src/core/hint.js | 4 ++-- src/core/showElement.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/core/hint.js b/src/core/hint.js index b33e9acc4..304797986 100644 --- a/src/core/hint.js +++ b/src/core/hint.js @@ -333,9 +333,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); diff --git a/src/core/showElement.js b/src/core/showElement.js index 700c0a976..9486d0100 100644 --- a/src/core/showElement.js +++ b/src/core/showElement.js @@ -396,7 +396,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) { @@ -418,7 +418,7 @@ export default async function _showElement(targetElement) { nextTooltipButton.innerHTML = this._options.nextLabel; //previous button - prevTooltipButton = createElement("a"); + prevTooltipButton = createElement("button"); prevTooltipButton.onclick = async () => { if (self._currentStep !== 0) { @@ -430,7 +430,7 @@ export default async function _showElement(targetElement) { prevTooltipButton.innerHTML = this._options.prevLabel; //skip button - skipTooltipButton = createElement("a", { + skipTooltipButton = createElement("button", { className: "introjs-skipbutton", }); @@ -576,13 +576,13 @@ export default async function _showElement(targetElement) { } 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 From 70d5c745793fdb1dd496bcc50084a709a897c9e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 15:13:20 -0400 Subject: [PATCH 3/8] [FIX] More a11y improvements --- src/core/hint.js | 4 ++-- src/core/showElement.js | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/core/hint.js b/src/core/hint.js index 304797986..20bafb172 100644 --- a/src/core/hint.js +++ b/src/core/hint.js @@ -169,10 +169,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); diff --git a/src/core/showElement.js b/src/core/showElement.js index 9486d0100..e33417ec2 100644 --- a/src/core/showElement.js +++ b/src/core/showElement.js @@ -414,7 +414,6 @@ export default async function _showElement(targetElement) { } }; - setAnchorAsButton(nextTooltipButton); nextTooltipButton.innerHTML = this._options.nextLabel; //previous button @@ -426,7 +425,6 @@ export default async function _showElement(targetElement) { } }; - setAnchorAsButton(prevTooltipButton); prevTooltipButton.innerHTML = this._options.prevLabel; //skip button @@ -434,7 +432,6 @@ export default async function _showElement(targetElement) { className: "introjs-skipbutton", }); - setAnchorAsButton(skipTooltipButton); skipTooltipButton.innerHTML = this._options.skipLabel; skipTooltipButton.onclick = async () => { @@ -515,6 +512,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 +553,7 @@ export default async function _showElement(targetElement) { ); } else { nextTooltipButton.className = `${this._options.buttonClass} introjs-nextbutton introjs-disabled`; + prevTooltipButton.setAttribute("disabled", "disabled"); } } } @@ -565,12 +564,14 @@ 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; } } From e2b7cd7c762a5f449d984701673088046fc0ae65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 15:23:05 -0400 Subject: [PATCH 4/8] [FIX] Completely remove setAnchorAsButton --- src/core/hint.js | 1 - src/core/showElement.js | 17 ++++++++--------- src/util/setAnchorAsButton.js | 10 ---------- 3 files changed, 8 insertions(+), 20 deletions(-) delete mode 100644 src/util/setAnchorAsButton.js diff --git a/src/core/hint.js b/src/core/hint.js index 20bafb172..402e32d25 100644 --- a/src/core/hint.js +++ b/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"; diff --git a/src/core/showElement.js b/src/core/showElement.js index e33417ec2..05f928976 100644 --- a/src/core/showElement.js +++ b/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); }); diff --git a/src/util/setAnchorAsButton.js b/src/util/setAnchorAsButton.js deleted file mode 100644 index f79cb39c2..000000000 --- a/src/util/setAnchorAsButton.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Setting anchors to behave like buttons - * - * @api private - * @method _setAnchorAsButton - */ -export default function setAnchorAsButton(anchor) { - anchor.setAttribute("role", "button"); - anchor.tabIndex = 0; -} From 8ffb29d796a7abedc31fc25b39f976dd52d0b958 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 16:02:04 -0400 Subject: [PATCH 5/8] [FIX] Remove base button styling --- src/styles/introjs.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss index 7c5f83910..d05596855 100644 --- a/src/styles/introjs.scss +++ b/src/styles/introjs.scss @@ -233,6 +233,10 @@ tr.introjs-showElement { } .introjs-button { + appearance: none; + border: 0; + background: none; + padding: 0; box-sizing: content-box; position: relative; overflow: visible; @@ -284,6 +288,10 @@ tr.introjs-showElement { } .introjs-skipbutton { + appearance: none; + border: 0; + background: none; + padding: 0; position: absolute; top: 0; right: 0; @@ -359,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; From 8c185cf7183abc8735c90bd58294044c9de64ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 16:13:33 -0400 Subject: [PATCH 6/8] [FIX] Remove base button styling --- src/styles/introjs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss index d05596855..a6857ffbb 100644 --- a/src/styles/introjs.scss +++ b/src/styles/introjs.scss @@ -391,7 +391,7 @@ tr.introjs-showElement { } } - a.active { + button.active { width: 15px; background: #999; } From 0998ddc410241ee953b5fc1ef82f497cbf268c02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 16:45:56 -0400 Subject: [PATCH 7/8] [FIX] Remove old reference to links --- src/core/showElement.js | 4 ++-- themes/introjs-dark.css | 6 +++--- themes/introjs-nassim.css | 6 +++--- themes/introjs-nazanin.css | 6 +++--- themes/introjs-royal.css | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/core/showElement.js b/src/core/showElement.js index 05f928976..53fd25d78 100644 --- a/src/core/showElement.js +++ b/src/core/showElement.js @@ -124,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"; } } diff --git a/themes/introjs-dark.css b/themes/introjs-dark.css index c834b5d91..966272ff0 100644 --- a/themes/introjs-dark.css +++ b/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 { diff --git a/themes/introjs-nassim.css b/themes/introjs-nassim.css index d3dbb938e..a433fdc8d 100644 --- a/themes/introjs-nassim.css +++ b/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; } diff --git a/themes/introjs-nazanin.css b/themes/introjs-nazanin.css index 682252834..3eacc7a6a 100644 --- a/themes/introjs-nazanin.css +++ b/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; } diff --git a/themes/introjs-royal.css b/themes/introjs-royal.css index a2281adcf..815006a6c 100644 --- a/themes/introjs-royal.css +++ b/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; } From 841c104c1cf3c873e6fbb0234f77c1d531eacd86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= Date: Wed, 17 Aug 2022 16:54:40 -0400 Subject: [PATCH 8/8] [FIX] Can't click disabled elements --- tests/cypress/support/commands.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 494643438..31266a8cb 100644 --- a/tests/cypress/support/commands.js +++ b/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 }); });