wip #3775 @1

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 356eb694e5da5a130d99500193bc3199b15f44c4..4a47a970ca0054675dd11bd7421db601c01a0f7f 100644 (file)
--- 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 29824c56004cb1a31e3b7a261f46378dd60291cb..bede759d3d64523fdd6dfbe035dab685daa36823 100644 (file)
--- 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 (file)
index 0000000..ad8b373
--- /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