Как спроектировать доступное информационное окно карт Google с пользовательским наложением и, таким образом, соответственно управлять фокусом?

В настоящее время я пытаюсь сделать более доступную версию информационного окна путем расширения класса представления наложения карты Google ( основываясь на этом примере). В моем веб-приложении, когда пользователь нажимает на маркер или на элемент в списке местоположений, отображаемых на боковой панели, информационное окно открывается в позиции соответствующего маркера и отображает дополнительную информацию о выбранном местоположении, которая может включает описание, изображения, оценки, советы и т. д., полученные из другого API. В любой момент времени может быть открыто только одно информационное окно.

Что меня смущает, так это какой семантический элемент или атрибут роли или что не используется для описания информационного окна и, таким образом, как управлять фокусом соответственно? Мои текущие мысли:

  1. использовать role = 'dialog' атрибутировать и развивать информационное окно как диалоговое окно немодального типа, чтобы внешний контент вне информационного окна все еще был доступен. В этом случае маркер и элементы списка могут иметь атрибут aria-haspopup = 'dialog' что бы приятно предупредить об открытии информационного окна. Проблема этого подхода заключается в том, что он носит разрушительный характер и не является исключительно важной информацией, отображаемой в информационном окне, а также информацией, в которой пользователь должен ответить на него.
  2. использовать <aside> элемент, так как содержит информацию, дополняющую маркер или элемент списка боковой панели, по которому щелкнули. Информационное окно будет иметь название местоположения, по которому щелкнули, поэтому информационное окно может быть просмотрено как отдельная информация. Тем не менее, я не могу использовать aria-haspopup атрибут в этом случае. Я полагаю, что мог бы пометить кнопки маркера и элемента списка таким образом, чтобы предупредить пользователя о том, что в результате откроется информационное окно с помощью aria-label,
  3. использование role = 'tooltip' и опишите информационное окно как виджет всплывающей подсказки. Но это подразумевает, что фокус должен быть пойман в ловушку в информационном окне, пока оно не будет закрыто. В реальной реализации информационного окна на карте Google пользователь может взаимодействовать с чем-либо еще на странице, не фокусируя внимание на закрытии информационного окна, и я не думаю, что имеет смысл изменять это поведение по умолчанию. Есть также аргументы о том, может ли всплывающая подсказка вызываться вне события наведения курсора / мыши, и я хочу, чтобы информационное окно появлялось при событии щелчка или при нажатии клавиши ввода / пробела.
  4. реализовать информационное окно как "сворачиваемое содержимое", а связанные кнопки маркера и элемента списка как кнопки "раскрытия". Таким образом, пользователь получает предупреждение о появлении дополнительного контента без прерывания работы, и фокус не попадает в информационное окно. Хотя стилизация не будет соответствовать типичным методам стилей / порядка DOM для разборного контента, так как html информационного окна не появится сразу после html кнопки, которая вызвала открытие информационного окна.

Какой вариант (ы) подходит, или есть лучший подход, который имеет больше смысла?

В зависимости от того, какой подход выбран, следует ли фокусироваться в информационном окне? Если информационное окно закрыто и фокус не попал в информационное окно, куда следует направить фокус после его закрытия с помощью события щелчка или сочетания клавиш:

  1. Кнопка, которая открыла информационное окно?
  2. Последний сфокусированный элемент перед закрытием информационного окна (при условии, что последний сфокусированный элемент находился вне информационного окна)? Но что, если последний сфокусированный элемент был элементом в информационном окне?
  3. body элемент или map элемент?

Кроме того, должен ли фокус сразу перемещаться в информационное окно, когда оно открывается, или оно должно оставаться на кнопке, вызвавшей его открытие?

0 ответов

Другие вопросы по тегам