1<template> 2 <div> 3 <AppHeader ref="focusTarget" /> 4 <b-container fluid class="page-container"> 5 <b-row no-gutters> 6 <b-col tag="nav" cols="12" md="3" lg="2"> 7 <AppNavigation /> 8 </b-col> 9 <b-col cols="12" md="9" lg="10"> 10 <main id="main-content"> 11 <router-view ref="routerView" /> 12 </main> 13 </b-col> 14 </b-row> 15 </b-container> 16 </div> 17</template> 18 19<script> 20import AppHeader from "@/components/AppHeader"; 21import AppNavigation from "@/components/AppNavigation"; 22export default { 23 name: "App", 24 components: { 25 AppHeader, 26 AppNavigation 27 }, 28 watch: { 29 $route: function() { 30 // $nextTick = DOM updated 31 this.$nextTick(function() { 32 // Get the focusTarget DOM element 33 let focusTarget = this.$refs.focusTarget.$el; 34 35 // Make focustarget programmatically focussable 36 focusTarget.setAttribute("tabindex", "-1"); 37 38 // Focus element 39 focusTarget.focus(); 40 41 // Remove tabindex from focustarget 42 // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk 43 focusTarget.removeAttribute("tabindex"); 44 }); 45 } 46 } 47}; 48</script> 49 50<style lang="scss" scoped> 51.page-container { 52 margin-right: 0; 53 margin-left: 0; 54 padding-right: 0; 55 padding-left: 0; 56} 57</style> 58