From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 7 Jul 2020 17:16:14 +0000 (+0200)
Subject: wip #3775 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=46c9b81d0fc02d2346d5af83b7d0a4d9905f1a57;p=fluidbook-html5.git

wip #3775 @1
---

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 356eb694..4a47a970 100644
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -3,6 +3,7 @@ function FluidbookTooltip(fluidbook) {
     this.displaying = false;
     this.mouseX = 0;
     this.mouseY = 0;
+    this.type = 'mouse';
     this.init();
 }
 
@@ -11,6 +12,10 @@ FluidbookTooltip.prototype = {
         var $this = this;
 
         $(window).on('mousemove', function (e) {
+            if ($this.type === 'keyboard') {
+                $this.type = 'mouse';
+                $this.hideTooltip();
+            }
             $this.updateMousePosition(e);
         });
 
@@ -20,11 +25,21 @@ FluidbookTooltip.prototype = {
 
 
         $(document).on('mouseover', 'a[data-tooltip]', function (e) {
+            $this.type = 'mouse';
             $this.updateMousePosition(e);
             $this.eventTriggered(this);
         });
+        $(document).on('focus', 'a[data-tooltip]', function (e) {
+            $this.type = 'keyboard';
+            var rect = this.getBoundingClientRect();
+            $this.updateMousePosition({pageX: rect.x + rect.width / 2, pageY: rect.y + rect.height / 2});
+            $this.eventTriggered(this);
+        });
+        $(document).on('blur', 'a[data-tooltip]', function (e) {
+            $this.hideTooltip();
+        });
 
-        $("body").append('<div id="tooltip" aria-hidden="true"></div>');
+        $("body").append('<div id="tooltip" role="tooltip"></div>');
     },
 
     updateMousePosition: function (e) {
diff --git a/style/00-import.less b/style/00-import.less
index 29824c56..bede759d 100644
--- a/style/00-import.less
+++ b/style/00-import.less
@@ -1,4 +1,5 @@
 @import "variables";
 @import "mixins";
 @import "mmenu/mmenu";
-@import "nav-horizontal";
\ No newline at end of file
+@import "nav-horizontal";
+@import "accessibility";
\ No newline at end of file
diff --git a/style/accessibility.less b/style/accessibility.less
new file mode 100644
index 00000000..ad8b3735
--- /dev/null
+++ b/style/accessibility.less
@@ -0,0 +1,9 @@
+.visually-hidden, #accessible-contents {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
\ No newline at end of file