Skip to content

Commit a64cf29

Browse files
committed
Refocus table of contents overlay trigger on close
When using the dialog with a keyboard, focus is not set when you close it so the browser has to guess what to focus. This is usually on the document itself or the main content area, both of which are confusing to users. This focuses the button that opens the dialog when it closes, as per WAI ARIA advice from the W3C: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
1 parent 9aa4b31 commit a64cf29

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

lib/assets/javascripts/_modules/table-of-contents.js

+1
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
$html.removeClass('toc-open')
114114

115115
toggleBackgroundVisiblity(true)
116+
$openButton.focus()
116117
updateAriaAttributes()
117118
}
118119

spec/javascripts/table-of-contents-spec.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,8 @@ describe('Table of contents', function () {
197197
})
198198

199199
describe('if the close button is clicked', function () {
200-
var clickEvt
200+
var openClickEvt
201+
var closeClickEvt
201202

202203
beforeEach(function () {
203204
$html.addClass('mobile-size')
@@ -206,21 +207,28 @@ describe('Table of contents', function () {
206207
module.start($toc)
207208

208209
// tocIsVisible = false // controls what $toc.is(':visible') returns, which will be controlled by CSS in a web page
209-
clickEvt = new $.Event('click')
210-
$closeButton.trigger(clickEvt)
210+
openClickEvt = new $.Event('click')
211+
closeClickEvt = new $.Event('click')
212+
213+
$openButton.trigger(openClickEvt)
214+
$closeButton.trigger(closeClickEvt)
211215
})
212216

213217
afterEach(function () {
214218
$html.removeClass('mobile-size')
215219
})
216220

217221
it('the click event should be cancelled', function () {
218-
expect(clickEvt.isDefaultPrevented()).toBe(true)
222+
expect(closeClickEvt.isDefaultPrevented()).toBe(true)
219223
})
220224

221225
it('the table of contents should be hidden', function () {
222226
expect($toc.attr('aria-hidden')).toEqual('true')
223227
})
228+
229+
it('the button that triggered the dialog is refocused', function () {
230+
expect(document.activeElement).toBe($openButton.get(0))
231+
})
224232
})
225233

226234
it('on mobile-size screens, when the table of contents is open and the escape key is activated, the table of contents should be hidden', function () {

0 commit comments

Comments
 (0)