Skip to content

Commit 6eec58f

Browse files
andresdamesonandresdameson
committed
[a11y] Fix: corrije el título que se anuncia al cargar una página
En Firefox al menos se anunciaba el título de la página anterior. El hook `afterEach` de vue-router se ejecuta ANTES de que termine de armarse el componente de la página y vue-announcer lee el título ANTES de que se actualice. En vue-announcer lo tienen en cuenta pero parece que en Firefox no funciona su fix: vue-a11y/vue-announcer@50c3cae#diff-1fdf421c05c1140f6d71444ea2b27638 En vue-router tienen previsto hacer cambios en el hook para evitar este tipo de problemas: vuejs/vue-router#2079
1 parent 253c7ce commit 6eec58f

30 files changed

+3190
-2178
lines changed

‎layouts/error.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default {
3131
},
3232
beforeRouteEnter (to, from, next) {
3333
next(vm => {
34+
vm.$announcer.assertive(`${vm.title} ${vm.$announcer.options.complementRoute}`)
3435
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
3536
})
3637
},

‎package-lock.json

Lines changed: 3075 additions & 2170 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@
2323
"@nuxtjs/pwa": "^3.0.0-beta.20",
2424
"@sentry/browser": "^5.15.5",
2525
"@sentry/integrations": "^5.15.5",
26+
"@vue-a11y/announcer": "^2.0.1",
27+
"focus-trap": "^5.1.0",
2628
"focus-trap-vue": "0.0.6",
2729
"focus-visible": "^5.1.0",
2830
"moment": "~2.24.0",
29-
"nuxt": "^2.11.0",
31+
"nuxt": "^2.12.2",
3032
"vee-validate": "~2.1.7",
3133
"vue": "^2.6.11",
32-
"vue-announcer": "^1.0.5",
3334
"vue-carousel": "~0.17.0",
3435
"vue-webp-plugin": "~1.0.2"
3536
},

