Dashboard: Fix accessibility skip links

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-09-17 20:31:21 +02:00
parent e14ba58b6d
commit caf284dd2e
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
4 changed files with 16 additions and 2 deletions

View File

@ -1,3 +1,12 @@
// Suppress "Skip to navigation of app" link since the app does not have a navigation
.skip-navigation:not(.skip-content) {
display: none;
}
// Fix position of "Skip to main content" link since the other link is gone
.skip-navigation.skip-content {
left: 3px;
}
#header { #header {
background: transparent !important; background: transparent !important;
--color-header: rgba(24, 24, 24, 1); --color-header: rgba(24, 24, 24, 1);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -215,6 +215,7 @@ export default {
}, },
mounted() { mounted() {
this.updateGlobalStyles() this.updateGlobalStyles()
this.updateSkipLink()
window.addEventListener('scroll', this.handleScroll) window.addEventListener('scroll', this.handleScroll)
setInterval(() => { setInterval(() => {
@ -321,6 +322,10 @@ export default {
document.body.classList.remove('dashboard--dark') document.body.classList.remove('dashboard--dark')
} }
}, },
updateSkipLink() {
// Make sure "Skip to main content" link points to the app content
document.getElementsByClassName('skip-navigation')[0].setAttribute('href', '#app-dashboard')
},
updateStatusCheckbox(app, checked) { updateStatusCheckbox(app, checked) {
if (checked) { if (checked) {
this.enableStatus(app) this.enableStatus(app)