github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

[A11Y] Fix nav drawer being focusable when off-screen on small viewports (#2666)

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

Fixes #2565

* Implement review suggestions

* Format
This commit is contained in:
David Wheatley 2021-03-18 21:38:32 +00:00 committed by GitHub
parent ed3832481e
commit 5278024a5d
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
framework/core/js/src/common/utils/Drawer.js
View File

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

3
framework/core/less/common/App.less
View File

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