AppLayout.vue (09e45cd4f5e233d4ec75c086dd7ab912a2f79a41) AppLayout.vue (eb154bbc9f71a923563479919578bd5053795980)
1<template>
2 <div>
1<template>
2 <div>
3 <app-header ref="focusTarget" />
3 <app-header ref="focusTarget" @refresh="refresh" />
4 <b-container fluid class="page-container">
5 <b-row no-gutters>
6 <b-col tag="nav" cols="12" md="3" lg="2">
7 <app-navigation />
8 </b-col>
9 <b-col cols="12" md="9" lg="10">
10 <page-container>
4 <b-container fluid class="page-container">
5 <b-row no-gutters>
6 <b-col tag="nav" cols="12" md="3" lg="2">
7 <app-navigation />
8 </b-col>
9 <b-col cols="12" md="9" lg="10">
10 <page-container>
11 <router-view ref="routerView" />
11 <router-view ref="routerView" :key="routerKey" />
12 </page-container>
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';
22import PageContainer from '../components/Global/PageContainer';
23export default {
24 name: 'App',
25 components: {
26 AppHeader,
27 AppNavigation,
28 PageContainer
29 },
12 </page-container>
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';
22import PageContainer from '../components/Global/PageContainer';
23export default {
24 name: 'App',
25 components: {
26 AppHeader,
27 AppNavigation,
28 PageContainer
29 },
30 data() {
31 return {
32 routerKey: 0
33 };
34 },
30 watch: {
31 $route: function() {
32 // $nextTick = DOM updated
33 this.$nextTick(function() {
34 // Get the focusTarget DOM element
35 let focusTarget = this.$refs.focusTarget.$el;
36
37 // Make focustarget programmatically focussable
38 focusTarget.setAttribute('tabindex', '-1');
39
40 // Focus element
41 focusTarget.focus();
42
43 // Remove tabindex from focustarget
44 // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
45 focusTarget.removeAttribute('tabindex');
46 });
47 }
35 watch: {
36 $route: function() {
37 // $nextTick = DOM updated
38 this.$nextTick(function() {
39 // Get the focusTarget DOM element
40 let focusTarget = this.$refs.focusTarget.$el;
41
42 // Make focustarget programmatically focussable
43 focusTarget.setAttribute('tabindex', '-1');
44
45 // Focus element
46 focusTarget.focus();
47
48 // Remove tabindex from focustarget
49 // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
50 focusTarget.removeAttribute('tabindex');
51 });
52 }
53 },
54 methods: {
55 refresh() {
56 // Changing the component :key value will trigger
57 // a component re-rendering and 'refresh' the view
58 this.routerKey += 1;
59 }
48 }
49};
50</script>
51
52<style lang="scss" scoped>
53.page-container {
54 margin-right: 0;
55 margin-left: 0;
56 padding-right: 0;
57 padding-left: 0;
58}
59</style>
60 }
61};
62</script>
63
64<style lang="scss" scoped>
65.page-container {
66 margin-right: 0;
67 margin-left: 0;
68 padding-right: 0;
69 padding-left: 0;
70}
71</style>