‎pages/activar-cuenta.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ export default {
5454
5555
beforeRouteEnter (to, from, next) {
5656
next(vm => {
57+
vm.$announcer.set(
58+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
59+
vm.$announcer.options.politeness
60+
)
5761
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
5862
})
5963
},

‎pages/ayuda.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
3737
beforeRouteEnter (to, from, next) {
3838
next(vm => {
39+
vm.$announcer.set(
40+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
41+
vm.$announcer.options.politeness
42+
)
3943
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
4044
})
4145
},

‎pages/buscar.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ export default {
7070
},
7171
beforeRouteEnter (to, from, next) {
7272
next(vm => {
73+
vm.$announcer.set(
74+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
75+
vm.$announcer.options.politeness
76+
)
7377
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
7478
})
7579
},

‎pages/configuracion.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,10 @@ export default {
105105
},
106106
beforeRouteEnter (to, from, next) {
107107
next(vm => {
108+
vm.$announcer.set(
109+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
110+
vm.$announcer.options.politeness
111+
)
108112
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
109113
})
110114
},

‎pages/confirme-su-email.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export default {
3333
},
3434
beforeRouteEnter (to, from, next) {
3535
next(vm => {
36+
vm.$announcer.set(
37+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
38+
vm.$announcer.options.politeness
39+
)
3640
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
3741
})
3842
},

‎pages/contenido-no-disponible.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export default {
2525
},
2626
beforeRouteEnter (to, from, next) {
2727
next(vm => {
28+
vm.$announcer.set(
29+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
30+
vm.$announcer.options.politeness
31+
)
2832
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
2933
})
3034
},

‎pages/debito-automatico.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,10 @@ export default {
144144
145145
beforeRouteEnter (to, from, next) {
146146
next(vm => {
147+
vm.$announcer.set(
148+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
149+
vm.$announcer.options.politeness
150+
)
147151
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
148152
})
149153
},

‎pages/estado-suscripcion.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export default {
4242
},
4343
beforeRouteEnter (to, from, next) {
4444
next(vm => {
45+
vm.$announcer.set(
46+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
47+
vm.$announcer.options.politeness
48+
)
4549
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
4650
})
4751
},

‎pages/favoritas.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export default {
4949
},
5050
beforeRouteEnter (to, from, next) {
5151
next(vm => {
52+
vm.$announcer.set(
53+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
54+
vm.$announcer.options.politeness
55+
)
5256
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
5357
})
5458
},

‎pages/guardar-tarjeta.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,10 @@ export default {
122122
123123
beforeRouteEnter (to, from, next) {
124124
next(vm => {
125+
vm.$announcer.set(
126+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
127+
vm.$announcer.options.politeness
128+
)
125129
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
126130
})
127131
},

‎pages/index.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default {
3535
},
3636
beforeRouteEnter (to, from, next) {
3737
next(vm => {
38+
vm.$announcer.set(
39+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
40+
vm.$announcer.options.politeness
41+
)
3842
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
3943
})
4044
},

‎pages/ingrese-su-email.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ export default {
6464
},
6565
beforeRouteEnter (to, from, next) {
6666
next(vm => {
67+
vm.$announcer.set(
68+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
69+
vm.$announcer.options.politeness
70+
)
6771
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
6872
})
6973
},

‎pages/inicio.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,10 @@ export default {
173173
},
174174
beforeRouteEnter (to, from, next) {
175175
next(vm => {
176+
vm.$announcer.set(
177+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
178+
vm.$announcer.options.politeness
179+
)
176180
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
177181
})
178182
},

‎pages/login.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,10 @@ export default {
8787
},
8888
beforeRouteEnter (to, from, next) {
8989
next(vm => {
90+
vm.$announcer.set(
91+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
92+
vm.$announcer.options.politeness
93+
)
9094
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
9195
})
9296
},

‎pages/medio-de-pago.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ export default {
4545
},
4646
beforeRouteEnter (to, from, next) {
4747
next(vm => {
48+
vm.$announcer.set(
49+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
50+
vm.$announcer.options.politeness
51+
)
4852
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
4953
})
5054
},

‎pages/modificar-datos.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@ export default {
6868
},
6969
beforeRouteEnter (to, from, next) {
7070
next(vm => {
71+
vm.$announcer.set(
72+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
73+
vm.$announcer.options.politeness
74+
)
7175
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
7276
})
7377
},

‎pages/modificar-debito.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,10 @@ export default {
144144
145145
beforeRouteEnter (to, from, next) {
146146
next(vm => {
147+
vm.$announcer.set(
148+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
149+
vm.$announcer.options.politeness
150+
)
147151
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
148152
})
149153
},

‎pages/modificar-plan.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ export default {
7373
},
7474
beforeRouteEnter (to, from, next) {
7575
next(vm => {
76+
vm.$announcer.set(
77+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
78+
vm.$announcer.options.politeness
79+
)
7680
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
7781
})
7882
},

‎pages/modificar-tarjeta.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,10 @@ export default {
242242
243243
beforeRouteEnter (to, from, next) {
244244
next(vm => {
245+
vm.$announcer.set(
246+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
247+
vm.$announcer.options.politeness
248+
)
245249
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
246250
})
247251
},

‎pages/normativa/_id.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,10 @@ export default {
102102
},
103103
beforeRouteEnter (to, from, next) {
104104
next(vm => {
105+
vm.$announcer.set(
106+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
107+
vm.$announcer.options.politeness
108+
)
105109
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
106110
})
107111
},

‎pages/nueva-clave.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ export default {
8989
},
9090
beforeRouteEnter (to, from, next) {
9191
next(vm => {
92+
vm.$announcer.set(
93+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
94+
vm.$announcer.options.politeness
95+
)
9296
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
9397
})
9498
},

‎pages/registrar-suscripcion.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,10 @@ export default {
124124
125125
beforeRouteEnter (to, from, next) {
126126
next(vm => {
127+
vm.$announcer.set(
128+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
129+
vm.$announcer.options.politeness
130+
)
127131
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
128132
})
129133
},

‎pages/registro.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,10 @@ export default {
124124
},
125125
beforeRouteEnter (to, from, next) {
126126
next(vm => {
127+
vm.$announcer.set(
128+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
129+
vm.$announcer.options.politeness
130+
)
127131
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
128132
})
129133
},

‎pages/restaurar-clave.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default {
5656
email: '',
5757
error: false,
5858
info: false,
59-
title: 'Ingrese su email',
59+
title: 'Restaurar clave',
6060
}
6161
},
6262
computed: {
@@ -69,6 +69,10 @@ export default {
6969
},
7070
beforeRouteEnter (to, from, next) {
7171
next(vm => {
72+
vm.$announcer.set(
73+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
74+
vm.$announcer.options.politeness
75+
)
7276
vm.$utils.moveFocus(vm.$refs.pageFocusTarget)
7377
})
7478
},
@@ -97,7 +101,7 @@ export default {
97101
},
98102
head () {
99103
return {
100-
title: this.title,
104+
title: this.title,
101105
meta: [
102106
{ hid: 'description', name: 'description', content: '' }
103107
]

‎pages/seleccione-su-plan.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ export default {
5555
},
5656
beforeRouteEnter (to, from, next) {
5757
next(vm => {
58+
vm.$announcer.set(
59+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
60+
vm.$announcer.options.politeness
61+
)
5862
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
5963
})
6064
},

‎pages/tarjeta-de-credito.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,10 @@ export default {
256256
257257
beforeRouteEnter (to, from, next) {
258258
next(vm => {
259+
vm.$announcer.set(
260+
`${vm.title} ${vm.$announcer.options.complementRoute}`,
261+
vm.$announcer.options.politeness
262+
)
259263
vm.$utils.moveFocus(vm.$refs.pageFocusTarget.$el)
260264
})
261265
},

‎plugins/a11y.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22

33
// Really tell what’s going on in your application to people using screen readers.
4-
import VueAnnouncer from 'vue-announcer'
4+
import VueAnnouncer from '@vue-a11y/announcer'
55

66
// Polyfill for `:focus-visible`
77
import 'focus-visible'
@@ -10,10 +10,11 @@ import 'focus-visible'
1010
// https://www.npmjs.com/package/focus-trap-vue
1111
import { FocusTrap } from 'focus-trap-vue'
1212

13-
export default function({ app: {router} }) {
13+
export default function() {
1414
Vue.use(VueAnnouncer, {
15-
complementRoute: 'ha cargado'
16-
}, router)
15+
complementRoute: 'ha cargado',
16+
politeness: 'polite',
17+
})
1718

1819
Vue.component('FocusTrap', FocusTrap)
1920
}

0 commit comments

Comments
 (0)