I’m working on a trap focus modal functionality and it works well with a single element, but I can’t get it working with multiple elements. It traps focus only on last modal. I know there is something wrong with my loop, I tried to catch activeElement and add a condition if it’s equal to focused element but with no result.
Here is the CodePen example
HTML
JavaScript
x
45
45
1
<div class="container"> 2
<div class="nav__mobile">3
<div class="nav__right-item">4
<div class="everse-menu-search">5
<a href="#" class="everse-menu-search__trigger" title="Search">Mobile Search</a>6
<div class="everse-menu-search-modal">7
<div class="everse-menu-search-modal__inner">8
<div class="container">9
<form role="search" method="get" class="search-form relative" action="//localhost:3000/">10
<label>11
<span class="screen-reader-text">Search for:</span>12
<input type="search" class="search-input" placeholder="Search" value="" name="s">13
</label>14
<button type="button" class="everse-menu-search-modal__close" aria-label="Close Search">15
<span>Close</span>16
</button> 17
</form>18
</div> 19
</div>20
</div>21
</div>22
</div>23
24
</div>25
26
<div class="everse-menu-search">27
<a href="#" class="everse-menu-search__trigger" title="Search">Search</a>28
<div class="everse-menu-search-modal">29
<div class="everse-menu-search-modal__inner">30
<div class="container">31
<form role="search" method="get" class="search-form relative" action="//localhost:3000/">32
<label>33
<span class="screen-reader-text">Search for:</span>34
<input type="search" class="search-input" placeholder="Search" value="" name="s">35
</label>36
<button type="button" class="everse-menu-search-modal__close" aria-label="Close Search"><span>Close</span>37
</button> 38
</form>39
</div> 40
</div>41
</div>42
</div>43
44
</div>45
JavaScript
JavaScript
1
110
110
1
(function(){2
3
var html = document.querySelector('html'),4
body = document.body;5
6
mobileAccessibility();7
menuSearch();8
9
function mobileAccessibility() {10
11
document.addEventListener('keydown', function(e) {12
var tabKey, shiftKey, selectors, activeEl, lastEl, firstEl;13
14
if ( body.classList.contains('showing-modal') ) {15
16
selectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';17
activeEl = document.activeElement;18
19
// Search20
if ( body.classList.contains( 'showing-search-modal' ) ) {21
22
let search = document.querySelectorAll('.everse-menu-search:not(.eversor-menu-search)');23
24
for ( var i = 0; i < search.length; i++ ) {25
var input = search[i].querySelector('.search-input');26
var close = search[i].querySelector('.everse-menu-search-modal__close');27
28
firstEl = input;29
lastEl = close;30
}31
32
}33
34
tabKey = e.key === 'Tab' || e.keyCode === 9;35
shiftKey = e.shiftKey36
37
if ( ! shiftKey && tabKey && lastEl === activeEl ) {38
e.preventDefault();39
firstEl.focus();40
}41
42
if ( shiftKey && tabKey && firstEl === activeEl ) {43
e.preventDefault();44
lastEl.focus();45
}46
47
}48
49
});50
51
}52
53
function menuSearch() {54
let search = document.querySelectorAll('.everse-menu-search:not(.eversor-menu-search)');55
56
if ( ! search.length > 0 ) {57
return;58
} 59
60
for ( var i = 0; i < search.length; i++ ) {61
let trigger = search[i].querySelector('.everse-menu-search__trigger'),62
modal = search[i].querySelector('.everse-menu-search-modal'),63
inner = search[i].querySelector('.everse-menu-search-modal__inner'),64
input = search[i].querySelector('.search-input'),65
close = search[i].querySelector('.everse-menu-search-modal__close');66
67
trigger.addEventListener('click', function(e) {68
e.preventDefault();69
body.classList.toggle('showing-modal');70
body.classList.toggle('showing-search-modal');71
modal.classList.add('everse-menu-search-modal--is-open');72
setTimeout(() => {73
input.focus();74
}, 200); 75
});76
77
inner.addEventListener('click', function(e) {78
e.stopPropagation();79
}); 80
81
modal.addEventListener('click', function(e) {82
closeModal(this);83
});84
85
close.addEventListener('click', function(e) {86
closeModal(modal);87
});88
89
/*90
* Close on click or on esc.91
*/92
document.addEventListener('keyup', function(e) {93
if ( 27 === e.keyCode ) {94
closeModal(modal);95
}96
});97
98
} 99
100
function closeModal(modal) {101
body.classList.remove('showing-modal');102
body.classList.remove('showing-search-modal');103
modal.classList.remove('everse-menu-search-modal--is-open');104
} 105
106
} 107
108
109
})();110
Advertisement
Answer
You made a minor mistake with your loop in mobileAccessibility function.
When you loop through the modals in the section if ( body.classList.contains( 'showing-search-modal' ) ) { you close the loop too early.
This means you are setting firstEl = input; as the last modal no matter what (as you are overriding it) and same for lastEl = close;
By simply moving the loop to include the tabkey checks it works as expected.
A few other considerations
Now there are loads of things that you still need to consider from an accessibility perspective.
Things like the fact that screen reader users navigate by headings, sections, links etc. so just capturing Tab is not sufficient.
For example: you need to sit the modals outside of the <main> and then use aria-hidden="true" on the <main> element when the modals are open to hide everything else from screen readers.
Oh and add aria-modal to your modal, see this answer I gave to understand why.
Fixed code
JavaScript
1
111
111
1
(function(){2
3
var html = document.querySelector('html'),4
body = document.body;5
6
mobileAccessibility();7
menuSearch();8
9
function mobileAccessibility() {10
11
document.addEventListener('keydown', function(e) {12
var tabKey, shiftKey, selectors, activeEl, lastEl, firstEl;13
14
if ( body.classList.contains('showing-modal') ) {15
16
selectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';17
activeEl = document.activeElement;18
19
// Search20
if ( body.classList.contains( 'showing-search-modal' ) ) {21
22
let search = document.querySelectorAll('.everse-menu-search:not(.eversor-menu-search)');23
24
for ( var i = 0; i < search.length; i++ ) {25
var input = search[i].querySelector('.search-input');26
var close = search[i].querySelector('.everse-menu-search-modal__close');27
28
firstEl = input;29
lastEl = close;30
31
//moved the loop ending from here32
33
tabKey = e.key === 'Tab' || e.keyCode === 9;34
shiftKey = e.shiftKey35
36
if ( ! shiftKey && tabKey && lastEl === activeEl ) {37
e.preventDefault();38
firstEl.focus();39
}40
41
if ( shiftKey && tabKey && firstEl === activeEl ) {42
e.preventDefault();43
lastEl.focus();44
}45
46
//placed the loop ending here so `firstEl` and `lastEl` now correspond to `search[i]` rather than the last item in `search`47
}48
}49
}50
51
});52
53
}54
55
function menuSearch() {56
let search = document.querySelectorAll('.everse-menu-search:not(.eversor-menu-search)');57
58
if ( ! search.length > 0 ) {59
return;60
} 61
62
for ( var i = 0; i < search.length; i++ ) {63
let trigger = search[i].querySelector('.everse-menu-search__trigger'),64
modal = search[i].querySelector('.everse-menu-search-modal'),65
inner = search[i].querySelector('.everse-menu-search-modal__inner'),66
input = search[i].querySelector('.search-input'),67
close = search[i].querySelector('.everse-menu-search-modal__close');68
69
trigger.addEventListener('click', function(e) {70
e.preventDefault();71
body.classList.toggle('showing-modal');72
body.classList.toggle('showing-search-modal');73
modal.classList.add('everse-menu-search-modal--is-open');74
setTimeout(() => {75
input.focus();76
}, 200); 77
});78
79
inner.addEventListener('click', function(e) {80
e.stopPropagation();81
}); 82
83
modal.addEventListener('click', function(e) {84
closeModal(this);85
});86
87
close.addEventListener('click', function(e) {88
closeModal(modal);89
});90
91
/*92
* Close on click or on esc.93
*/94
document.addEventListener('keyup', function(e) {95
if ( 27 === e.keyCode ) {96
closeModal(modal);97
}98
});99
100
} 101
102
function closeModal(modal) {103
body.classList.remove('showing-modal');104
body.classList.remove('showing-search-modal');105
modal.classList.remove('everse-menu-search-modal--is-open');106
} 107
108
} 109
110
111
})();JavaScript
1
71
71
1
/*-------------------------------------------------------*/2
/* Search3
/*-------------------------------------------------------*/4
.search-form {5
position: relative;6
}7
.search-form label {8
display: flex;9
margin-bottom: 0;10
font-family: inherit;11
}12
13
.everse-menu-search {14
margin-top: 40px;15
}16
.everse-menu-search__trigger {17
color: #666666;18
}19
.everse-menu-search__icon {20
display: block;21
}22
.everse-menu-search-modal {23
background-color: transparent;24
position: fixed;25
overflow: hidden;26
width: 100vw;27
height: 100vh;28
top: 0;29
left: 0;30
z-index: 999;31
visibility: hidden;32
opacity: 0;33
transition: all;34
}35
.everse-menu-search-modal__inner {36
background-color: #fff;37
transition: all;38
transform: scale(1, 0);39
transform-origin: 100% 0;40
padding: 40px 0;41
}42
.everse-menu-search-modal__inner .search-input {43
margin-bottom: 0;44
border: 0;45
outline: 0;46
border-bottom: 1px solid #bebebe;47
}48
.everse-menu-search-modal__close {49
position: absolute;50
top: 0;51
right: 0;52
width: 56px;53
height: 56px;54
padding: 0;55
border: 0;56
text-align: center;57
background-color: transparent;58
color: #666666;59
}60
.everse-menu-search-modal__close:focus {61
background-color: transparent;62
color: initial;63
}64
.everse-menu-search-modal--is-open {65
background-color: rgba(0, 0, 0, 0.5);66
opacity: 1;67
visibility: visible;68
}69
.everse-menu-search-modal--is-open .everse-menu-search-modal__inner {70
transform: scale(1, 1);71
}JavaScript
1
45
45
1
<div class="container">2
3
<div class="nav__mobile">4
<div class="nav__right-item">5
<div class="everse-menu-search">6
<a href="#" class="everse-menu-search__trigger" title="Search">Mobile Search</a>7
<div class="everse-menu-search-modal">8
<div class="everse-menu-search-modal__inner">9
<div class="container">10
<form role="search" method="get" class="search-form relative" action="//localhost:3000/">11
<label>12
<span class="screen-reader-text">Search for:</span>13
<input type="search" class="search-input" placeholder="Search" value="" name="s">14
</label>15
<button type="button" class="everse-menu-search-modal__close" aria-label="Close Search">16
<span>Close</span>17
</button> 18
</form>19
</div> 20
</div>21
</div>22
</div>23
</div>24
25
</div>26
27
<div class="everse-menu-search">28
<a href="#" class="everse-menu-search__trigger" title="Search">Search</a>29
<div class="everse-menu-search-modal">30
<div class="everse-menu-search-modal__inner">31
<div class="container">32
<form role="search" method="get" class="search-form relative" action="//localhost:3000/">33
<label>34
<span class="screen-reader-text">Search for:</span>35
<input type="search" class="search-input" placeholder="Search" value="" name="s">36
</label>37
<button type="button" class="everse-menu-search-modal__close" aria-label="Close Search"><span>Close</span>38
</button> 39
</form>40
</div> 41
</div>42
</div>43
</div>44
45
</div>