Доступность входов с отображением z-индекса в диалоге

Question

У меня есть требование, чтобы показать диалог, который объединяет некоторые входные данные из фона (не все), поскольку это улучшает их функциональность. Поэтому я хочу, чтобы они сливались с диалогом и были доступны для редактирования. Это не очень сложно сделать с z-index, но входные данные должны быть вне разметки диалога. Интересно, работает ли это для программы чтения с экрана (я думаю, что нет), и если нет: есть ли у вас какие-либо предложения, как я мог бы сделать эту работу, не настраивая каждый ввод всей формы?

Здесь является примером того, что я хотел бы сделать sh доступным способом:

  function showDialog()
  {
    document.getElementById("dialog").style.display = 'table';
  }

  function hideDialog()
  {
    document.getElementById("dialog").style.display = 'none';
  }

  form > div
  {
    margin: 10px;
  }

  .layer
  {
    margin: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }

  .showThrough
  {
    position: relative;
    z-index: 1100;
  }

<form>
  <div class="showThrough">
    <label>Input 1:</label><input/>
  </div>
  <div>
    <label>Input 2:</label><input/>
  </div>
  <div class="showThrough">
    <label>Input 3:</label><input class="showThrough"/>
  </div>
  <input type="button" onclick="showDialog()" value="Show dialog"/>
  <input type="button" value="Submit"/>
  <div id="dialog" role="dialog" class="layer" style="display: none;">
    <input type="button" value="Close" onclick="hideDialog()"
      style="position: absolute; bottom: 15px; right: 15px;"/>
  </div>
</form>

Answer 1

Проблемы, о которых вам нужно подумать

Самая большая проблема, которую я вижу в большинстве модалов, заключается в том, что они позволяют фокусироваться вне их.

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

По этой причине вам придется добавить aria-hidden="true" и tabindex="-1" для каждого элемента на странице, который не является частью модального окна, а затем снова удалите его, когда модальное отклонено (это может быть применено к контейнерам, поскольку все их потомки не смогут получить фокус, чтобы не было так страшно, как кажется).

Вам также необходимо использовать этот метод на всех ваших «отключенных» полях, которые не являются частью «модальных» (я поставил их в кавычки, поскольку они не отключены, и это не так. на самом деле это модал!).

Вы также должны убедиться, что модал можно отклонить клавишей Es c, так как это ожидаемое поведение.

Вы также необходимо убедиться, что первый <input> фокусируется программно, когда вы запускаете ваш модал, иначе, когда вы отключаете кнопку «отправить», фокус может не go, где вы собираетесь.

Почему вы это делаете, Есть ли лучший способ?

Вы не указали, почему существует это требование, но если вы просто выделите необходимые поля, вам может быть лучше просто использовать большой толстый контур на них, который активируется вашей кнопкой и не мешая работе документа.

Иногда требования кажутся хорошей идеей, но в показанном вами примере (я знаю, что он был удален), меня это раздражало, что кнопка «закрыть» была недоступна документу и добавила дополнительный шаг в том, чтобы закрыть диалоговое окно, когда я закончил (не следует ли разрешить отправку из диалога?).

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

т.е. вы просто клонируете необходимые поля в свой модал и затем используете tabindex="-1" и aria-hidden="true" на <header> и <main> на весь документ для управления фокусом.

Это делает страницу намного более удобной для обслуживания в будущем, так как вам не придется обновлять скрипт при каждом добавлении раздела на страницу.

Если ваша форма динамическая c (изменение полей), то вы можете просто использовать JavaScript, чтобы создать форму в модальном режиме (т.е. l oop через форму f ields, найдите предметы 'showThrough' и клонируйте их в модал.) или сделайте это на заднем конце.