From db4383f973486f49bf5885a48d6db6061be37231 Mon Sep 17 00:00:00 2001
From: wthrajat <rajatkhanduri290102@gmail.com>
Date: Sat, 4 Feb 2023 17:59:07 +0530
Subject: [PATCH] XWIKI-18007: Drawer menu improvements for accessibility

---
 .../src/main/resources/flamingo/javascript.vm | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

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 6780ecdbb23..60ef8c3ea2d 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
@@ -190,19 +190,26 @@ 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');
-    });
+    /* 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, irrespective of how you opened it (by using keyboard or by clicking it)
-    $(document).on('keydown', function (event) {
-      if (event.key === 'Escape') {
-        $('.drawer-nav').closest('body').drawer('close');}
+  // 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');
+      }
   });
 });
 ##