From 42bbc21ac1fea01d65acbd9b63c09ae2e1cf4cf8 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 17 Jul 2020 11:00:23 +0200
Subject: [PATCH] fix #3793 @1.5

---
 js/libs/aria/radio.js                   | 61 +++++++++++++++++++++++++
 js/libs/fluidbook/fluidbook.keyboard.js | 23 ++++++++--
 js/libs/fluidbook/fluidbook.menu.js     |  1 +
 js/libs/fluidbook/fluidbook.print.js    | 14 +++---
 4 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 js/libs/aria/radio.js

diff --git a/js/libs/aria/radio.js b/js/libs/aria/radio.js
new file mode 100644
index 00000000..e6726ca1
--- /dev/null
+++ b/js/libs/aria/radio.js
@@ -0,0 +1,61 @@
+(function ($) {
+    function JQAriaRadio(element) {
+        this.element = element;
+        this.optionSelector = '[role="radio"]';
+        this.options = $(element).find(this.optionSelector);
+        this.init();
+    }
+
+    JQAriaRadio.prototype = {
+        init: function () {
+            var $this = this;
+
+            $(this.element).on('click', this.optionSelector, function () {
+                var r = $(this).find('input[type=radio]');
+                r.prop('checked', true);
+                $this.update();
+                return false;
+            });
+
+            $(this.element).on('keydown', function (e) {
+                var active = $(document.activeElement);
+                if (!active.is($this.optionSelector)) {
+                    return true;
+                }
+                if (e.keyCode >= 37 && e.keyCode <= 40) {
+                    fluidbook.keyboard._navigate($this.optionSelector, e.keyCode === 37 || e.keyCode === 38 ? -1 : 1, ['focus', 'click']);
+                    e.preventDefault();
+                    return false;
+                }
+                return true;
+            });
+
+            $(this.options).each(function () {
+                $(this).addClass('ignore-tab-children');
+            });
+
+            this.update();
+        },
+
+        update: function () {
+            $(this.options).each(function () {
+                var r = $(this).find('input[type="radio"]');
+                if ($(r).prop('checked')) {
+                    $(this).attr('tabindex', 0).attr('aria-checked', true);
+                } else {
+                    $(this).attr('tabindex', -1).attr('aria-checked', false);
+                }
+            });
+        },
+    };
+
+    jQuery.fn.AriaRadio = function () {
+        return this.each(function () {
+            var $this = $(this);
+            if ($(this).data('AriaRadio') === undefined) {
+                $(this).data('AriaRadio', new JQAriaRadio($this));
+            }
+        })
+    };
+})(jQuery);
+
diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index ebb451a4..4685e12b 100644
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -48,7 +48,10 @@ FluidbookKeyboard.prototype = {
         }
     },
 
-    _navigate: function (list, dir) {
+    _navigate: function (list, dir, actions) {
+        if (actions === undefined) {
+            actions = ['focus'];
+        }
         if (dir === undefined) {
             dir = 1;
         }
@@ -69,12 +72,26 @@ FluidbookKeyboard.prototype = {
         }
         console.log(next);
         var ne = $(items).eq(next);
-        $(ne).focus();
+        $.each(actions, function (k, action) {
+            if (action === 'focus') {
+                $(ne).focus();
+            } else if (action === 'click') {
+                $(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]';
-        this._navigate($(selector).find(focusableElementsString), dir);
+        var elements = $(selector).find(focusableElementsString);
+        var list = [];
+        $(elements).each(function () {
+            if ($(this).parents('[tabindex="-1"],.ignore-tab-children').length === 0) {
+                list.push(this);
+            }
+        });
+        this._navigate(list, dir);
     },
 
     initBookmarksShortcuts: function () {
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 87755cfe..0363f8b4 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -542,6 +542,7 @@ FluidbookMenu.prototype = {
 
         // Auto select first option (the options are dynamic so we can't do it until now)
         $('.print-dialogue .print-option:first-of-type input[type="radio"]').prop('checked', true);
+        $('[role="radiogroup"]').AriaRadio();
 
         if (callback != undefined) {
             callback();
diff --git a/js/libs/fluidbook/fluidbook.print.js b/js/libs/fluidbook/fluidbook.print.js
index 030ecb4f..2d28319e 100644
--- a/js/libs/fluidbook/fluidbook.print.js
+++ b/js/libs/fluidbook/fluidbook.print.js
@@ -93,7 +93,7 @@ FluidbookPrint.prototype = {
         var view = '';
 
         view += '<div class="content">';
-        view += '<div class="print-dialogue' + (this.compact ? ' compact' : '') + '">';
+        view += '<div role="radiogroup" class="print-dialogue' + (this.compact ? ' compact' : '') + '">';
 
         // NOTE: Each option has two labels so thumbnails are also clickable and so it works with the custom radio inputs
 
@@ -101,7 +101,7 @@ FluidbookPrint.prototype = {
 
         // Double Page
         if (!this.isFirstPage && !this.isLastPage && !this.isSinglePageMode) {
-            view += '<div class="print-option">';
+            view += '<div class="print-option" role="radio">';
             if (!this.compact) {
                 view += '<label for="doublePage">';
                 view += '<div class="doubleThumb">';
@@ -121,7 +121,7 @@ FluidbookPrint.prototype = {
 
         // Full Brochure
         if (this.fluidbook.settings.printFullBrochure) {
-            view += '<div class="print-option">';
+            view += '<div class="print-option" role="radio">';
             if (!this.compact) {
                 view += '<label for="allPages">';
                 view += '<div class="doubleThumb">';
@@ -141,7 +141,7 @@ FluidbookPrint.prototype = {
             var hasBookmarks = this.fluidbook.bookmarks.hasBookmarkedPages(),
                 bookmarksDisabled = hasBookmarks ? '' : 'disabled';
 
-            view += '<div class="print-option bookmarks-option ' + bookmarksDisabled + '">';
+            view += '<div class="print-option bookmarks-option ' + bookmarksDisabled + '" role="radio">';
             if (!this.compact) {
                 view += '<label for="bookmarkedPages">';
                 view += '<div class="doubleThumb bookmarks">';
@@ -154,7 +154,7 @@ FluidbookPrint.prototype = {
             view += '</div>'; // .print-option
         }
 
-        view += '<div class="print-option blank"></div>'; // Extra empty div to ensure flexbox space-between works as expected
+        view += '<div class="print-option blank" aria-hidden="true"></div>'; // Extra empty div to ensure flexbox space-between works as expected
 
         // Page range inputs
         if (this.fluidbook.settings.printPageRange) {
@@ -166,7 +166,7 @@ FluidbookPrint.prototype = {
             // It has to be calculated this way because sometimes there is no this.rightPageNumber
             var rangeEnd = Math.min(rangeStart + 1, this.fluidbook.settings.pages);
 
-            view += '<div class="print-option page-range-option">';
+            view += '<div class="print-option page-range-option" role="radio">';
             view += '<input type="radio" name="pageChoice" value="range" id="pageRange">';
             view += '<label for="pageRange">';
             view += __('From page');
@@ -196,7 +196,7 @@ FluidbookPrint.prototype = {
             sideMask = side === 'left' ? 'right' : 'left';
         }
         var view = '';
-        view += '<div class="print-option">';
+        view += '<div class="print-option" role="radio">';
         if (!this.compact) {
             view += '<label for="' + side + 'Page">';
             view += '<div class="doubleThumb">';
-- 
2.39.5