From c72478acc0749ab13db1346c7e18442b567215d8 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 24 Jun 2025 18:23:54 +0200
Subject: [PATCH] wip #7547 @5

---
 _index.html                                   |  2 +-
 .../fluidbook/fluidbook.audiodescription.js   | 14 ++--
 js/libs/fluidbook/fluidbook.keyboard.js       | 72 ++++++++++++++-----
 3 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/_index.html b/_index.html
index c060fc29..05e0f54c 100644
--- a/_index.html
+++ b/_index.html
@@ -57,7 +57,7 @@
         <nav id="horizontalNav" role="navigation"></nav>
         <nav id="menu" aria-hidden="true"></nav>
         <div id="search"></div>
-        <a id="logo" aria-hidden="true" tabindex="-1"></a>
+        <a id="logo" aria-hidden="true"></a>
     </header>
     <nav role="navigation" id="interface"></nav>
     <div id="helpView"></div>
diff --git a/js/libs/fluidbook/fluidbook.audiodescription.js b/js/libs/fluidbook/fluidbook.audiodescription.js
index 4403a47e..817aeca9 100644
--- a/js/libs/fluidbook/fluidbook.audiodescription.js
+++ b/js/libs/fluidbook/fluidbook.audiodescription.js
@@ -33,11 +33,13 @@ FluidbookAudioDescription.prototype = {
     init: function () {
 
         // Add button elements
-        this.container.append(this.buttonLeft);
-        this.container.append(this.buttonRight);
+        this.container.append('<div class="audio-description-wrapper left" />');
+        this.container.find('.audio-description-wrapper.left').append(this.buttonLeft);
+        this.container.append('<div class="audio-description-wrapper right" />');
+        this.container.find('.audio-description-wrapper.right').append(this.buttonRight);
 
-        var $this = this,
-            buttons = $('.' + this.buttonClass)
+        var $this = this;
+        var buttons = $('.' + this.buttonClass)
 
         // Add tooltips
         buttons.attr('data-tooltip', this.fluidbook.l10n.__('listen to the page'));
@@ -103,6 +105,7 @@ FluidbookAudioDescription.prototype = {
             $(this.buttonLeft).hide();
         }
 
+
         // Right hand page
         if (this.hasAudio(pageNumRight) && !this.fluidbook.displayOnePage) {
             $(this.buttonRight).show();
@@ -143,8 +146,7 @@ FluidbookAudioDescription.prototype = {
 
     playSide: function (side) {
 
-        var targetSelector = '.' + this.buttonClass + '.' + side,
-            pageNum = this.fluidbook.getPageNumberOfSide(side);
+        var targetSelector = '.' + this.buttonClass + '.' + side, pageNum = this.fluidbook.getPageNumberOfSide(side);
 
         // Only try to play audio if available (button will be visible)
         if (this.hasAudio(pageNum)) {
diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index f47bdf02..07d5baa2 100644
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -39,6 +39,9 @@ FluidbookKeyboard.prototype = {
             } else if ($this.fluidbook.menu.viewMode()) {
                 $this.tabNavigation('.mview', dir);
                 e.preventDefault();
+            } else {
+                $this.tabNavigationSections(['.audio-description-wrapper.left', '.audio-description-wrapper.right'], dir);
+                e.preventDefault();
             }
         }, false, false);
 
@@ -59,7 +62,48 @@ FluidbookKeyboard.prototype = {
         })
     },
 
-    _navigate: function (list, dir, actions) {
+
+    tabNavigationSections: function (selectors, dir) {
+        let currentSection = -1;
+        let active = $(document.activeElement);
+        $.each(selectors, function (k, s) {
+            if ($(s).has(active) || $(s).is(active)) {
+                currentSection = k;
+                return false;
+            }
+        });
+
+        if (currentSection === -1) {
+            currentSection = 0;
+        }
+        if (!this.tabNavigation(selectors[currentSection], dir, false)) {
+            currentSection = (currentSection + selectors.length + dir) % selectors.length;
+            this.tabNavigation(selectors[currentSection], dir, false);
+        }
+    },
+
+    tabNavigation: function (selector, dir, loop) {
+        if (loop === undefined) {
+            loop = true;
+        }
+        var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"]:not(.ps__thumb-x):not(.ps__thumb-y), [contenteditable]';
+        var elements = $(selector).find(focusableElementsString);
+        var list = [];
+        $(elements).each(function () {
+            if (parseInt($(this).attr('tabindex')) < 0) {
+                return;
+            }
+            if ($(this).parents('[tabindex="-1"],.ignore-tab-children').length === 0 && $(this).is(':visible')) {
+                list.push(this);
+            }
+        });
+        return this._navigate(list, dir, ['focus'], loop);
+    },
+
+    _navigate: function (list, dir, actions, loop) {
+        if (loop === undefined) {
+            loop = true;
+        }
         if (actions === undefined) {
             actions = ['focus'];
         }
@@ -71,7 +115,14 @@ FluidbookKeyboard.prototype = {
         var next;
         if ($(items).has(document.activeElement)) {
             var index = $(items).index(document.activeElement);
-            next = (nb + index + dir) % nb;
+            if (loop) {
+                next = (nb + index + dir) % nb;
+            } else {
+                next = index + dir;
+                if (next >= nb || next < 0) {
+                    return false;
+                }
+            }
         } else {
             if (dir === 1) {
                 next = 0;
@@ -80,7 +131,6 @@ FluidbookKeyboard.prototype = {
             }
         }
         var ne = $(items).eq(next);
-        console.log(items, ne);
         $.each(actions, function (k, action) {
             if (action === 'focus') {
                 $(ne).focus();
@@ -88,21 +138,7 @@ FluidbookKeyboard.prototype = {
                 $(ne).click();
             }
         });
-    },
-
-    tabNavigation: function (selector, dir) {
-        var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"]:not(.ps__thumb-x):not(.ps__thumb-y), [contenteditable]';
-        var elements = $(selector).find(focusableElementsString);
-        var list = [];
-        $(elements).each(function () {
-            if ($(this).attr('tabindex') == '-1') {
-                return;
-            }
-            if ($(this).parents('[tabindex="-1"],.ignore-tab-children').length === 0 && $(this).is(':visible')) {
-                list.push(this);
-            }
-        });
-        this._navigate(list, dir);
+        return true;
     },
 
     initBookmarksShortcuts: function () {
-- 
2.39.5