Merge pull request #8 from ldawkes/dynamic-route-complement

Add $announcer.setComplementRoute

Author: ktquez

README.md

@@ -83,6 +83,22 @@ Vue.use(VueAnnouncer, {
 }, router) 
 ```
 
+### Methods
+**Note: These methods are registered on the `$announcer` property injected into the Vue instance**
+
+#### `$announcer.setComplementRoute(complementRoute)`
+
+If you need to set the `complementRoute` option dynamically without reloading the application, for example if you're
+dynamically loading translations, you can use this method to update it.
+
+```javascript
+export default {
+  onTranslationsUpdated (translations) {
+    this.$announcer.setComplementRoute(translations.complementRouteKey /* = 'ha cargado' */)
+  }
+}
+```
+
 ### Custom message to each page (optional)
 You can set a property on the meta object, which will serve as information to get the message that will be announced to the screen reader on each page. e.g.:
 ```javascript

example/src/router.js

@@ -11,6 +11,11 @@ const router = new VueRouter({
   mode: 'history',
   routes: [
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has loaded')
+
+        next()
+      },
       name: 'home',
       path: '/',
       component: Home,
@@ -19,6 +24,11 @@ const router = new VueRouter({
       }
     },
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has loaded')
+
+        next()
+      },
       name: 'about',
       path: '/about',
       component: About,
@@ -27,6 +37,11 @@ const router = new VueRouter({
       }
     },
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has fully loaded')
+
+        next()
+      },
       name: 'contact',
       path: '/contact',
       component: Contact,

index.d.ts

@@ -5,6 +5,8 @@ export interface Announcer
     data: Record<string, any>;
 
     set(message: string): void;
+
+    setComplementRoute(complementRoute: string): void;
 }
 
 declare module 'vue/types/vue'

src/index.js

@@ -15,6 +15,14 @@ export default function install (Vue, options = {}, router = null) {
           })
       }
     },
+
+    setComplementRoute (complementRoute) {
+      if (typeof (complementRoute) !== 'string') {
+        return
+      }
+
+      options.complementRoute = complementRoute
+    },
     data: null
   }
 

tests/e2e/integration/vue-announcer.test.js

@@ -12,18 +12,31 @@ describe('Announcer test', () => {
     cy.get('[data-va="announcer"]').should('contain', 'has loaded')
   })
 
+  it('Should contain the custom complement when the route changes', () => {
+    cy.get('a[href="/contact"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has fully loaded')
+  })
+
+  it('Should handle setting the custom complement multiple times', () => {
+    cy.get('a[href="/contact"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has fully loaded')
+
+    cy.get('a[href="/about"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has loaded')
+  })
+
   it('Should be equal toasted message with the announced', () => {
     cy.get('a[href="/about"]').click()
     cy.get('[data-va="toasted"]').click()
 
     cy.get('.toasted-container')
-      .find('.toasted')
-      .invoke('text')
-      .then(text1 => {
-        cy.get('[data-va="announcer"]').invoke('text').should(text2 => {
-          console.log(text1, text2)
-          expect(text1).to.eq(text2)
+        .find('.toasted')
+        .invoke('text')
+        .then(text1 => {
+          cy.get('[data-va="announcer"]').invoke('text').should(text2 => {
+            console.log(text1, text2)
+            expect(text1).to.eq(text2)
+          })
         })
-      })
   })
 })