[A11Y] App drawer on mobile is still part of accessibility tree when hidden

[davwheat]

Bug Report

Current Behavior
The app drawer on mobile is still part of the accessibility tree and can be tabbed into even when it's not shown.

Steps to Reproduce

1. Open Flarum and shrink browser viewport
2. Press tab to cycle through elements
3. Elements in the drawer (e.g. home link, user dropdown, etc) will be focused

Expected Behavior
Elements that are off-screen shouldn't be part of the accessibility tree, and shouldn't be able to be tabbed into.

Environment

• Flarum version: 0.1.0-beta.15
• Webserver: Apache
• Browser: Chrome 87

Possible Solution
visibility: hidden should be added to the .App-drawer when it's off-screen. This can be added to the styles as .App:not(.drawerOpen) .App-drawer.

The issue with this is that it breaks the drawer close animation. The way around this is to set visibility: visible when the user begins to close the drawer, then use an event handler in JS (transitionend, supported IE10+) to remove this inline style.

This also handles removing it from the accessibility tree as screen-readers ignore elements with visibility: hidden.

If you have any better ideas, please let me know.