add accessibility to open and close buttons (#311)
refactor the way to focus apps when the menu is opened (#301)
This commit is contained in:
parent
b8aa312a14
commit
951dd742d8
|
@ -83,6 +83,12 @@
|
||||||
padding-left: 12px !important;
|
padding-left: 12px !important;
|
||||||
margin-left: 5px !important;
|
margin-left: 5px !important;
|
||||||
margin-left: 3px !important;
|
margin-left: 3px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-opener span {
|
||||||
|
position: relative;
|
||||||
|
left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-menu-opener:active, .side-menu-opener:focus {
|
.side-menu-opener:active, .side-menu-opener:focus {
|
||||||
|
|
|
@ -15,11 +15,18 @@ You should have received a copy of the GNU Affero General Public License
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener side-menu-closer"></button>
|
<button class="side-menu-opener side-menu-closer" :arial-label="label">
|
||||||
|
<span v-text="label"></span>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'CloserButton',
|
name: 'CloserButton',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
label: t('side_menu', 'Close the menu'),
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -15,7 +15,9 @@ You should have received a copy of the GNU Affero General Public License
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<button class="side-menu-opener" :arial-label="label"></button>
|
<button class="side-menu-opener" :arial-label="label">
|
||||||
|
<span v-text="label"></span>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -23,7 +25,7 @@ export default {
|
||||||
name: 'OpenerButton',
|
name: 'OpenerButton',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
label: t('side_menu', 'Toggle menu'),
|
label: t('side_menu', 'Toggle the menu'),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,4 +95,4 @@
|
||||||
"Hide labels on mouse over": ""
|
"Hide labels on mouse over": ""
|
||||||
"Except the hovered app": ""
|
"Except the hovered app": ""
|
||||||
"Search": ""
|
"Search": ""
|
||||||
"Toggle menu": ""
|
"Toggle the menu": ""
|
||||||
|
|
|
@ -3,7 +3,13 @@ module.exports = (tagName, attributes) => {
|
||||||
|
|
||||||
if (typeof attributes === 'object') {
|
if (typeof attributes === 'object') {
|
||||||
for (let i in attributes) {
|
for (let i in attributes) {
|
||||||
element.setAttribute(i, attributes[i])
|
if (i === 'text') {
|
||||||
|
element.textContent = attributes[i]
|
||||||
|
} else if (i === 'html') {
|
||||||
|
element.innerHTML = attributes[i]
|
||||||
|
} else {
|
||||||
|
element.setAttribute(i, attributes[i])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,8 @@ if ($_['always-displayed']) {
|
||||||
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
const sideMenuContainer = SMcreateElement('div', {id: 'side-menu-container'})
|
||||||
const sideMenuOpener = SMcreateElement('button', {
|
const sideMenuOpener = SMcreateElement('button', {
|
||||||
'class': 'side-menu-opener',
|
'class': 'side-menu-opener',
|
||||||
'arial-label': t('side_menu', 'Toggle menu')
|
'arial-label': t('side_menu', 'Toggle the menu'),
|
||||||
|
'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
|
||||||
})
|
})
|
||||||
const sideMenu = SMcreateElement('div', {id: 'side-menu'})
|
const sideMenu = SMcreateElement('div', {id: 'side-menu'})
|
||||||
|
|
||||||
|
@ -38,6 +39,15 @@ if ($_['always-displayed']) {
|
||||||
sideMenu.setAttribute('data-sidewithcategories', '1')
|
sideMenu.setAttribute('data-sidewithcategories', '1')
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
const sideMenuFocus = () => {
|
||||||
|
let a = document.querySelector('#side-menu .side-menu-app.active a')
|
||||||
|
|| document.querySelector('#side-menu .side-menu-app a')
|
||||||
|
|
||||||
|
if (a) {
|
||||||
|
a.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('body').addEventListener('side-menu.apps', (e) => {
|
document.querySelector('body').addEventListener('side-menu.apps', (e) => {
|
||||||
const apps = e.detail.apps;
|
const apps = e.detail.apps;
|
||||||
|
|
||||||
|
@ -80,22 +90,6 @@ if ($_['always-displayed']) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
sideMenuFocus = () => {
|
|
||||||
let a = document.querySelector('.side-menu-app.active a', sideMenu)
|
|
||||||
|
|
||||||
if (!a) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.length === 0) {
|
|
||||||
a = sideMenu.querySelector('.side-menu-app:first-child a')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a.length > 0) {
|
|
||||||
a.focus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<?php if ($_['opener-hover']): ?>
|
<?php if ($_['opener-hover']): ?>
|
||||||
const sideMenuMouseLeave = () => {
|
const sideMenuMouseLeave = () => {
|
||||||
sideMenu.classList.remove('open')
|
sideMenu.classList.remove('open')
|
||||||
|
@ -127,14 +121,8 @@ if ($_['always-displayed']) {
|
||||||
|
|
||||||
headerMenuOpener.addEventListener('click', () => {
|
headerMenuOpener.addEventListener('click', () => {
|
||||||
sideMenu.classList.add('open')
|
sideMenu.classList.add('open')
|
||||||
|
|
||||||
const a = sideMenu.querySelector('.side-menu-app.active a')
|
|
||||||
|
|
||||||
if (a !== null) {
|
|
||||||
a.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
headerMenuOpener.blur()
|
headerMenuOpener.blur()
|
||||||
|
sideMenuFocus()
|
||||||
})
|
})
|
||||||
|
|
||||||
for (let opener of sideMenuOpener) {
|
for (let opener of sideMenuOpener) {
|
||||||
|
|
Loading…
Reference in a new issue