]> _ Git - fluidbook-html5.git/commitdiff
projects / fluidbook-html5.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: eefb539)
fix #3747 @1
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 13 Jul 2020 17:23:21 +0000 (19:23 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 13 Jul 2020 17:23:21 +0000 (19:23 +0200)
_index.html patch | blob | history
js/libs/fluidbook/fluidbook.accessibility.js patch | blob | history
js/libs/fluidbook/fluidbook.interface.js patch | blob | history
js/libs/fluidbook/fluidbook.js patch | blob | history
js/libs/fluidbook/fluidbook.keyboard.js patch | blob | history
style/interface.less patch | blob | history

diff --git a/_index.html b/_index.html
index 8058db41b423fc17829ff57e60194dcb2d7cbd09..fc6cb136139491a62020c4fb3364a8def75e8221 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -37,7 +37,7 @@
     <!-- $script -->
     <!-- $ga -->
 </head>
-<body data-branch="master">
+<body data-branch="master" aria-hidden="true">
 <!--googleoff: all-->
 <!-- $beginbody -->
 <div style="display:none;" id="svg-container" aria-hidden="true"><!-- $svg --></div>
@@ -57,9 +57,9 @@
             </div>
         </div>
     </div>
-    <header>
-        <nav id="horizontalNav"></nav>
-        <nav id="menu"></nav>
+    <header role="banner">
+        <nav id="horizontalNav" aria-label="Global"></nav>
+        <nav id="menu" aria-hidden="true"></nav>
         <div id="search"></div>
         <a id="logo" href="#" aria-hidden="true"></a>
     </header>
@@ -72,7 +72,7 @@
                 <canvas width="1024" height="1024"></canvas>
             </div>
             <main id="fluidbook">
-                <div id="accessible-contents"></div>
+                <div id="accessible-contents" aria-live="polite"></div>
                 <div id="edges" aria-hidden="true">
                     <div class="edge left">
                         <div class="top"></div>
diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index 8f8c4ec794b358762636d2e910d84c21fe30edff..6990f8f2509b19031cd014c0b28e4334beba261d 100644 (file)
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -11,6 +11,12 @@ FluidbookAccessibility.prototype = {
         $(this.fluidbook).on('fluidbook.page.change.end', function (e, data) {
             $this.endChangePage(data);
         });
+        $(this.fluidbook).on('fluidbook.splash.hide', function () {
+            $("body").attr('aria-hidden', 'false');
+            setTimeout(function () {
+                $(this.fluidbook).trigger('fluidbook.splash.hide');
+            }, 2500);
+        });
     },
 
     endChangePage: function (page) {
@@ -48,19 +54,19 @@ FluidbookAccessibility.prototype = {
 };
 
 /*! outline.js v1.2.0 - https://github.com/lindsayevans/outline.js/ */
-(function(d){
+(function (d) {
 
     var style_element = d.createElement('STYLE'),
         dom_events = 'addEventListener' in d,
-        add_event_listener = function(type, callback){
+        add_event_listener = function (type, callback) {
             // Basic cross-browser event handling
-            if(dom_events){
+            if (dom_events) {
                 d.addEventListener(type, callback);
-            }else{
+            } else {
                 d.attachEvent('on' + type, callback);
             }
         },
-        set_css = function(css_text){
+        set_css = function (css_text) {
             // Handle setting of <style> element contents in IE8
             !!style_element.styleSheet ? style_element.styleSheet.cssText = css_text : style_element.innerHTML = css_text;
         }
@@ -69,11 +75,11 @@ FluidbookAccessibility.prototype = {
     d.getElementsByTagName('HEAD')[0].appendChild(style_element);
 
     // Using mousedown instead of mouseover, so that previously focused elements don't lose focus ring on mouse move
-    add_event_listener('mousedown', function(){
+    add_event_listener('mousedown', function () {
         set_css(':focus{outline:0}::-moz-focus-inner{border:0;}');
     });
 
-    add_event_listener('keydown', function(){
+    add_event_listener('keydown', function () {
         set_css('');
     });
 
diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index 9eac02a50dca12974375fcc0e347a2a135a64d6c..f36f6b988bc296f883f11a70cbf6ae3eb0bb3069 100644 (file)
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -23,20 +23,20 @@ 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, '', 'ArrowLeft');
+                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 += '</div>';
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'ArrowRight');
+                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 += '</div>';
             } else {
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'ArrowRight');
+                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 += '</div>';
                 res += '<div id="prev-arrows">';
-                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true, '', 'ArrowLeft');
+                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 += '</div>';
             }
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index b4e70176734356b20aea6c1c64698c34805ebd65..e0bcb7380d44db17a22c975a1dd18d9d832882ad 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -507,17 +507,28 @@ Fluidbook.prototype = {
         var visibility = this.getButtonsVisibility(page);
 
         if (visibility.next) {
-            $("#next-arrows").removeClass('hidden');
+            this.showArrows("#next-arrows");
         } else {
-            $("#next-arrows").addClass('hidden');
+            this.hideArrows("#next-arrows");
         }
 
         if (visibility.previous) {
-            $("#prev-arrows").removeClass('hidden');
+            this.showArrows("#prev-arrows");
         } else {
-            $("#prev-arrows").addClass('hidden');
+            this.hideArrows("#prev-arrows");
         }
     },
+
+    hideArrows: function (id) {
+        $(id).addClass('hidden').attr('aria-hidden', 'true');
+        $(id).find('a').attr('tabindex', '-1');
+    },
+
+    showArrows: function (id) {
+        $(id).removeClass('hidden').attr('aria-hidden', 'false');
+        $(id).find('a').attr('tabindex', null);
+    },
+
     updateShadows: function (page, animationDuration) {
         if (animationDuration === undefined) {
             animationDuration = 0;
diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index 1eb9946021e3006b87275d382bd0aa61cc46a968..20279dee6f7c264df7e750613c17d43fb7590639 100644 (file)
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -89,7 +89,7 @@ FluidbookKeyboard.prototype = {
             if ($this.fluidbook.zoom.zoom === 1) {
                 return;
             }
-            console.log(handler.key);
+
             $this.fluidbook.zoom.move(handler.key);
             e.preventDefault();
         }, false, false);
@@ -97,13 +97,13 @@ FluidbookKeyboard.prototype = {
 
     initInterfaceShortcuts: function () {
         var $this = this;
-        this.keyShortcut('left,right,home,end', function (e, handler) {
+        this.keyShortcut('pageup,pagedown,home,end', function (e, handler) {
             if ($this.fluidbook.zoom.zoom > 1) {
                 return;
             }
-            if (handler.key === 'left' || handler.key === 'right') {
+            if (handler.key === 'pageup' || handler.key === 'pagedown') {
                 var dir = 'Next';
-                if (handler.key === 'left' && this.fluidbook.l10n.ltr || handler.key === 'right' && this.fluidbook.l10n.rtl) {
+                if (handler.key === 'pageup') {
                     dir = 'Previous';
                 }
                 var func = 'go' + dir;
diff --git a/style/interface.less b/style/interface.less
index 41de5b07700fe57a50e042cd3d2801ff9bacee4d..faec04376fbbff16d4e374f9d65b18f54c2b2021 100644 (file)
--- a/style/interface.less
+++ b/style/interface.less
@@ -96,7 +96,6 @@
 }
 
 #next-arrows.hidden, #prev-arrows.hidden {
-  display: none;
   opacity: 0;
   cursor: default;
   pointer-events: none;
Unnamed repository; edit this file 'description' to name the repository.