feat: Custom announcer complementRoute by locale

Author: ktquez

Diff for: docs/.vuepress/config.js

@@ -22,6 +22,9 @@ module.exports = {
           ariaLabel: 'toggle to %cm mode color',
           ariaLive: '%cm color mode is enabled'
         },
+        announcer: {
+          complementRoute: 'has loaded'
+        },
         nav: [
           {
             text: 'Guide',

Diff for: docs/guide/config.md

@@ -39,18 +39,21 @@ module.exports = {
     // ...
     locales: {
       '/': {
+        // ...
         colorMode: {
           ariaLabel: 'toggle to %cm mode color',
           ariaLive: '%cm color mode is enabled'
         }
       },
       '/pt': {
+        // ...
         colorMode: {
           ariaLabel: 'Trocar para o modo de cor %cm',
           ariaLive: 'Modo de cor %cm está habilitado'
         }
       },
       '/es': {
+        // ...
         colorMode: {
           ariaLabel: 'Cambiar al modo de color %cm',
           ariaLive: 'Se eligió el modo de color %cm'
@@ -66,4 +69,38 @@ Pretty soon
 
 ## Announcer
 
-Pretty soon
+The [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer) provides an easy way for people using screen readers to know what’s going on in your app.
+
+It is already installed and configured in the theme to announce the routes changes.
+
+You can configure the title add-on according to the location, by default the value is `has loaded`.
+
+```javascript
+// e.g. docs/.vuepress/config.js
+module.exports = {
+  theme: 'vuepress-theme-default-vue-a11y',
+  // ...
+  themeConfig: {
+    // ...
+    locales: {
+      '/': {
+        // ...
+        announcer: {                          
+          complementRoute: 'has loaded'       // optional
+        }
+      },
+      '/pt': {
+        // ...
+        announcer: {
+          complementRoute: 'foi carregado'
+        }
+      },
+      '/es': {
+        // ...
+        announcer: {
+          complementRoute: 'ha cargado'
+        }
+      }
+    }
+  }
+```

Diff for: layouts/Layout.vue

@@ -47,12 +47,15 @@ export default {
       this.$nextTick(() => {
         this.setMainId()
         this.setWarningInExternalLinks()
+        this.setComplementRouteToAnnouncer()
       })
     },
+
     setMainId () {
       const main = document.getElementsByTagName('main')
       if (main.length) main[0].setAttribute('id', 'main')
     },
+
     setWarningInExternalLinks () {
       const links = document.querySelectorAll('a[target="_blank"]')
       if (!links.length) return
@@ -61,6 +64,12 @@ export default {
         const warning = `<span class="visually-hidden">, ${this.$themeLocaleConfig.warningExternalLinkText || 'opens in a new window'}</span>`
         link.innerHTML = link.innerHTML.replace(textContent, `${textContent} ${warning}`)
       })
+    },
+
+    setComplementRouteToAnnouncer () {
+      if (this.$themeLocaleConfig.announcer) {
+        this.$announcer.setComplementRoute(this.$themeLocaleConfig.announcer.complementRoute)
+      }
     }
   }
 }