github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-22 21:51:50 +08:00
Code Issues Actions Packages Projects Releases Wiki 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

24
resources/js/components/tri-layout.js
View File

@ -1,8 +1,9 @@
class TriLayout {
constructor(elem) {
this.elem = elem;
setup() {
this.container = this.$refs.container;
this.tabs = this.$manyRefs.tab;
this.lastLayoutType = 'none';
this.onDestroy = null;
@ -43,13 +44,12 @@ class TriLayout {
}
setupMobile() {
const layoutTabs = document.querySelectorAll('[tri-layout-mobile-tab]');
for (let tab of layoutTabs) {
for (const tab of this.tabs) {
tab.addEventListener('click', this.mobileTabClick);
}
this.onDestroy = () => {
for (let tab of layoutTabs) {
for (const tab of this.tabs) {
tab.removeEventListener('click', this.mobileTabClick);
}
}
@ -65,7 +65,7 @@ class TriLayout {
* @param event
*/
mobileTabClick(event) {
const tab = event.target.getAttribute('tri-layout-mobile-tab');
const tab = event.target.dataset.tab;
this.showTab(tab);
}
@ -79,21 +79,21 @@ class TriLayout {
/**
* Show the given tab
* @param tabName
* @param {String} tabName
* @param {Boolean }scroll
*/
showTab(tabName, scroll = true) {
this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status
const tabs = document.querySelectorAll('.tri-layout-mobile-tab');
for (let tab of tabs) {
const isActive = (tab.getAttribute('tri-layout-mobile-tab') === tabName);
tab.classList.toggle('active', isActive);
for (const tab of this.tabs) {
const isActive = (tab.dataset.tab === tabName);
tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
}
// Toggle section
const showInfo = (tabName === 'info');
this.elem.classList.toggle('show-info', showInfo);
this.container.classList.toggle('show-info', showInfo);
// Set the scroll position from cache
if (scroll) {