ARIA дружественный поповер, который можно выложить из - PullRequest
Новая
       5

ARIA дружественный поповер, который можно выложить из

0 голосов
/ 15 февраля 2019

Я хочу создать всплывающее окно рядом с некоторыми данными, которые содержат несколько полей ввода.Давайте представим, что у нас есть следующая структура документа 

<input name="before-the-data" type="text />
<div id="the-data"><!-- presents some data --></div>
<input name="after-the-data" type="text />

Когда вы перемещаетесь вперед от before-the-data, поповер должен открыться, и фокус должен перейти к первому входу в этом поповере.Этот поповер добавляется к телу вроде Modal из material-ui, так что он лежит над остальным содержимым.Аналогично, всплывающее окно должно открываться при переходе назад от after-the-data.

. Поповер должен вести себя так, как если бы он находился внутри #the-data для целей навигации, но фактическая позиция была бы в конце <body> для представленияцели.

Чтобы добиться этого эффекта, я устанавливаю tabindex="0" на #the-data и запускаю открытие модального режима и смещаю фокус на него.Пока все работает нормально.

Теперь вопрос: как мне лучше создать следующий эффект?Вы должны быть в состоянии вернуться назад из модального.Моя идея заключалась в следующем: когда фокус смещается от него или пользователь щелкает за пределами модального окна, мы закрываем его и восстанавливаем фокус на элементе, который имел фокус до его открытия.Это можно сделать с помощью простого обработчика onblur и onclick на объединительной плате.Для поддержки табуляции полученный модальный вид выглядит следующим образом: 

<div id="backplane" onclick="closeAndRestoreFocus()"
                    onfocusout="checkCloseAndRestoreFocus()">
    <div id="beforecanary" onfocus="shiftFocusBefore()" tabindex="0"/>
    <!-- popover content -->
    <div id="aftercanary" onfocus="shiftFocusAfter()" tabindex="0"/>
</div>

Вы можете видеть, что я добавил два div, которые вы можете вкладывать в beforecanary и aftercanary.Когда они фокусируются, они смещают фокус на before-the-data и after-the-data соответственно, чтобы имитировать, как будто поповер на самом деле был внутри #the-data.

На данный момент, вы, надеюсь, поняли, что я пытаюсь создать,Таким образом, вопрос: насколько хорош этот подход в целом в отношении доступности и как я могу убедиться, что я следую передовым практикам WAI-ARIA?

1 Ответ

0 голосов
/ 15 февраля 2019

мы закрываем его и восстанавливаем фокус на элементе, который имел фокус до его открытия

Это можно считать ловушкой табуляции, 2.1.2 Нет ловушки клавиатуры .Разве элемент, который имел фокус перед всплывающим окном #the-data?Так что если я вкладка с before-the-data до #the-data, всплывающее окно откроется.Если я нажму esc , чтобы закрыть всплывающее окно (вы не упомянули, что esc закроет всплывающее окно, но оно должно ), фокус вернется к #the-data, который автоматически снова откроет всплывающее окно, не так ли?(Потому что onfocus () снова запустился.)

Если я просто tab на протяжении всего процесса, я думаю, что это сработает.Это просто удаление всплывающего окна, которое вызывает проблему.Пролистывая все подряд, можно переместить фокус с before-the-data на #the-data на элементы во всплывающем окне на after-the-data, а затем на остальную часть страницы, верно?

При перемещении назад, с after-the-data на#the-data, перемещен ли фокус на элемент последний во всплывающем окне?Поскольку я вкладываю назад, он должен быть на последнем элементе, чтобы я мог продолжать вкладывать назад через всплывающее окно и затем к before-the-data.

Поповер должен вести себя так, как если бы он был внутри# данные для целей навигации, но фактическая позиция будет в конце для целей представления.

Если всплывающее окно находится в DOM в конце, это не позволит естественномупорядок вкладок.Вы, конечно, можете поместить его туда, но тогда вам придется управлять порядком вкладок.Было бы намного проще, если бы всплывающее окно было действительно частью #the-data.Затем браузер обрабатывает порядок табуляции естественным образом.

Вы также должны быть осторожны с автоматическим открытием всплывающего окна, но это может нарушать 3.2.1 В фокусе ,См. « Пример сбоя: диалоговое окно справки ».Это вроде описывает то, что вы делаете, но немного отличается.В примере сбоя фокус перемещается в поле ввода, и автоматически открывается всплывающее окно, а фокус перемещается от ввода к всплывающему окну.Ваш случай немного отличается, потому что вы сначала перемещаете фокус со входа (или before-the-data), а затем всплывающее окно, которое не нарушает 3.2.1.Я просто хотел указать на это в случае, если вы измените свою модель взаимодействия.

Итак, в целом, ваше текущее поведение похоже на пропускную ссылку .Пропускаемые ссылки часто реализуются как «скрытые» ссылки, которые становятся видимыми только тогда, когда вы вкладываете к ним и позволяете перейти к определенному месту на странице.Факт, что они становятся видимыми при фокусировке, - это то, как работает ваше всплывающее окно (поскольку оно также становится видимым, когда получает фокус).Разница в том, что пропущенные ссылки не закрываются, если вы нажмете esc .Они do отклоняются, если вы нажимаете вне их.Я думаю, что это поведение, которое вы пытаетесь имитировать.Если вы ранее проигнорировали мой комментарий о том, что esc должен закрыть ваше всплывающее окно, то все будет в порядке.У меня был только этот комментарий, потому что он звучал так, будто ваше всплывающее окно было похоже на модальный диалог.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...