webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-13 00:41:59 +03:00
Code Activity

Improved header element accessibility when at mobile sizes

Browse Source 
Intended to fix issues raised in #2681.
Changes up the tri-layout tabs, and the main header menu toggle,
to be buttons while adding better text and keyboard controls.

Updated the component format of a few elements along the way.
This commit is contained in:
Dan Brown
2021-04-19 21:41:13 +01:00
parent 60ffe6a993
commit 9df4dee1b2
8 changed files with 66 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/components/header-mobile-toggle.js
View File

@ -1,31 +1,41 @@
class HeaderMobileToggle {
constructor(elem) {
this.elem = elem;
this.toggleButton = elem.querySelector('.mobile-menu-toggle');
this.menu = elem.querySelector('.header-links');
this.open = false;
setup() {
this.elem = this.$el;
this.toggleButton = this.$refs.toggle;
this.menu = this.$refs.menu;
this.open = false;
this.toggleButton.addEventListener('click', this.onToggle.bind(this));
this.onWindowClick = this.onWindowClick.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
}
onToggle(event) {
this.open = !this.open;
this.menu.classList.toggle('show', this.open);
this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
if (this.open) {
this.elem.addEventListener('keydown', this.onKeyDown);
window.addEventListener('click', this.onWindowClick)
} else {
this.elem.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('click', this.onWindowClick)
}
event.stopPropagation();
}
onKeyDown(event) {
if (event.code === 'Escape') {
this.onToggle(event);
}
}
onWindowClick(event) {
this.onToggle(event);
}
}
module.exports = HeaderMobileToggle;
export default HeaderMobileToggle;