Skip to content

Commit 42e4311

Browse files
committed
reset focus and make enter key behavior more sane
pressing enter while focusing on skip or previous shouldn’t go to next step
1 parent c2848f9 commit 42e4311

File tree

1 file changed

+30
-2
lines changed

1 file changed

+30
-2
lines changed

intro.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,23 @@
201201
} else if(e.keyCode === 37) {
202202
//left arrow
203203
_previousStep.call(self);
204-
} else if (e.keyCode === 39 || e.keyCode === 13) {
205-
//right arrow or enter
204+
} else if (e.keyCode === 39) {
205+
//right arrow
206206
_nextStep.call(self);
207+
} else if (e.keyCode === 13) {
208+
//srcElement === ie
209+
var target = e.target || e.srcElement;
210+
if (target && target.className.indexOf('introjs-prevbutton') > 0) {
211+
//user hit enter while focusing on previous button
212+
_previousStep.call(self);
213+
} else if (target && target.className.indexOf('introjs-skipbutton') > 0) {
214+
//user hit enter while focusing on skip button
215+
_exitIntro.call(self, targetElm);
216+
} else {
217+
//default behavior for responding to enter
218+
_nextStep.call(self);
219+
}
220+
207221
//prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
208222
if(e.preventDefault) {
209223
e.preventDefault();
@@ -732,6 +746,15 @@
732746
//show the tooltip
733747
oldtooltipContainer.style.opacity = 1;
734748
if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
749+
750+
//reset button focus
751+
if (nextTooltipButton.tabIndex === -1) {
752+
//tabindex of -1 means we are at the end of the tour - focus on skip / done
753+
skipTooltipButton.focus();
754+
} else {
755+
//still in the tour, focus on next
756+
nextTooltipButton.focus();
757+
}
735758
}, 350);
736759

737760
} else {
@@ -869,14 +892,19 @@
869892
_disableInteraction.call(self);
870893
}
871894

895+
prevTooltipButton.removeAttribute('tabIndex');
896+
nextTooltipButton.removeAttribute('tabIndex');
897+
872898
if (this._currentStep == 0 && this._introItems.length > 1) {
873899
prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
900+
prevTooltipButton.tabIndex = '-1';
874901
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
875902
skipTooltipButton.innerHTML = this._options.skipLabel;
876903
} else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
877904
skipTooltipButton.innerHTML = this._options.doneLabel;
878905
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
879906
nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
907+
nextTooltipButton.tabIndex = '-1';
880908
} else {
881909
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
882910
nextTooltipButton.className = 'introjs-button introjs-nextbutton';

0 commit comments

Comments
 (0)