From 0cc12aed9506cbd5826f5c7f2ee048aaae5fbc8e Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Thu, 18 Mar 2021 21:38:32 +0000
Subject: [PATCH] [A11Y] Fix nav drawer being focusable when off-screen on
 small viewports (#2666)

* Fix nav drawer being focusable when off-screen on small viewports

Fixes #2565

* Implement review suggestions

* Format
---
 js/src/common/utils/Drawer.js | 19 ++++++++++++++++++-
 less/common/App.less          |  3 +++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/js/src/common/utils/Drawer.js b/js/src/common/utils/Drawer.js
index 0d0efb46e..d0bfa7da6 100644
--- a/js/src/common/utils/Drawer.js
+++ b/js/src/common/utils/Drawer.js
@@ -31,7 +31,24 @@ export default class Drawer {
    * @public
    */
   hide() {
-    $('#app').removeClass('drawerOpen');
+    /**
+     * As part of hiding the drawer, this function also ensures that the drawer
+     * correctly animates out, while ensuring it is not part of the navigation
+     * tree while off-screen.
+     *
+     * More info: https://github.com/flarum/core/pull/2666#discussion_r595381014
+     */
+
+    const $app = $('#app');
+
+    if (!$app.hasClass('drawerOpen')) return;
+
+    const $drawer = $('#drawer');
+
+    // Used to prevent `visibility: hidden` from breaking the exit animation
+    $drawer.css('visibility', 'visible').one('transitionend', () => $drawer.css('visibility', ''));
+
+    $app.removeClass('drawerOpen');
 
     if (this.$backdrop) this.$backdrop.remove();
   }
diff --git a/less/common/App.less b/less/common/App.less
index faafe7f01..7acd8cd75 100644
--- a/less/common/App.less
+++ b/less/common/App.less
@@ -123,6 +123,9 @@
 // the left side of the screen. On other devices, the drawer has no specific
 // appearance.
 @media @phone {
+  .App:not(.drawerOpen) .App-drawer {
+    visibility: hidden;
+  }
   .drawerOpen {
     overflow: hidden;
   }