Commerce · Concept

Let the platform make the cart modal.

A modal is more than an overlay. It needs a name, deliberate focus, contained keyboard navigation, Escape support, and a reliable return point.

The principle

Use <dialog> and showModal() before rebuilding modal behavior with divs and ARIA.

Focus lifecycle

Plan entry and exit together.

The modal journey begins before opening and ends only after focus returns to a logical place in the page.

Remember

Store the control that opened the dialog.

Open

Call showModal() so outside content becomes inert.

Focus

Move focus to the title or first logical control inside.

Restore

After close or Escape, return focus to the opener.

Keyboard-testable demo

Open the cart, then try Tab and Escape.

  • The visible title names the dialog.
  • Initial focus goes to the title so the cart contents can be read in order.
  • Native modal behavior keeps Tab inside.
  • Escape closes through the native cancel behavior.
  • Focus returns to Open cart.

Your cart

  • Harbor trail boot

    Tan · $128


Do / Don’t

An overlay is not automatically modal.

Visual layering does not make the background inert, contain focus, expose a dialog name, or implement Escape.

Don’tStyle a generic div and stop

Looks modal, behaves like an ordinary region

Keyboard focus can escape behind it, and assistive technology may not know a dialog opened.

<div class="overlay">
  <div class="cart">…</div>
</div>
DoOpen a native modal dialog

The platform supplies modal foundations

Add an accessible name, logical initial focus, visible close control, and focus restoration around native behavior.

<dialog aria-labelledby="cart-title">
  <h2 id="cart-title" tabindex="-1">Your cart</h2>
  …
</dialog>

dialog.showModal();

Quick test

Test every way out.

  1. Open with keyboard and confirm focus moves inside.
  2. Listen for the dialog role and “Your cart” name.
  3. Press Tab and Shift+Tab; focus must remain inside while open.
  4. Close with the visible button and confirm focus returns to Open cart.
  5. Open again, close with Escape, and confirm the same return.
  6. Confirm background content cannot be clicked or focused while the modal is open.
  7. Zoom and test small screens so dialog content remains reachable and scrollable.