added route change announcement

owncloud · Mar 19, 2021 · 6caa66b · 6caa66b
1 parent 5a56117
commit 6caa66b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/changelog/unreleased/enhancement-live-region-updates b/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
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="uk-height-1-1">
+    <oc-hidden-announcer :announcement="announcement" level="polite" />
     <skip-to target="main">Skip to main</skip-to>
     <div id="Web" class="uk-height-1-1">
       <div
@@ -83,7 +84,7 @@
 </template>
 <script>
 import 'inert-polyfill'
-import { mapGetters, mapState, mapActions } from 'vuex'
+import {mapActions, mapGetters, mapState} from 'vuex'
 import TopBar from './components/Top-Bar.vue'
 import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
@@ -98,7 +99,8 @@ export default {
     return {
       appNavigationVisible: false,
       $_notificationsInterval: null,
-      windowWidth: 0
+      windowWidth: 0,
+      announcement: ''
     }
   },
   computed: {
@@ -218,6 +220,7 @@ export default {
     $route: {
       immediate: true,
       handler: function(to) {
+        this.announceRouteChange(to)
         document.title = this.extractPageTitleFromRoute(to)
       }
     },
@@ -321,11 +324,19 @@ export default {
 
       this.appNavigationVisible = false
     },
-    extractPageTitleFromRoute(route) {
-      const titleSegments = [this.configuration.theme.general.name]
 
-      if (route.meta.pageTitle) {
-        titleSegments.unshift(route.meta.pageTitle)
+    announceRouteChange(route) {
+      const pageTitle = this.extractPageTitleFromRoute(route, false)
+
+      const translated = this.$gettext(' Navigated to %{ pageTitle }')
+      this.announcement = this.$gettextInterpolate(translated, { pageTitle })
+    },
+
+    extractPageTitleFromRoute(route, includeGeneralName = true) {
+      const titleSegments = [route.meta.pageTitle || route.name]
+
+      if (includeGeneralName) {
+        titleSegments.push(this.configuration.theme.general.name)
       }
 
       if (route.params.item) {

diff --git a/packages/web-runtime/src/router/index.js b/packages/web-runtime/src/router/index.js
@@ -9,6 +9,11 @@ import store from '../store'
 
 Vue.use(Router)
 
+// just a dummy function to trick gettext tools
+function $gettext(msg) {
+  return msg
+}
+
 const router = new Router({
   //  mode: 'history',
   routes: [
@@ -18,48 +23,49 @@ const router = new Router({
       components: {
         fullscreen: LoginPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Login') }
     },
     {
       path: '/oidc-callback',
       components: {
         fullscreen: OidcCallbackPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Oidc callback') }
     },
     {
       path: '/oidc-silent-redirect',
       components: {
         fullscreen: OidcCallbackPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Oidc redirect') }
     },
     {
       path: '/f/:fileId',
       name: 'privateLink',
       redirect: '/files/private-link/:fileId',
-      meta: { hideHeadbar: true }
+      meta: { hideHeadbar: true, pageTitle: $gettext('Private link') }
     },
     {
       path: '/s/:token',
       name: 'publicLink',
       redirect: '/files/public-link/:token',
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Public link') }
     },
     {
       path: '/access-denied',
       name: 'accessDenied',
       components: {
         fullscreen: AccessDeniedPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Access denied') }
     },
     {
       path: '/account',
       name: 'account',
       components: {
         app: Account
-      }
+      },
+      meta: { pageTitle: $gettext('Accounts') }
     }
   ]
 })