Flatpickr + SweetAlert2 = 键盘可访问性问题答案

【问题标题】：Flatpickr + SweetAlert2 = Keyboard accessibility issuesFlatpickr + SweetAlert2 = 键盘可访问性问题
【发布时间】：2021-07-08 03:16:21
【问题描述】：

复制链接： 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 的原因。

【问题讨论】：

标签： javascript html sweetalert2 flatpickr

【解决方案1】：

默认情况下，SweetAlert2 将在显示模式时停止将keydown 事件传播到文档。

另一方面，Flatpickr 正在将其弹出窗口添加到文档的 body，位于 SweetAlert2 容器之外。

为了在 SweetAlert2 中修复 Flatpickr 的键盘 a11y，您必须使用 stopKeydownPropagation 参数启用按键事件的传播：

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

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

【讨论】：