javascript - Flatpickr + SweetAlert2 = 键盘可访问性问题

Question

转载链接:
https://jsfiddle.net/isaporto/hav7pqs5/
HTML:

<button>
 Click here
</button>

JS:

document.querySelector('button').addEventListener('click', () => {
  Swal.fire({
    title: 'Select a date',
    html: `<div id="modal-content">
             <form>
               <input type="text" class="flatpickr">
             </form>
           </div>`,
    showConfirmButton: false,
  })
  flatpickr(".flatpickr", {
    dateFormat: "d/m/Y",
    minDate: new Date(),
    static: true
  })
})

当 datepickr 输入聚焦并且用户单击向下箭头键时，它应该聚焦并允许我们使用键盘在 flatpick 日历中导航，但在 sweetalert 模式中不会发生这种情况
与bootstrap modal不同的是，Sweetalert2 modal是通过ajax插入到树中的，不知道是不是这个bug的原因。

Answer 1

默认情况下，SweetAlert2 将停止传播 keydown显示模态时将事件发送到文档。
另一方面，Flatpickr 正在将其弹出窗口添加到文档的 body 中。 ，在 SweetAlert2 容器之外。
为了在 SweetAlert2 中修复 Flatpickr 的键盘 a11y，您必须使用 stopKeydownPropagation 启用 keydown 事件的传播。范围:

Swal.fire({
  ...
  stopKeydownPropagation: false
})

SweetAlert2 中 Flatpickr 的现场演示可以在这里找到: https://sweetalert2.github.io/recipe-gallery/input-date-flatpickr.html