Commerce · Use case

Browse, add, review, return.

The complete experience combines concise product cards, asynchronous feedback, a real modal cart, editable quantities, Escape, and focus restoration.

Prerequisite patterns

Complete demo

Trail supply

Cart: 0 items.

Your cart

Your cart is empty.

    Total$0

    Interaction journey

    Each transition has an owner.

    Buttons expose local busy states. The shop status announces cart results. The modal creates a deliberate context change and owns quantity feedback while open.

    Add

    Focus remains on the product button while the item is added.

    Announce

    The shared status gives product name and complete cart quantity.

    Review

    The native dialog moves focus inside and contains keyboard navigation.

    Return

    Close or Escape restores focus to Open cart.

    End-to-end test

    Follow the task, not just components.

    1. Tab through every card: title link, then Add to cart; images and prices are skipped.
    2. Add multiple products and confirm each busy state, product name, and cart quantity.
    3. Open the cart and confirm focus starts at the named dialog title.
    4. Change quantities and confirm totals and complete status messages update.
    5. Tab forward and backward without escaping the open modal.
    6. Close with the button and with Escape; focus returns to Open cart both ways.
    7. Resize and zoom while the dialog is open; all content and controls remain reachable.