From ee0ac00f80d23673a29451cc0647b8fc895b6856 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Sun, 20 Nov 2022 20:02:31 +0100
Subject: [PATCH] Make Tooltips Accessible

When using accessibility tools like screen magnifiers, dynamic screen
content can be quite problematic. In particular content, which only
appears if you interact with elements somewhere else on the screen. That
is the case, for example, with the current implementation of tooltips
used by audiobookshelf.

This patch provides a slight adjustment, keeping the tooltips open if
you hover over them. This allows users to have better access to the
content.
---
 client/components/ui/Tooltip.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/components/ui/Tooltip.vue b/client/components/ui/Tooltip.vue
index dbaf4efe..f376329b 100644
--- a/client/components/ui/Tooltip.vue
+++ b/client/components/ui/Tooltip.vue
@@ -21,7 +21,8 @@ export default {
     return {
       tooltip: null,
       tooltipId: null,
-      isShowing: false
+      isShowing: false,
+      hideTimeout: null
     }
   },
   watch: {
@@ -46,10 +47,12 @@ export default {
       var tooltip = document.createElement('div')
       this.tooltipId = String(Math.floor(Math.random() * 10000))
       tooltip.id = this.tooltipId
-      tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs text-center hidden sm:block'
+      tooltip.className = 'tooltip-wrapper absolute px-2 py-1 text-white text-xs rounded shadow-lg max-w-xs text-center hidden sm:block'
       tooltip.style.zIndex = 100
       tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
       tooltip.innerHTML = this.text
+      tooltip.addEventListener('mouseover', this.cancelHide);
+      tooltip.addEventListener('mouseleave', this.hideTooltip);
 
       this.setTooltipPosition(tooltip)
 
@@ -95,6 +98,7 @@ export default {
       } catch (error) {
         console.error(error)
       }
+
       this.isShowing = true
     },
     hideTooltip() {
@@ -102,11 +106,16 @@ export default {
       this.tooltip.remove()
       this.isShowing = false
     },
+    cancelHide() {
+      if (this.hideTimeout) clearTimeout(this.hideTimeout);
+    },
     mouseover() {
       if (!this.isShowing) this.showTooltip()
     },
     mouseleave() {
-      if (this.isShowing) this.hideTooltip()
+      if (this.isShowing) {
+        this.hideTimeout = setTimeout(this.hideTooltip, 100)
+      }
     }
   },
   beforeDestroy() {