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?


1 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.