WCAG 1.4.13 Issue: Tooltips not hoverable or dismissible

[tommed]

According to WCAG, all tooltips should be dismissible by pressing the escape character on your keyboard.

I thought may be we could do something custom by hooking into the keyboard event and keeping a reference of the tooltip being shown, but thought given the requirement in WCAG this is something that should be implemented within this library.

Is there a way to make all tooltips dismissible on escape please?

[KABBOUCHI]

Is there a way to make all tooltips dismissible on escape please?

[...document.querySelectorAll("[data-tippy-root]")].forEach(el => el._tippy?.hide())

[tommed]

Perfect, that worked a treat.

// WCAG: 1.4.13 Issue 019: Tooltips not hover-able or dismissible
// hook into keypress and hide all tooltips on esc press
function tippyOnKeyPress(e) {
  if(e.which == 27){
    ([ ...document.querySelectorAll("[data-tippy-root]") ]).forEach(el => el._tippy?.hide())
  }
}

router.afterEach(() => {
  // tooltip dismiss (needed for wcag compliance)
  document.removeEventListener('keydown', tippyOnKeyPress)
  document.addEventListener('keydown', tippyOnKeyPress)
})