Check out a free preview of the full Website Accessibility course:
The "Exercise 2: Focus Control" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will work on restricting tabbable content to a modal. Then code two methods to close the modal when the user is done. - https://github.com/jkup/focusable/blob/master/index.js

Get Unlimited Access Now

Transcript from the "Exercise 2: Focus Control" Lesson

[00:00:00]
>> Jon Kuperman: So I'm gonna push a branch with the answer, while people are working on this one. I also have a note in the modal.js file. I have just a simple repo that has a list of all tab-able elements, so you don't have to type all those out manually, so you can just copy that.

[00:00:13] And then on the slides, I've basically pseudo-coded it, right? So you can refer to these slides. I'm also gonna push the answers up. But yeah, so we're gonna do another quick ten minute one and then we'll go over it altogether. So the modal already exists on that page.

[00:00:29] Here I think I can go over to it.
>> Jon Kuperman: Focus control, okay so we already have a modal and it says sign up for free, and we already have, I think, yeah if you hit cancel it closes. So we already have a lot of the basic functionalities. So the two things that we'll need to do are, we'll need when you are in the modal and you start hitting tab, we'll need to be able to trap the keyboard, instead of going up here and then back to the back button, we need to be able to trap it so it stays in here.

[00:00:58] And then the other thing that we'll wanna do is something like, when you hit the Escape key or when you click into the gray, both of those should close the modal. Those are just things that I think are user-experience things that people are used to. So we're gonna be working on that kinda stuff.

[00:01:12] Ten minutes and I'll go over it altogether, and I'll push the answers in an answers branch right now.