[A11Y] Fix nav drawer being focusable when off-screen on small viewports

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();
   }

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;
   }