Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
<template>
<div
id="app"
v-bind:class="{
'c-a11yapp--enhanced-focus': enhancedFocus,
'user-prefers-reduced-motion-reduce': reducedMotion
}"
>
<vue-announcer />
<div id="wrapper">
<header role="banner">
<div class="c-top-bar">
<div class="o-layout-inner c-top-bar__wrapper">
<Logo />
<Navigation ref="navMain" />
</div>
</div>
<div class="o-layout-inner c-top-bar__footer">
<UserActions />
<Logline />
</div>
</header>
<div class="o-layout-inner">
<main role="main" class="c-content">
<keep-alive>
<router-view ref="routerView"></router-view>
</keep-alive>
</main>
</div>
<AccessibleAppInfo />
<footer role="contentinfo"></footer>
</div>
<portal-target name="dialog" multiple></portal-target>
</div>
</template>
<script>
import store from "./store";
import Logo from "./components/Logo.vue";
import Navigation from "./components/Navigation";
import UserActions from "./components/UserActions";
import Logline from "./components/Logline";
import AccessibleAppInfo from "./components/accessibleapp/AccessibleAppInfo";
export default {
store,
computed: {
enhancedFocus() {
return store.getters.getEnhancedFocus;
},
reducedMotion() {
return store.getters.getReducedMotion;
}
},
components: { Logline, Navigation, Logo, UserActions, AccessibleAppInfo },
watch: {
$route: function(to) {
// $nextTick = DOM updated
this.$nextTick(function() {
// Change document title
document.title = to.meta.title;
// Focus management on route change
setTimeout(() => {
// Get component's "routeFocusTarget" ref.
// If not existent, use router view container
let focusTarget =
this.$refs.routerView.$refs.componentFocusTarget !== undefined
? this.$refs.routerView.$refs.componentFocusTarget
: this.$refs.routerView.$el;
// Make focustarget programmatically focussable
focusTarget.setAttribute("tabindex", "-1");
// Focus element
focusTarget.focus();
// setAriaCurrent in navigation only after focus management
this.setAriaCurrent();
}, 0);
});
}
},
mounted() {
this.setAriaCurrent();
},
methods: {
setAriaCurrent() {
this.$nextTick(function() {
let app = this.$el,
currents = app.querySelectorAll("[aria-current]");
if (currents) {
currents.forEach(current => {
current.removeAttribute("aria-current");
});
}
app.querySelectorAll(".router-link-exact-active").forEach(current => {
current.setAttribute("aria-current", "page");
});
});
}
}
};
</script>
<style lang="scss">
@import "@/scss/base.scss";
</style>