From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 12 May 2025 10:44:37 +0000 (+0200)
Subject: wip #7461 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e99d78a6521c24fed077fbecf7aa841382c5b699;p=fluidbook-html5.git

wip #7461 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js
index 03cff21e..4be87c94 100644
--- a/js/libs/fluidbook/fluidbook.burger.js
+++ b/js/libs/fluidbook/fluidbook.burger.js
@@ -49,7 +49,7 @@ FluidbookBurger.prototype = {
 
 
         // Add close button to menu
-        this.getElement().append(this.getMenuCloseButton());
+        this.getElement().prepend(this.getMenuCloseButton());
 
         this.initBurger();
     },
@@ -162,7 +162,8 @@ FluidbookBurger.prototype = {
         });
 
         // Add search and share links to main menu panel
-        $('#menuList').append(this.searchHTML + this.shareLinksHTML);
+        $("#menuList").prepend(this.searchHTML);
+        $('#menuList').append(this.shareLinksHTML);
 
         // Add scrollbar to main menu
         $('#menuList > ul, #chapterList').perfectScrollbar({
@@ -179,18 +180,27 @@ FluidbookBurger.prototype = {
     },
 
     open: function () {
+        let $this = this;
         this.isOpened = true;
         $('body').addClass('menu-open');
         clearTimeout(this.closeTimeout);
         $("#menu,#menuOverlay").show();
         setTimeout(function () {
             $("#menu").addClass('open');
+            setTimeout(function () {
+                if ($this.fluidbook.input.isUsingKeyboard()) {
+                    console.log('focus close')
+                    $("#menuClose").get(0).focus();
+                }
+            }, 500);
         }, 10);
 
         $("#main").attr('aria-hidden', 'true');
         $("#view").attr('aria-hidden', 'true');
         $("#menu").attr('aria-hidden', 'false');
         $("#menuOpener").attr('aria-expanded', 'true');
+
+
     },
 
     closeAll: function () {
@@ -284,7 +294,7 @@ FluidbookBurger.prototype = {
             }
         });
 
-        return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>';
+        return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" tabindex="0">' + getSpriteIcon('interface-close') + '</a>';
     },
 
     getSearch: function () {
@@ -292,8 +302,8 @@ FluidbookBurger.prototype = {
 
         var $this = this;
         var res = '<form action="#" id="searchForm" method="post">';
-        res += '<input id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
-        res += this.nav.getLink('nav-search', '#', 'submitSearch');
+        res += '<input id="q" name="q" type="search" value="" tabindex="2" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
+        res += '<a href="#" id="submitSearch" class="icon-submitSearch" role="button" tabindex="1"><svg viewBox="0 0 512 512" class="nav-search nav-icon svg-icon" aria-hidden="true"><use xlink:href="#nav-search"></use></svg></a>';
         res += '</form>';
         res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
         res += '<div id="menuSearchResults" class="mm-nopanel"></div>';