0

This is more of an architectural question, so in a webpage I have a edit button when allows me to edit a record. As soon as I press the edit button a modal opens up I change some of the records info and I hit save.

The focus returns to the (X) close button of the toast(save confirmation) for a second and even before the toast disappears focus returns to the browser since the save refreshes the page and the dom is destroyed and created again.

What we expect to do is once we hit the save button in the modal, focus should go to the toast (x) close button and wait till the confirmation dialog(toast) disappears and then return to the edit button again.

So there is 2 problems to be solved

How to set focus on the edit button(trigger) when the dom is destroyed and created again once we hit save button in the modal, coz there are a few buttons before that like new, view and then edit. how to specifically set focus on the trigger element?

How to create focus stack where we can specify that the focus should go to toast first and the n to the trigger even if the dom is destroyed and created again (is that possible)?

When I say "the dom is destroyed and created again" is it about replacing DOM content partially? Or the whole page is reloaded?

Just the header panel in which these trigger buttons (New, Edit, View) are destroyed and created again. So only partially the dom is destroyed and created again

Ninja
  • 11
  • 3

1 Answers1

0

A toast message is typically temporary and goes away on its own. It should be unobtrusive so that it can be easily ignored. If you have an X close button and you want to user to click on it (or hit ESC) to dismiss the toast message, then you really have a modal dialog instead of a toast message.

On sites that I've used that allow editing and saving, I've found that just a simple save message right on the page is sufficient. The save message can be an aria-live region so that the message is read for screen reader users. The save message usually goes away if I start editing other fields.

If you have to force focus to go back somewhere after a DOM is recreated, you'll have to save where you were (cookie) and then get the save point and just call the focus() method on it.

slugolicious
  • 15,824
  • 2
  • 29
  • 43