@@ -619,26 +619,43 @@ Tour.prototype.addEventHandler = function (eventName, handler) {
619
619
*/
620
620
Tour . prototype . processStepListeners = function ( stepConfig ) {
621
621
this . listeners . push (
622
- // Next/Previous buttons.
623
- {
624
- node : this . currentStepNode ,
625
- args : [ 'click' , '[data-role="next"]' , $ . proxy ( this . next , this ) ]
626
- } , {
627
- node : this . currentStepNode ,
628
- args : [ 'click' , '[data-role="previous"]' , $ . proxy ( this . previous , this ) ]
629
- } ,
630
-
631
- // Close and end tour buttons.
632
- {
633
- node : this . currentStepNode ,
634
- args : [ 'click' , '[data-role="end"]' , $ . proxy ( this . endTour , this ) ]
635
- } ,
636
-
637
- // Keypresses.
638
- {
639
- node : $ ( 'body' ) ,
640
- args : [ 'keydown' , $ . proxy ( this . handleKeyDown , this ) ]
641
- } ) ;
622
+ // Next/Previous buttons.
623
+ {
624
+ node : this . currentStepNode ,
625
+ args : [ 'click' , '[data-role="next"]' , $ . proxy ( this . next , this ) ]
626
+ } , {
627
+ node : this . currentStepNode ,
628
+ args : [ 'click' , '[data-role="previous"]' , $ . proxy ( this . previous , this ) ]
629
+ } ,
630
+
631
+ // Close and end tour buttons.
632
+ {
633
+ node : this . currentStepNode ,
634
+ args : [ 'click' , '[data-role="end"]' , $ . proxy ( this . endTour , this ) ]
635
+ } ,
636
+
637
+ // Click backdrop and hide tour.
638
+ {
639
+ node : $ ( '[data-flexitour="backdrop"]' ) ,
640
+ args : [ 'click' , $ . proxy ( this . hide , this ) ]
641
+ } ,
642
+
643
+ // Click out and hide tour without backdrop.
644
+ {
645
+ node : $ ( 'body' ) ,
646
+ args : [ 'click' , $ . proxy ( function ( e ) {
647
+ // Handle click in or click out tour content,
648
+ // if click out, hide tour.
649
+ if ( ! this . currentStepNode . is ( e . target ) && $ ( e . target ) . closest ( '[data-role="flexitour-step"]' ) . length === 0 ) {
650
+ this . hide ( ) ;
651
+ } } , this ) ]
652
+ } ,
653
+
654
+ // Keypresses.
655
+ {
656
+ node : $ ( 'body' ) ,
657
+ args : [ 'keydown' , $ . proxy ( this . handleKeyDown , this ) ]
658
+ } ) ;
642
659
643
660
if ( stepConfig . moveOnClick ) {
644
661
var targetNode = this . getStepTarget ( stepConfig ) ;
@@ -904,7 +921,7 @@ Tour.prototype.announceStep = function (stepConfig) {
904
921
* @param {EventFacade } e
905
922
*/
906
923
Tour . prototype . handleKeyDown = function ( e ) {
907
- var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button' ;
924
+ var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button:enabled ' ;
908
925
switch ( e . keyCode ) {
909
926
case 27 :
910
927
this . endTour ( ) ;
@@ -923,8 +940,17 @@ Tour.prototype.handleKeyDown = function (e) {
923
940
var activeElement = $ ( document . activeElement ) ;
924
941
var stepTarget = this . getStepTarget ( this . currentStepConfig ) ;
925
942
var tabbableNodes = $ ( tabbableSelector ) ;
943
+ var dialogContainer = $ ( 'span[data-flexitour="container"]' ) ;
926
944
var currentIndex = void 0 ;
927
- tabbableNodes . filter ( function ( index , element ) {
945
+ // Filter out element which is not belong to target section or dialogue.
946
+ if ( stepTarget ) {
947
+ tabbableNodes = tabbableNodes . filter ( function ( index , element ) {
948
+ return stepTarget != null && ( stepTarget . has ( element ) . length || dialogContainer . has ( element ) . length || stepTarget . is ( element ) || dialogContainer . is ( element ) ) ;
949
+ } ) ;
950
+ }
951
+
952
+ // Find index of focusing element.
953
+ tabbableNodes . each ( function ( index , element ) {
928
954
if ( activeElement . is ( element ) ) {
929
955
currentIndex = index ;
930
956
return false ;
@@ -934,7 +960,7 @@ Tour.prototype.handleKeyDown = function (e) {
934
960
var nextIndex = void 0 ;
935
961
var nextNode = void 0 ;
936
962
var focusRelevant = void 0 ;
937
- if ( currentIndex ) {
963
+ if ( currentIndex != void 0 ) {
938
964
var direction = 1 ;
939
965
if ( e . shiftKey ) {
940
966
direction = - 1 ;
@@ -1090,6 +1116,16 @@ Tour.prototype.hide = function (transition) {
1090
1116
$ ( this ) . remove ( ) ;
1091
1117
} ) ;
1092
1118
1119
+ // Remove aria-describedby and tabindex attributes.
1120
+ if ( this . currentStepNode && this . currentStepNode . length ) {
1121
+ var stepId = this . currentStepNode . attr ( 'id' ) ;
1122
+ if ( stepId ) {
1123
+ var currentStepElement = '[aria-describedby="' + stepId + '-body"]' ;
1124
+ $ ( currentStepElement ) . removeAttr ( 'tabindex' ) ;
1125
+ $ ( currentStepElement ) . removeAttr ( 'aria-describedby' ) ;
1126
+ }
1127
+ }
1128
+
1093
1129
// Reset the listeners.
1094
1130
this . resetStepListeners ( ) ;
1095
1131
0 commit comments