[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

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