added route change announcement

changelog/unreleased/enhancement-live-region-updates

@@ -0,0 +1,4 @@
+Enhancement: Implement live region updates on route changes
+
+https://github.com/owncloud/web/pull/4812
+https://github.com/owncloud/web/issues/4346

packages/web-runtime/package.json

@@ -4,6 +4,7 @@
   "description": "ownCloud web runtime",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@vue-a11y/announcer": "^2.1.0",
     "easygettext": "^2.16.1",
     "inert-polyfill": "^0.2.5",
     "lodash-es": "^4.17.20",
@@ -26,5 +27,6 @@
     "vuex-persist": "2.0.1",
     "vuex-router-sync": "^5.0.0",
     "wicked-good-xpath": "^1.3.0"
-  }
+  },
+  "dependencies": {}
 }

packages/web-runtime/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="uk-height-1-1">
+    <VueAnnouncer />
     <skip-to target="main">Skip to main</skip-to>
     <div id="Web" class="uk-height-1-1">
       <div
@@ -215,8 +216,12 @@ export default {
     }
   },
   watch: {
-    $route() {
-      this.appNavigationVisible = false
+    $route: {
+      immediate: true,
+      handler: function(to) {
+        this.appNavigationVisible = false
+        this.announceRouteChange(to)
+      }
     },
     capabilities(caps) {
       if (!caps) {
@@ -272,9 +277,9 @@ export default {
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize)
       this.onResize()
+      this.announceRouteChange(this.$router.currentRoute)
     })
   },
-
   beforeMount() {
     this.initAuth()
   },
@@ -318,6 +323,22 @@ export default {
       }
 
       this.appNavigationVisible = false
+    },
+    announceRouteChange(route) {
+      const titleSegments = [route.meta.pageTitle || route.name]
+
+      if (route.params.item) {
+        if (route.name.startsWith('files-')) {
+          const fileTree = route.params.item.split('/').filter(el => el.length)
+          if (fileTree.length) {
+            titleSegments.push(fileTree.pop())
+          }
+        } else {
+          titleSegments.push(route.params.item)
+        }
+      }
+
+      this.$announcer.polite(`${this.$gettext('Navigated to')} "${titleSegments.join(' - ')}"`)
     }
   }
 }

packages/web-runtime/src/index.js

@@ -21,6 +21,7 @@ import VueClipboard from 'vue-clipboard2'
 import VueScrollTo from 'vue-scrollto'
 import VueMeta from 'vue-meta'
 import Vue2TouchEvents from 'vue2-touch-events'
+import VueAnnouncer from '@vue-a11y/announcer'
 
 // --- Gettext ----
 import GetTextPlugin from 'vue-gettext'
@@ -64,6 +65,7 @@ Vue.use(VueMeta, {
 })
 Vue.use(ChunkedUpload)
 Vue.use(Vue2TouchEvents)
+Vue.use(VueAnnouncer)
 
 Vue.component('drag', Drag)
 Vue.component('drop', Drop)

yarn.lock

@@ -1546,6 +1546,11 @@
     "@typescript-eslint/types" "4.14.1"
     eslint-visitor-keys "^2.0.0"
 
+"@vue-a11y/announcer@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@vue-a11y/announcer/-/announcer-2.1.0.tgz#ed725e90b91870c76285840e0aaa637cfafbf27f"
+  integrity sha512-7V1osiJQxZPBA+2duF2nZugwgbIba/yvKLsHWvGIBJGY0VZhR4vYyFH3VFyFH2Yi46tHEVBN+X+a0uQaJMhCsQ==
+
 "@vue/[email protected]":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.5.tgz#a6e54cabe9536e74c6513acd2649f311af1d43ac"