Various accessibility improvements

* Add announcement element with `aria-live`
* Add skip to main content element

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/User/EmailValidate.vue

@@ -24,7 +24,13 @@ import { VALIDATE_EMAIL } from "../../graphql/user";
 import RouteName from "../../router/name";
 import { ICurrentUser } from "../../types/current-user.model";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Validating email") as string,
+    };
+  },
+})
 export default class Validate extends Vue {
   @Prop({ type: String, required: true }) token!: string;
 

js/src/views/User/PasswordReset.vue

@@ -50,7 +50,13 @@ import { saveUserData } from "../../utils/auth";
 import { ILogin } from "../../types/login.model";
 import RouteName from "../../router/name";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Password reset") as string,
+    };
+  },
+})
 export default class PasswordReset extends Vue {
   @Prop({ type: String, required: true }) token!: string;
 

js/src/views/User/ProviderValidation.vue

@@ -9,7 +9,13 @@ import RouteName from "../../router/name";
 import { saveUserData, changeIdentity } from "../../utils/auth";
 import { IUser } from "../../types/current-user.model";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Redirecting to Mobilizon") as string,
+    };
+  },
+})
 export default class ProviderValidate extends Vue {
   async mounted(): Promise<void> {
     const accessToken = this.getValueFromMeta("auth-access-token");

js/src/views/User/Register.vue

@@ -59,7 +59,7 @@
           <router-link class="out" :to="{ name: RouteName.ABOUT }">{{
             $t("Learn more")
           }}</router-link>
-          <hr />
+          <hr role="presentation" />
           <div class="content">
             <subtitle>{{
               $t("About {instance}", { instance: config.name })
@@ -170,7 +170,7 @@
               >
             </p>
 
-            <hr />
+            <hr role="presentation" />
             <div
               class="control"
               v-if="config && config.auth.oauthProviders.length > 0"

js/src/views/User/ResendConfirmation.vue

@@ -56,7 +56,13 @@ import {
 import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth";
 import RouteName from "../../router/name";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Resend confirmation email") as string,
+    };
+  },
+})
 export default class ResendConfirmation extends Vue {
   @Prop({ type: String, required: false, default: "" }) email!: string;
 

js/src/views/User/SendPasswordReset.vue

@@ -71,7 +71,13 @@ import {
 import { SEND_RESET_PASSWORD } from "../../graphql/auth";
 import RouteName from "../../router/name";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Reset password") as string,
+    };
+  },
+})
 export default class SendPasswordReset extends Vue {
   @Prop({ type: String, required: false, default: "" }) email!: string;
 

js/src/views/User/SettingsOnboard.vue

@@ -66,6 +66,11 @@ import { IConfig } from "../../types/config.model";
   apollo: {
     config: TIMEZONES,
   },
+  metaInfo() {
+    return {
+      title: this.$t("First steps") as string,
+    };
+  },
 })
 export default class SettingsOnboard extends Vue {
   @Prop({ required: false, default: 1, type: Number }) step!: number;

js/src/views/User/Validate.vue

@@ -29,7 +29,13 @@ import RouteName from "../../router/name";
 import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth";
 import { ILogin } from "../../types/login.model";
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      title: this.$t("Validating account") as string,
+    };
+  },
+})
 export default class Validate extends Vue {
   @Prop({ type: String, required: true }) token!: string;