Drawer

A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by.

Open a drawer from any edge. Escape, the scrim, the close key or a drag on the grip put it away; focus goes back to the key you used.

• A native modal <dialog>: focus moves in, is held inside, and returns to the key that opened it; everything behind it is inert.
• Name it with aria-labelledby pointing at its title. Every drawer has a visible close key with an aria-label; the grip and the scrim are conveniences.
• Escape closes it. A drawer that holds unsaved work uses data-lock so a stray click does not lose it, and says why on screen.
• The page behind stops scrolling while it is open, so a wheel or a swipe over the drawer never moves what is under it.
• The slide is a transform and a fade of the scrim; with reduced motion the drawer simply appears and disappears.
• Drawers do not open other drawers: a second layer of modal is a page.