0:00 Let's take a look at the basic model component we're starting with. Here's an in page example, so if I click the button, the model will show, and then I can cancel or confirm to close the model.

0:10 The way it's currently set up on the page, we have an isOpen piece of state, and then we conditionally display the model if the isOpen prop is true. Below that I've added some page contents to bring some context and be able to discuss some of the shortcomings of the current implementation.

0:24 Right now, the model component looks pretty good, but it's lacking some really important features in terms of accessibility and usability. A model, when open, should technically freeze the background and prevent the body from scrolling, but right now, if I try to scroll the background, you can see that it scrolls freely.

0:41 Another thing a model should do while open is trap the focus within the model. Right now, if I hit the tab key, you can see we'll go on the first link, and then first and second button, but if I keep tabbing, we will end up into the focusable elements in the background page, and that's not what we want.

0:58 Another shortcoming is the only way to close the model is click one of the buttons. I can't click outside here, or I cannot hit the escape key, this won't do anything. All of this behavior, scroll locking, focus trapping, keyboard navigation, are essential to a model component.

1:14 Before we implement multiple style variants to our model, let's improve the usability and accessibility by using Headless UI. Here's your challenge. At the top of the model file, you see we already import the Dialog component from Headless UI.

1:27 Your job is to turn this component into a Dialog component, and then also convert the components to use the Dialog. Panel and Dialog.Title components, and this should put us in a really nice place.