What to focus on after row deletion

Question

I'm designing the keyboard navigation for a table/grid. Each row in the grid has a "delete this row" button. After a button is activated and the current focused parent row of the button is deleted, what should be the element of focus?

• The next row first focusable?
• The next row current focusable (next delete button)?
• The first element of the row (first header)?
• Any other more valid idea?

Notes:

• https://www.w3.org/TR/wai-aria-practices-1.1/examples/grid/dataGrids.html has no related solution :(
• By default browsers refocus body.

Answer 1

Replace the row with 'deleted' and focus it with tabindex="-1" (so you can only focus it programmatically).

Then once focus leaves the row you can make it disappear if you wish (but not necessary as it will not be focusable again).

I recommend this as if you focused the next delete button they user may not realise that an action was performed or think an action failed and end up deleting the wrong row.

By doing the above the would be greeted with 'deleted' after the row successfully deletes and can navigate from the position they were already at in the list (which should make it easy to keep their orientation on the page).