From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 15 Jul 2020 15:10:45 +0000 (+0200)
Subject: fix #3757 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7eccb86611a4bf048e60ae7fbf8134f454143a3b;p=fluidbook-html5.git

fix #3757 @3
---

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 6990f8f2..fac1b05e 100644
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -76,10 +76,12 @@ FluidbookAccessibility.prototype = {
 
     // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
     add_event_listener('mousedown', function () {
+        $('body').removeClass('keyboard-navigating');
         set_css(':focus{outline:0}::-moz-focus-inner{border:0;}');
     });
 
     add_event_listener('keydown', function () {
+        $('body').addClass('keyboard-navigating');
         set_css('');
     });
 
diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index f36f6b98..10538def 100644
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -23,21 +23,21 @@ FluidbookInterface.prototype = {
             var res = '';
             if ($('html').hasClass('ltr')) {
                 res += '<div id="prev-arrows">';
-                res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'PageUp');
-                res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true, '', 'Home');
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true, 'interface', 'PageUp');
+                res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true, 'interface', 'Home');
                 res += '</div>';
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'PageDown');
-                res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true, '', 'End');
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, 'interface', 'PageDown');
+                res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true, 'interface', 'End');
                 res += '</div>';
             } else {
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'PageUp');
-                res += this.fluidbook.nav.getLink('interface-last', '#', 'first', '', labels.first, 'arrow-bottom', true, '', 'Home');
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, 'interface', 'PageUp');
+                res += this.fluidbook.nav.getLink('interface-last', '#', 'first', '', labels.first, 'arrow-bottom', true, 'interface', 'Home');
                 res += '</div>';
                 res += '<div id="prev-arrows">';
-                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true, '', 'PageDown');
-                res += this.fluidbook.nav.getLink('interface-first', '#', 'last', '', labels.last, 'arrow-bottom', true, '', 'End');
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true, 'interface', 'PageDown');
+                res += this.fluidbook.nav.getLink('interface-first', '#', 'last', '', labels.last, 'arrow-bottom', true, 'interface', 'End');
                 res += '</div>';
             }
 
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 668b8e6f..f3f84737 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -175,7 +175,7 @@ FluidbookNav.prototype = {
 
 
         // Make sure that the link gets a unique ID when it is used in both menus
-        var elementID = (navType === undefined || navType === null || navType === '') ? id : navType + '_' + id;
+        var elementID = (navType === undefined || navType === null || navType === '' || navType==='interface') ? id : navType + '_' + id;
 
         res += ' id="' + elementID + '"';
 
@@ -188,12 +188,15 @@ FluidbookNav.prototype = {
             res += ' class="' + className + '"';
         }
 
-        res+=' role="button"';
+        res += ' role="button"';
         // Only the horizontal icon menu should have the tooltips
         if (help !== undefined && help !== '') {
             if (navType === 'horizontalNav') {
                 res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
             }
+            if (navType === 'interface') {
+                res += ' data-keyboard-tooltip="' + this.fluidbook.l10n.__(help) + '"';
+            }
             res += ' aria-label="' + this.fluidbook.l10n.__(help) + '"';
         }
         if (keyboardShortcut !== '') {
diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 4a47a970..fa11d30a 100644
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -29,13 +29,15 @@ FluidbookTooltip.prototype = {
             $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('focus', 'a[data-tooltip],a[data-keyboard-tooltip]', function (e) {
+            if ($('body').hasClass('keyboard-navigating')) {
+                $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) {
+        $(document).on('blur', 'a[data-tooltip],a[data-keyboard-tooltip]', function (e) {
             $this.hideTooltip();
         });
 
@@ -99,7 +101,14 @@ FluidbookTooltip.prototype = {
 
         var $this = this;
 
-        var text = $(target).attr('data-tooltip');
+
+        var text = '';
+        if ($(target).is('[data-tooltip]')) {
+            text = $(target).attr('data-tooltip');
+        } else if ($(target).is('[data-keyboard-tooltip]')) {
+            text = $(target).attr('data-keyboard-tooltip');
+        }
+
         text = $('<textarea />').html(text).text();
         if (text.substr(0, 1) == '~') {
             var text = $this.fluidbook.l10n.__(text.substring(1));
diff --git a/style/accessibility.less b/style/accessibility.less
index 8fe914dd..7b873624 100644
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -9,9 +9,9 @@
 }
 
 :focus {
-  outline: thin dotted;
+  outline: #c00 6px solid;
 }
 
-#q:focus{
-outline: 0;
+#q:focus {
+  outline: 0;
 }
\ No newline at end of file
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 003f82ba..5ca56219 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -59,6 +59,7 @@ a {
 *::-ms-clear {
   display: none;
 }
+
 * {
   padding: 0;
   margin: 0;
@@ -1300,7 +1301,7 @@ html.ios body.portrait #interface {
       background-color: @links-area-color;
     }
 
-    &:hover, &.hover {
+    &:hover, &.hover, &:focus {
       .using-mouse & {
         opacity: 1 !important;
         background-color: @links-area-color;