From 0e06788358238135d7c509d4d96f425c2a8cb23f Mon Sep 17 00:00:00 2001
From: wthrajat <rajatkhanduri290102@gmail.com>
Date: Mon, 13 Feb 2023 22:55:58 +0530
Subject: [PATCH] XWIKI-18007: Drawer menu improvements for accessibility

Moved the code responsible for drawer to the flamingo.js file
Fixed formatting
---
 .../src/main/resources/flamingo/flamingo.js   | 24 +++++++++++++++++--
 .../src/main/resources/flamingo/javascript.vm | 14 -----------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
index 4bcff40079f7..43934556a98e 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/flamingo.js
@@ -20,8 +20,8 @@
 require(['jquery', 'bootstrap'], function($) {
   $(function() {
 
-    // Fix the bad location of the dropdown menu when the trigger is close to the end of the screen.
-    // See: http://jira.xwiki.org/browse/XWIKI-12609
+    /* Fix the bad location of the dropdown menu when the trigger is close to the end of the screen.
+     See: http://jira.xwiki.org/browse/XWIKI-12609 */
     $(document).on('shown.bs.dropdown', function (event) {
       var toggle    = $(event.relatedTarget);
       var menu      = toggle.next('.dropdown-menu');
@@ -51,3 +51,23 @@ require(['jquery', 'bootstrap'], function($) {
     translateButton.attr('title', translateButton.attr('data-title')).popover();
   });
 });
+require(['jquery', 'iscroll', 'drawer'], function($, IScroll) {
+  // Unfortunately drawer doesn't declare the dependency on iscroll and expects it to be defined as a global variable.
+  window.IScroll = IScroll;
+  $(function() {
+    /* Note that the 'drawer-open' and 'drawer-close' CSS classes are added before the open and close animations end
+     which prevents us from using them in automated tests. We need something more reliable so we listen to
+     'drawer.opened' and 'drawer.closed' events and add our own markers. */
+    $('.drawer-nav').closest('body').drawer().on('drawer.opened', function(event) {
+      $('#tmDrawerActivator').attr('aria-expanded', 'true');
+    }).on('drawer.closed', function(event) {
+      $('#tmDrawerActivator').attr('aria-expanded', 'false');
+    });
+  });
+  // Drawer can be closed by pressing the ESC key, regardless of how it was opened, whether by keyboard or clicking.
+  $(document).on('keydown', function (event) {
+    if (event.key === 'Escape') {
+      $('.drawer-nav').closest('body').drawer('close');
+    }
+  });
+});
diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm
index 8b1ba7a58cd5..5e4569248be9 100644
--- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm
+++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm
@@ -186,20 +186,6 @@ if (window.Prototype && Prototype.BrowserFeatures.ElementExtensions) {
     disablePrototypeJS('hide', pluginsToDisable);
   });
 }
-require(['jquery', 'iscroll', 'drawer'], function($, IScroll) {
-  // Unfortunately drawer doesn't declare the dependency on iscroll and expects it to be defined as a global variable.
-  window.IScroll = IScroll;
-  $(function() {
-    // Note that the 'drawer-open' and 'drawer-close' CSS classes are added before the open and close animations end
-    // which prevents us from using them in automated tests. We need something more reliable so we listen to
-    // 'drawer.opened' and 'drawer.closed' events and add our own markers.
-    $('.drawer-nav').closest('body').drawer().on('drawer.opened', function(event) {
-      $('#tmDrawerActivator').attr('aria-expanded', 'true');
-    }).on('drawer.closed', function(event) {
-      $('#tmDrawerActivator').attr('aria-expanded', 'false');
-    });
-  });
-});
 ##
 ## Pass useful contextual information from the server to the client using the global XWiki object.
 ##