All Topics
Focus Management
Exercise 5 - Keyboard Support in a Modal

Focus Management Exercise

Let’s add focus management to a modal!

Modals are all over the web, and they have some unique focus management concerns. When a modal or other layer opens, we need to send focus into it. When it’s closed, we need to restore focus to where it was previously.

Click on the images to open them in a full-screen modal layer. Where is your keyboard focus when it opens and when it closes? Can we improve the keyboard accessibility of this component?

Background

Cart, contains items

/