Monitoring Tab Order in Drawers and Menus After Theme Updates

Cart drawers and mega menus are where keyboard order quietly breaks after an update: focus jumps behind overlays or escapes to the page underneath. A monitoring routine that catches it.

Tab through a cart drawer on a store that just shipped a theme update and there is a fair chance the order goes strange. Focus lands on links in the page behind the drawer. Or it vanishes for three presses, somewhere in a hidden menu, before turning up on the checkout button. Nothing about the drawer looks broken. It is only broken in sequence.

Drawers and menus are the highest risk components on a storefront for this, because they are assembled from moving parts: a trigger, an overlay, animated entry, content loaded after the click. Every theme update, app change, or campaign module reshuffles the DOM, and tab order follows the DOM whether anyone planned it that way or not.

What correct looks like, in order

Open the drawer and focus moves into it, to the heading or the first control. Tab moves through the drawer's own controls in the order they appear on screen. Shift and tab from the first control wraps to the last, because focus is contained while the drawer is open. Escape closes it, and focus returns to the button that opened it, not to the top of the page and not to nowhere.

Menus follow the same logic with one difference: a navigation menu that opens on a button press should let tab move from the button into the menu's first item, and escape should close it and hand focus back to the button. The failure to watch for after updates is the menu whose items sit in the tab order while the menu is closed, so keyboard users tab through thirty invisible links on every page.

A monitoring pass that fits in an hour

Record the expected order once, per component, while the site is known good: the sequence of stops in the cart drawer, the main menu, the search overlay, and any age or consent gate the store runs. That recording is the baseline. After each theme or app update, run the same components with keyboard only and compare sequences. Order changes, new invisible stops, and lost focus on close are diffs, the same discipline as checking alt text or button names.

Automated checks help at the edges. They can flag focusable elements inside hidden containers and positive tabindex values, which are the usual mechanical causes. They cannot tell you the order feels wrong or that focus disappeared behind an overlay. That last part is still a person with a keyboard, which is why the baseline recording matters: it makes the manual pass fast enough that people actually do it.

The tabindex shortcut that causes most of it

When an order looks wrong in development, someone reaches for tabindex values to force the sequence. Positive tabindex is almost always the wrong repair. It overrides the natural order for the whole page, so the drawer element with tabindex 1 now precedes everything, including content that loads later and was never part of the plan. If a monitoring diff shows new positive tabindex values after an update, that is the conversation to have first. Fix the DOM order so the visual order and the tab order are the same order, and the component stops needing supervision.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Monitoring Button Names After Every App Install, Monitoring Aria-Live Announcements When the Cart Changes, and Monitoring Skip Links: The First Tab Stop Nobody Tests.

Frequently asked questions

Why do drawers break after theme updates if nobody touched them?

Because tab order follows the DOM, and updates reshuffle the DOM: new modules, moved scripts, changed wrappers. The drawer code is untouched and its position in the page changed underneath it.

Should focus be trapped inside an open cart drawer?

While the drawer is open and modal, yes. Tab should cycle within it, escape should close it, and focus should return to the control that opened it.

Can automated tools check tab order?

Partly. They flag focusable content in hidden containers and positive tabindex values. Whether the sequence makes sense and focus stays visible still needs a manual keyboard pass.

What is wrong with using positive tabindex to fix order?

It overrides the natural order page-wide and breaks again as soon as content changes. Reordering the DOM so visual and tab order match is the durable fix.