# Where should keyboard focus go when a dialog deletes the item that opened it? > How to recover keyboard focus after a destructive dialog removes its own trigger, with patterns for lists, empty states, and route changes. Canonical URL: https://www.devobs.io/articles/qa-dialog-focus-after-deletion/ By: Elias Brooks Published: 2023-05-07T15:58:11.895Z Updated: 2026-09-06T08:31:04.426Z Section: Architecture If a dialog confirms deletion of the item that opened it, do not try to return focus to the vanished trigger. Move focus to the nearest surviving control that lets the user continue the same task: usually the next item’s primary action, the previous item if there is no next one, or an empty-state action if the list is now empty. That matches the [WAI-ARIA dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) and keeps focus order meaningful under [WCAG 2.4.3](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html). ## What is the rule when the opener no longer exists? The key rule is explicit in the [WAI-ARIA dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/): when a dialog closes, focus normally returns to the invoking element, unless that element no longer exists. In that case, focus should move to “another element that provides logical work flow.” For a delete confirmation, the workflow target should be chosen after the UI update is committed. That ordering matters: first remove the item from state or navigate, then place focus on the element that actually survived. Otherwise you risk sending focus to a node that is about to unmount. ## Which surviving element is the best target? Use this priority order: 1. The next sibling item’s primary action. 2. If there is no next sibling, the previous sibling’s primary action. 3. If the collection is empty, the empty-state action, such as “Create item” or “Back to items”. 4. If deletion changes the route, the new page’s main heading or first meaningful control. This follows [WCAG 2.4.3](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html), which requires focus to move in an order that preserves meaning and operability. In practice, pick the control that best answers the user’s implicit next question: “What can I do now?” ### Worked example: deleting a table row Suppose each row has an “Actions” button that opens a modal menu and then a confirmation dialog. - Cancel: close the dialog and return focus to the same row’s trigger, because it still exists. - Confirm delete, middle row: remove the row, then focus the next row’s “Actions” button. - Confirm delete, last row: remove the row, then focus the previous row’s “Actions” button. - Confirm delete, only row: replace the table with an empty state and focus its primary action. That sequence is predictable for keyboard and screen-reader users because focus stays near the changed content instead of jumping to the browser chrome, page start, or an unrelated toast. ## Where should initial focus go inside the dialog? For destructive confirmation, start with a safe default. The [WAI-ARIA dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) says it may be advisable to focus the least destructive action when the final step is hard to reverse, such as deleting data. In a typical confirm-delete dialog, that means initial focus on Cancel, not Delete. If the dialog includes longer explanatory text, focus a static element such as the title or first paragraph with `tabindex="-1"` so the content can be read in order before action buttons. ## What changes when delete also navigates away? If confirm delete takes the user to another screen, treat focus recovery as page-entry focus, not dialog-return focus. Move focus to the destination page’s main heading or first task-relevant control after navigation completes. The same standard applies: preserve a logical order and let the user understand where they landed. ## Should a toast receive focus? Usually no. A toast is status, not the next step. Keep focus on the surviving workflow target and announce status through a polite live region. Only move focus to a message if the message itself requires immediate action. **Follow-up: What if virtualization or filtering reorders the list after delete?** Resolve the new visible collection first, then focus the first logical surviving item in that rendered order. **Follow-up: What if there is no good control near the deleted item?** Focus the closest stable landmark for the next task, usually the page heading, toolbar action, or empty-state button. Next step: write one focus-recovery function for each destructive flow, and test it with keyboard-only navigation before shipping. Reviewed: 2026-09-05. ## Source references - -