Как сфокусироваться на триггерном элементе, который открывается и модально, и как только содержимое будет сохранено, вся страница будет уничтожена и снова отображена.

Question

Это скорее архитектурный вопрос, поэтому на веб-странице есть кнопка редактирования, позволяющая редактировать запись. Как только я нажимаю кнопку редактирования, модальный открывается, я меняю некоторые данные о записи, и я нажимаю «Сохранить».

Фокус возвращается к кнопке закрытия (X) закрытия тоста (сохранение подтверждения) на секунду, и даже до того, как тост исчезает, фокус возвращается в браузер, так как сохранение обновляет страницу, а дом разрушается и создается снова.

То, что мы ожидаем сделать, - это как только мы нажмем кнопку сохранения в модальном режиме, фокус должен перейти к кнопке закрытия тоста (x) и подождать, пока диалоговое окно подтверждения (тост) не исчезнет, ​​а затем снова вернется к кнопке редактирования.

---

Итак, есть 2 проблемы, которые необходимо решить

Как установить фокус на кнопку редактирования (триггер), когда дом будет разрушен, и созданными снова, как только мы попали кнопку сохранить в модальном, соге есть несколько кнопок до этого, как новый, просмотр, а затем редактирование. как конкретно установить фокус на триггерный элемент?

Как создать стек фокуса, где мы можем указать, что фокус должен идти сначала на тост, а n - на спусковой крючок, даже если дом разрушен и создан снова (возможно ли это)?

Когда я говорю, что «дом разрушен и создан снова», это частично связано с заменой содержимого DOM? Или вся страница перезагружается?

Только панель заголовка, в которой эти кнопки запуска (Новый, Редактировать, Вид) уничтожаются и создаются снова. Так только частично дом разрушается и создается снова

Answer 1

Сообщение тоста, как правило, временное и уходит само по себе. Он должен быть ненавязчивым, чтобы его можно было легко игнорировать. Если у вас есть кнопка закрытия X, и вы хотите, чтобы пользователь нажал на нее (или нажал ESC), чтобы закрыть сообщение с тостом, у вас действительно есть модальное диалоговое окно вместо сообщения с тостом.

На сайтах, которые я использовал, которые позволяют редактировать и сохранять, я обнаружил, что достаточно простого сообщения о сохранении на странице. Сообщение сохранения может быть областью aria-live, чтобы сообщение читалось для пользователей программы чтения с экрана. Сообщение сохранения обычно исчезает, если я начинаю редактировать другие поля.

Если вам нужно принудительно сфокусироваться, чтобы вернуться где-нибудь после воссоздания DOM, вам нужно будет сохранить, где вы были (cookie), а затем получить точку сохранения и просто вызвать метод focus().