3

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:

1 Answer 1

3

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

3
  • 1
    I'm not sure how the deleted message won't be seen again? A user of iPhone VoiceOver, for example, can still swipe forward and then back again to an item with tabindex="-1" It will then be announced again. And how can I make it disappear? There's no way for me to know if someone navigates away from the item using, for example, a swipe motion.
    – user295469
    Jun 11 at 19:42
  • @user295469 I do agree, although there is nuance here, I said "focus" leaves the row (which can be tracked no matter what input modality someone chooses). However you have made a strong and valid point to just leave the row showing as "deleted" until a page refresh (and this also opens up the possibility for an "undo" action on the row, which would be an accessibility and general UX win also!). Jun 13 at 3:27
  • 1
    I actually ended up implementing your idea, and just leaving the line saying "deleted" Good idea about an undo option. :)
    – user295469
    Jun 13 at 3:46

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.