The Cart Upsell Drawer That Steals Your Keyboard

A cart upsell drawer slides in, offers a warranty, and steals the keyboard. The shopper who was tabbing through the cart is now trapped in a drawer with no way out except the mouse. That is a keyboard trap, and it is a WCAG failure, not a design choice.

The drawer opens and the keyboard is gone

A cart upsell drawer is a modal by another name, and it has to behave like one. When it opens, focus has to move into it. While it is open, focus has to stay inside it. When it closes, focus has to return to the element that opened it. Most implementations do none of these three things. The drawer opens, focus stays on the cart behind it, and the shopper who tabs forward walks through the page behind the drawer, unable to see where they are. Or the drawer traps focus with no escape, and the only way out is the mouse.

The test takes thirty seconds. Open the cart, tab to the upsell trigger, open the drawer, and keep tabbing. If you can tab to elements behind the drawer, the focus trap is broken. If you cannot reach the close button, the drawer is a trap. If Escape does nothing, the drawer has no exit. Any one of these is a failure of WCAG 2.1.2, No Keyboard Trap, and it is a failure that a screen reader user experiences as the page simply stopping.

The quantity stepper trap was the same failure in a smaller control: a component that takes focus and does not give it back. The drawer is the same bug at a larger scale, and the fix is the same shape.

Auto-opening is the root cause

Most upsell drawers open by themselves, triggered by adding an item to the cart or by a timer. That is the root cause of the trap, because a drawer that opens without the shopper asking for it is a surprise, and a surprise is hard to manage with a keyboard. The better pattern is a drawer that opens only when the shopper clicks a clearly labelled button, like add a warranty or complete your order. A user-initiated drawer is far less likely to trap anyone, because the shopper knows it opened and knows where focus should be.

If the business insists on auto-opening, the drawer has to announce itself with a dialog role and an aria-label, move focus into it immediately, and close on Escape. That is the minimum. Anything less is a modal that does not know it is a modal, and it will fail the first keyboard audit it meets. The error summary post showed the same discipline on a different component: announce it, move focus to it, and give the user a way back.

The audit that finds it

Test every drawer in the cart with a keyboard alone, no mouse, and no screen reader. Open it, tab through it, close it with Escape, and check that focus returns to the trigger. Then test it with a screen reader, and check that the drawer is announced as a dialog and that its heading is read. If either test fails, the drawer is broken, and the fix is to treat it as a modal, because that is what it is.

WCAG 2.1.2 is a Level A criterion, which means it is the most basic requirement in the standard. A cart that traps keyboard users is not a minor accessibility gap. It is a cart that a whole class of shoppers cannot use, and the upsell inside the drawer is revenue that those shoppers will never see, because they left before the drawer let them go.

Frequently asked questions

Which WCAG criterion does a keyboard trap fail?

WCAG 2.1.2, No Keyboard Trap, requires that keyboard focus can be moved away from any component using only the keyboard. A drawer that opens on a click and cannot be closed with the keyboard, or that lets focus escape behind the drawer, fails it. The fix is to trap focus inside the drawer while it is open and return it to the trigger when it closes.

Should Escape close a cart upsell drawer?

Escape to close is the standard, and it should also move focus back to the element that opened the drawer. A close button alone is not enough if it is the only way out and the user cannot reach it by keyboard. Escape, a close button, and focus return together make the drawer usable.

Can focus stay on the cart when a drawer opens?

No. Focus has to move into the drawer when it opens, so a keyboard user and a screen reader user know it appeared. A drawer that opens visually but leaves focus on the cart behind it is invisible to both. Move focus to the drawer heading or the first control, and announce the drawer with a dialog role.

Should an upsell drawer ever open by itself?

Yes, and that is the better pattern. A drawer that opens only when the shopper asks for it, by clicking a clearly labelled button, is far less likely to trap or surprise anyone than one that opens on its own. Auto-opening drawers are the usual cause of the trap.