У меня есть компонент таблицы React, представляющий набор элементов и их свойств из хранилища данных. Компонент таблицы содержит компонент строки заголовка столбца, компонент строки фильтра и компоненты строки данных. Сгенерированная HTML - это стандартная разметка таблицы с элементами table, thead, tbody, tr, th и td.
Заголовки столбцов - это ссылки, которые пользователь может использовать, чтобы указать поле для сортировки данных.
Строка фильтра содержит поле ввода для каждого столбца, в который пользователь может вводить текст, чтобы отображались только строки с совпадающими значениями.
Каждая строка данных содержит ячейку, содержащую ссылки для «Изменить» и «Удалить». Когда пользователь выбирает «Редактировать», строка перерисовывается, но в ячейках, содержащих редактируемые поля, отображается поле ввода, а ячейка, содержащая ссылки «Редактировать» и «Удалить», теперь содержит «Сохранить» и «Отмена». "links.
Когда пользователь вносит изменения и выбирает" Сохранить ", изменения отправляются на сервер для внесения изменений в базовый элемент в хранилище данных. После получения ответа об успехе отображается модальное подтверждение, а затем, когда оно закрывается, вся таблица повторно отображается, потому что:
- , если одно из отредактированных полей находится в столбце сортировки, тогда таблица может быть пересортирована; и
- , если одно из отредактированных полей находится в столбце, который в данный момент фильтруется, то теперь строка может больше не соответствовать текущим фильтрам и станет скрытой.
Если пользователь выбирает Если «Удалить», то элемент основного хранилища данных удаляется, и, конечно, исчезает вся строка, поэтому я явно не могу вернуть фокус на it .
Мой вопрос в интересах как для пользователей клавиатуры, так и для пользователей программы чтения с экрана, именно на этом и должна сосредоточиться любая из этих операций. Я мог бы сказать, что , если отредактированная строка все еще отображается, тогда мой код должен найти ее и выделить ее. Но это невозможно, если строка была удалена или стала скрытой при повторном рендеринге таблицы. Я полагаю, что расположение фокуса должно быть согласованным во всех случаях, потому что пользователь не должен выяснить, была ли строка перемещена или стала скрытой, а затем угадать среди нескольких правил, где фокус был установлен в каждом случае.
Единственные согласованные местоположения, о которых я могу думать, - это верх таблицы или первая строка данных, но я не знаю, какой из них лучше, или есть ли третий вариант, о котором я не думаю , Или согласованность не является лучшим подходом? Любой совет?