XWIKI-18007: Drawer menu improvements for accessibility

xwiki · Feb 4, 2023 · db4383f · db4383f
1 parent 3a9d056
commit db4383f
Showing 1 changed file with 19 additions and 12 deletions.
diff --git a/...ngo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/javascript.vm b/...ngo-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');
+      }
   });
 });
 ##