Flatpickr + SweetAlert2 = 键盘辅助功能问题

Question

复制 link: 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 模态不同，Sweetalert2 模态由 ajax 插入到树中，但我不知道这是否是错误的原因。

Answer 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

Flatpickr + SweetAlert2 = 键盘辅助功能问题

Flatpickr + SweetAlert2 = Keyboard accessibility issues

javascript

html

sweetalert2

flatpickr