Javascript FlatPicker&x2B；SweetAlert2=键盘可访问性问题

复制链接：

HTML:

<button>
 Click here
</button>

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
  })
})

点击这里

JS:

<button>
 Click here
</button>

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
  })
})

document.querySelector（'button'）。addEventListener（'click'，（）=>{
喷火({
标题：“选择日期”，
html:`
`,
showconfixton:false，
})
FlatPicker（“.FlatPicker”{
日期格式：“d/m/Y”，
minDate:新日期（），
静态：对
})
})

当DatePicker输入被聚焦并且用户单击向下箭头键时，它应该被聚焦并允许我们使用键盘在flatpick日历中导航，但是在sweetalert模式中，这不会发生

---

与引导模式不同，Sweetalert2模式是由ajax插入到树中的，但我不知道这是否是错误的原因。

默认情况下，当模式显示时，Sweetalert2将停止向文档传播

keydown

事件

另一方面，FlatPicker将其弹出窗口添加到文档的

正文

，位于SweetAlert2容器之外

为了修复SweetAlert2内部FlatPicker的键盘a11y，您必须使用以下参数启用keydown事件的传播：

Swal.fire({
...
stopKeydownPropagation:错误
})

SweetAlert2内部FlatPicker的现场演示可在以下位置找到：