Various accessibility improvements

* Add announcement element with `aria-live` * Add skip to main content element Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-10-10 16:24:12 +02:00
parent 6113836e29
commit eba3c70c9b
62 changed files with 687 additions and 175 deletions
--- a/js/src/router/actor.ts
+++ b/js/src/router/actor.ts
@@ -1,5 +1,6 @@
 import { RouteConfig } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 export enum ActorRouteName {
  GROUP = "Group",
@@ -14,7 +15,10 @@ export const actorRoutes: RouteConfig[] = [
    name: ActorRouteName.CREATE_GROUP,
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: { message: (): string => i18n.t("Create group") as string },
+    },
  },
  {
    path: "/@:preferredUsername",
@@ -22,13 +26,16 @@ export const actorRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
    props: true,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/groups/me",
    name: ActorRouteName.MY_GROUPS,
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: { message: (): string => i18n.t("My groups") as string },
+    },
  },
 ];
--- a/js/src/router/discussion.ts
+++ b/js/src/router/discussion.ts
@@ -1,5 +1,6 @@
 import { RouteConfig } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 export enum DiscussionRouteName {
  DISCUSSION_LIST = "DISCUSSION_LIST",
@@ -16,7 +17,12 @@ export const discussionRoutes: RouteConfig[] = [
        /* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
      ),
    props: true,
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: {
+        message: (): string => i18n.t("Discussions list") as string,
+      },
+    },
  },
  {
    path: "/@:preferredUsername/discussions/new",
@@ -26,7 +32,12 @@ export const discussionRoutes: RouteConfig[] = [
        /* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
      ),
    props: true,
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: {
+        message: (): string => i18n.t("Create discussion") as string,
+      },
+    },
  },
  {
    path: "/@:preferredUsername/c/:slug/:comment_id?",
@@ -36,6 +47,6 @@ export const discussionRoutes: RouteConfig[] = [
        /* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
      ),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
 ];
--- a/js/src/router/error.ts
+++ b/js/src/router/error.ts
@@ -1,5 +1,6 @@
 import { RouteConfig } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 export enum ErrorRouteName {
  ERROR = "Error",
@@ -11,5 +12,8 @@ export const errorRoutes: RouteConfig[] = [
    name: ErrorRouteName.ERROR,
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
+    meta: {
+      announcer: { message: (): string => i18n.t("Error") as string },
+    },
  },
 ];
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,5 +1,6 @@
 import { RouteConfig, Route } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 const participations = (): Promise<ImportedComponent> =>
  import(
@@ -33,25 +34,34 @@ export const eventRoutes: RouteConfig[] = [
    name: EventRouteName.EVENT_LIST,
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Event list") as string },
+    },
  },
  {
    path: "/events/create",
    name: EventRouteName.CREATE_EVENT,
    component: editEvent,
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: { message: (): string => i18n.t("Create event") as string },
+    },
  },
  {
    path: "/events/me",
    name: EventRouteName.MY_EVENTS,
    component: myEvents,
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: { message: (): string => i18n.t("My events") as string },
+    },
  },
  {
    path: "/events/edit/:eventId",
    name: EventRouteName.EDIT_EVENT,
    component: editEvent,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
    props: (route: Route): Record<string, unknown> => {
      return { ...route.params, ...{ isUpdate: true } };
    },
@@ -60,7 +70,7 @@ export const eventRoutes: RouteConfig[] = [
    path: "/events/duplicate/:eventId",
    name: EventRouteName.DUPLICATE_EVENT,
    component: editEvent,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announce: { skip: true } },
    props: (route: Route): Record<string, unknown> => ({
      ...route.params,
      ...{ isDuplicate: true },
@@ -70,7 +80,7 @@ export const eventRoutes: RouteConfig[] = [
    path: "/events/:eventId/participations",
    name: EventRouteName.PARTICIPATIONS,
    component: participations,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
    props: true,
  },
  {
@@ -78,7 +88,7 @@ export const eventRoutes: RouteConfig[] = [
    name: EventRouteName.EVENT,
    component: event,
    props: true,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/events/:uuid/participate",
@@ -86,12 +96,22 @@ export const eventRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import("../components/Participation/UnloggedParticipation.vue"),
    props: true,
+    meta: {
+      announcer: {
+        message: (): string => i18n.t("Unlogged participation") as string,
+      },
+    },
  },
  {
    path: "/events/:uuid/participate/with-account",
    name: EventRouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
    component: (): Promise<ImportedComponent> =>
      import("../components/Participation/ParticipationWithAccount.vue"),
+    meta: {
+      announcer: {
+        message: (): string => i18n.t("Participation with account") as string,
+      },
+    },
    props: true,
  },
  {
@@ -99,6 +119,12 @@ export const eventRoutes: RouteConfig[] = [
    name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT,
    component: (): Promise<ImportedComponent> =>
      import("../components/Participation/ParticipationWithoutAccount.vue"),
+    meta: {
+      announcer: {
+        message: (): string =>
+          i18n.t("Participation without account") as string,
+      },
+    },
    props: true,
  },
  {
@@ -106,6 +132,11 @@ export const eventRoutes: RouteConfig[] = [
    name: EventRouteName.EVENT_PARTICIPATE_CONFIRM,
    component: (): Promise<ImportedComponent> =>
      import("../components/Participation/ConfirmParticipation.vue"),
+    meta: {
+      announcer: {
+        message: (): string => i18n.t("Confirm participation") as string,
+      },
+    },
    props: true,
  },
  {
@@ -114,6 +145,9 @@ export const eventRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
    props: true,
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Tag search") as string },
+    },
  },
 ];
--- a/js/src/router/groups.ts
+++ b/js/src/router/groups.ts
@@ -33,7 +33,7 @@ export const groupsRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import("@/views/Todos/TodoLists.vue"),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/todo-lists/:id",
@@ -41,7 +41,7 @@ export const groupsRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import("@/views/Todos/TodoList.vue"),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/todo/:todoId",
@@ -49,21 +49,21 @@ export const groupsRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import("@/views/Todos/Todo.vue"),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/resources",
    name: GroupsRouteName.RESOURCE_FOLDER_ROOT,
    component: resourceFolder,
    props: { path: "/" },
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/resources/:path+",
    name: GroupsRouteName.RESOURCE_FOLDER,
    component: resourceFolder,
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/settings",
@@ -79,6 +79,7 @@ export const groupsRoutes: RouteConfig[] = [
        name: GroupsRouteName.GROUP_PUBLIC_SETTINGS,
        component: (): Promise<ImportedComponent> =>
          import("../views/Group/GroupSettings.vue"),
+        meta: { announcer: { skip: true } },
      },
      {
        path: "members",
@@ -86,6 +87,7 @@ export const groupsRoutes: RouteConfig[] = [
        component: (): Promise<ImportedComponent> =>
          import("../views/Group/GroupMembers.vue"),
        props: true,
+        meta: { announcer: { skip: true } },
      },
      {
        path: "followers",
@@ -93,6 +95,7 @@ export const groupsRoutes: RouteConfig[] = [
        component: (): Promise<ImportedComponent> =>
          import("../views/Group/GroupFollowers.vue"),
        props: true,
+        meta: { announcer: { skip: true } },
      },
    ],
  },
@@ -102,7 +105,7 @@ export const groupsRoutes: RouteConfig[] = [
      import("@/views/Posts/Edit.vue"),
    props: true,
    name: GroupsRouteName.POST_CREATE,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/p/:slug/edit",
@@ -113,7 +116,7 @@ export const groupsRoutes: RouteConfig[] = [
      ...{ isUpdate: true },
    }),
    name: GroupsRouteName.POST_EDIT,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
  {
    path: "/p/:slug",
@@ -121,7 +124,7 @@ export const groupsRoutes: RouteConfig[] = [
      import("@/views/Posts/Post.vue"),
    props: true,
    name: GroupsRouteName.POST,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/p",
@@ -129,14 +132,14 @@ export const groupsRoutes: RouteConfig[] = [
      import("@/views/Posts/List.vue"),
    props: true,
    name: GroupsRouteName.POSTS,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/events",
    component: groupEvents,
    props: true,
    name: GroupsRouteName.GROUP_EVENTS,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/join",
@@ -144,7 +147,7 @@ export const groupsRoutes: RouteConfig[] = [
      import("@/components/Group/JoinGroupWithAccount.vue"),
    props: true,
    name: GroupsRouteName.GROUP_JOIN,
-    meta: { requiredAuth: false },
+    meta: { requiredAuth: false, announcer: { skip: true } },
  },
  {
    path: "/@:preferredUsername/timeline",
@@ -152,6 +155,6 @@ export const groupsRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import("@/views/Group/Timeline.vue"),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
  },
 ];
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -13,6 +13,7 @@ import { groupsRoutes } from "./groups";
 import { discussionRoutes } from "./discussion";
 import { userRoutes } from "./user";
 import RouteName from "./name";
+import { i18n } from "@/utils/i18n";

 Vue.use(Router);

@@ -49,13 +50,19 @@ export const routes = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
    props: true,
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Search") as string },
+    },
  },
  {
    path: "/",
    name: RouteName.HOME,
    component: Home,
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Homepage") as string },
+    },
  },
  {
    path: "/about",
@@ -72,27 +79,41 @@ export const routes = [
          import(
            /* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
          ),
+        meta: {
+          announcer: {
+            message: (): string => i18n.t("About instance") as string,
+          },
+        },
      },
      {
        path: "/terms",
        name: RouteName.TERMS,
        component: (): Promise<ImportedComponent> =>
          import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
-        meta: { requiredAuth: false },
+        meta: {
+          requiredAuth: false,
+          announcer: { message: (): string => i18n.t("Terms") as string },
+        },
      },
      {
        path: "/privacy",
        name: RouteName.PRIVACY,
        component: (): Promise<ImportedComponent> =>
          import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
-        meta: { requiredAuth: false },
+        meta: {
+          requiredAuth: false,
+          announcer: { message: (): string => i18n.t("Privacy") as string },
+        },
      },
      {
        path: "/rules",
        name: RouteName.RULES,
        component: (): Promise<ImportedComponent> =>
          import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
-        meta: { requiredAuth: false },
+        meta: {
+          requiredAuth: false,
+          announcer: { message: (): string => i18n.t("Rules") as string },
+        },
      },
      {
        path: "/glossary",
@@ -101,7 +122,10 @@ export const routes = [
          import(
            /* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
          ),
-        meta: { requiredAuth: false },
+        meta: {
+          requiredAuth: false,
+          announcer: { message: (): string => i18n.t("Glossary") as string },
+        },
      },
    ],
  },
@@ -110,7 +134,10 @@ export const routes = [
    name: RouteName.INTERACT,
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "interact" */ "@/views/Interact.vue"),
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Interact") as string },
+    },
  },
  {
    path: "/auth/:provider/callback",
@@ -119,6 +146,11 @@ export const routes = [
      import(
        /* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
      ),
+    meta: {
+      announcer: {
+        message: (): string => i18n.t("Redirecting to Mobilizon") as string,
+      },
+    },
  },
  {
    path: "/welcome/:step?",
@@ -127,7 +159,10 @@ export const routes = [
      import(
        /* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
      ),
-    meta: { requiredAuth: true },
+    meta: {
+      requiredAuth: true,
+      announcer: { message: (): string => i18n.t("First steps") as string },
+    },
    props: (route: Route): Record<string, unknown> => {
      const step = Number.parseInt(route.params.step, 10);
      if (Number.isNaN(step)) {
@@ -143,7 +178,10 @@ export const routes = [
      import(
        /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
      ),
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Page not found") as string },
+    },
  },
  {
    path: "*",
--- a/js/src/router/settings.ts
+++ b/js/src/router/settings.ts
@@ -1,5 +1,6 @@
 import { Route, RouteConfig } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 export enum SettingsRouteName {
  SETTINGS = "SETTINGS",
@@ -34,7 +35,7 @@ export const settingsRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
    props: true,
-    meta: { requiredAuth: true },
+    meta: { requiredAuth: true, announcer: { skip: true } },
    redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
    name: SettingsRouteName.SETTINGS,
    children: [
@@ -42,7 +43,10 @@ export const settingsRoutes: RouteConfig[] = [
        path: "account",
        name: SettingsRouteName.ACCOUNT_SETTINGS,
        redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL },
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { skip: true },
+        },
      },
      {
        path: "account/general",
@@ -52,7 +56,12 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Account settings") as string,
+          },
+        },
      },
      {
        path: "preferences",
@@ -62,7 +71,10 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { message: (): string => i18n.t("Preferences") as string },
+        },
      },
      {
        path: "notifications",
@@ -72,13 +84,18 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Notifications") as string,
+          },
+        },
      },
      {
        path: "admin",
        name: SettingsRouteName.ADMIN,
        redirect: { name: SettingsRouteName.ADMIN_DASHBOARD },
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
      {
        path: "admin/dashboard",
@@ -87,7 +104,12 @@ export const settingsRoutes: RouteConfig[] = [
          import(
            /* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"
          ),
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Admin dashboard") as string,
+          },
+        },
      },
      {
        path: "admin/settings",
@@ -97,7 +119,12 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Admin settings") as string,
+          },
+        },
      },
      {
        path: "admin/users",
@@ -105,7 +132,10 @@ export const settingsRoutes: RouteConfig[] = [
        component: (): Promise<ImportedComponent> =>
          import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { message: (): string => i18n.t("Users") as string },
+        },
      },
      {
        path: "admin/users/:id",
@@ -115,7 +145,10 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { skip: true },
+        },
      },
      {
        path: "admin/profiles",
@@ -125,7 +158,10 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { message: (): string => i18n.t("Profiles") as string },
+        },
      },
      {
        path: "admin/profiles/:id",
@@ -135,7 +171,7 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
      {
        path: "admin/groups",
@@ -145,7 +181,12 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Group profiles") as string,
+          },
+        },
      },
      {
        path: "admin/groups/:id",
@@ -155,7 +196,7 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
      {
        path: "admin/relays",
@@ -163,7 +204,7 @@ export const settingsRoutes: RouteConfig[] = [
        redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS },
        component: (): Promise<ImportedComponent> =>
          import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
        children: [
          {
            path: "followings",
@@ -172,7 +213,12 @@ export const settingsRoutes: RouteConfig[] = [
              import(
                /* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"
              ),
-            meta: { requiredAuth: true },
+            meta: {
+              requiredAuth: true,
+              announcer: {
+                message: (): string => i18n.t("Followings") as string,
+              },
+            },
          },
          {
            path: "followers",
@@ -181,7 +227,12 @@ export const settingsRoutes: RouteConfig[] = [
              import(
                /* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"
              ),
-            meta: { requiredAuth: true },
+            meta: {
+              requiredAuth: true,
+              announcer: {
+                message: (): string => i18n.t("Followers") as string,
+              },
+            },
          },
        ],
        props: true,
@@ -190,7 +241,7 @@ export const settingsRoutes: RouteConfig[] = [
        path: "/moderation",
        name: SettingsRouteName.MODERATION,
        redirect: { name: SettingsRouteName.REPORTS },
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
      {
        path: "/moderation/reports/:filter?",
@@ -200,7 +251,12 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Reports list") as string,
+          },
+        },
      },
      {
        path: "/moderation/report/:reportId",
@@ -210,7 +266,10 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: { message: (): string => i18n.t("Report") as string },
+        },
      },
      {
        path: "/moderation/logs",
@@ -220,13 +279,18 @@ export const settingsRoutes: RouteConfig[] = [
            /* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"
          ),
        props: true,
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Moderation logs") as string,
+          },
+        },
      },
      {
        path: "/identity",
        name: SettingsRouteName.IDENTITIES,
        redirect: { name: SettingsRouteName.UPDATE_IDENTITY },
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
      {
        path: "/identity/create",
@@ -239,7 +303,12 @@ export const settingsRoutes: RouteConfig[] = [
          identityName: route.params.identityName,
          isUpdate: false,
        }),
-        meta: { requiredAuth: true },
+        meta: {
+          requiredAuth: true,
+          announcer: {
+            message: (): string => i18n.t("Create identity") as string,
+          },
+        },
      },
      {
        path: "/identity/update/:identityName?",
@@ -252,7 +321,7 @@ export const settingsRoutes: RouteConfig[] = [
          identityName: route.params.identityName,
          isUpdate: true,
        }),
-        meta: { requiredAuth: true },
+        meta: { requiredAuth: true, announcer: { skip: true } },
      },
    ],
  },
--- a/js/src/router/user.ts
+++ b/js/src/router/user.ts
@@ -1,6 +1,7 @@
 import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { Route, RouteConfig } from "vue-router";
 import { ImportedComponent } from "vue/types/options";
+import { i18n } from "@/utils/i18n";

 export enum UserRouteName {
  REGISTER = "Register",
@@ -22,7 +23,10 @@ export const userRoutes: RouteConfig[] = [
        /* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"
      ),
    props: true,
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Register") as string },
+    },
    beforeEnter: beforeRegisterGuard,
  },
  {
@@ -37,7 +41,10 @@ export const userRoutes: RouteConfig[] = [
      email: route.params.email,
      userAlreadyActivated: route.params.userAlreadyActivated === "true",
    }),
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Register") as string },
+    },
  },
  {
    path: "/resend-instructions",
@@ -47,7 +54,12 @@ export const userRoutes: RouteConfig[] = [
        /* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
      ),
    props: true,
-    meta: { requiresAuth: false },
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: (): string => i18n.t("Resent confirmation email") as string,
+      },
+    },
  },
  {
    path: "/password-reset/send",
@@ -57,7 +69,12 @@ export const userRoutes: RouteConfig[] = [
        /* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
      ),
    props: true,
-    meta: { requiresAuth: false },
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: (): string => i18n.t("Send password reset") as string,
+      },
+    },
  },
  {
    path: "/password-reset/:token",
@@ -66,7 +83,10 @@ export const userRoutes: RouteConfig[] = [
      import(
        /* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
      ),
-    meta: { requiresAuth: false },
+    meta: {
+      requiresAuth: false,
+      announcer: { message: (): string => i18n.t("Password reset") as string },
+    },
    props: true,
  },
  {
@@ -77,7 +97,10 @@ export const userRoutes: RouteConfig[] = [
        /* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"
      ),
    props: true,
-    meta: { requiresAuth: false },
+    meta: {
+      requiresAuth: false,
+      announcer: { message: (): string => i18n.t("Email validate") as string },
+    },
  },
  {
    path: "/validate/:token",
@@ -85,7 +108,12 @@ export const userRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
    props: true,
-    meta: { requiresAuth: false },
+    meta: {
+      requiresAuth: false,
+      announcer: {
+        message: (): string => i18n.t("Validating account") as string,
+      },
+    },
  },
  {
    path: "/login",
@@ -93,6 +121,9 @@ export const userRoutes: RouteConfig[] = [
    component: (): Promise<ImportedComponent> =>
      import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
    props: true,
-    meta: { requiredAuth: false },
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => i18n.t("Login") as string },
+    },
  },
 ];