Fix #612: Improved accessibility by using main/section/nav tags and aria-labels in most critical places

This commit is contained in:
Eliot Berriot 2018-11-19 23:33:22 +01:00
parent 9005ebbd6d
commit 29171853b3
No known key found for this signature in database
GPG key ID: DD6965E2476E5C27
42 changed files with 1266 additions and 1122 deletions

View file

@ -1,6 +1,6 @@
<template>
<div class="main pusher" v-title="labels.title">
<div class="ui vertical stripe segment">
<main class="main pusher" v-title="labels.title">
<section class="ui vertical stripe segment">
<div class="ui small text container">
<h2><translate>Create a funkwhale account</translate></h2>
<form
@ -53,49 +53,51 @@
</button>
</form>
</div>
</div>
</div>
</section>
</main>
</template>
<script>
import axios from 'axios'
import logger from '@/logging'
import axios from "axios"
import logger from "@/logging"
import PasswordInput from '@/components/forms/PasswordInput'
import PasswordInput from "@/components/forms/PasswordInput"
export default {
props: {
defaultInvitation: {type: String, required: false, default: null},
next: {type: String, default: '/'}
defaultInvitation: { type: String, required: false, default: null },
next: { type: String, default: "/" }
},
components: {
PasswordInput
},
data () {
data() {
return {
username: '',
email: '',
password: '',
username: "",
email: "",
password: "",
isLoadingInstanceSetting: true,
errors: [],
isLoading: false,
invitation: this.defaultInvitation
}
},
created () {
created() {
let self = this
this.$store.dispatch('instance/fetchSettings', {
callback: function () {
this.$store.dispatch("instance/fetchSettings", {
callback: function() {
self.isLoadingInstanceSetting = false
}
})
},
computed: {
labels () {
let title = this.$gettext('Sign Up')
let placeholder = this.$gettext('Enter your invitation code (case insensitive)')
let usernamePlaceholder = this.$gettext('Enter your username')
let emailPlaceholder = this.$gettext('Enter your email')
labels() {
let title = this.$gettext("Sign Up")
let placeholder = this.$gettext(
"Enter your invitation code (case insensitive)"
)
let usernamePlaceholder = this.$gettext("Enter your username")
let emailPlaceholder = this.$gettext("Enter your email")
return {
title,
usernamePlaceholder,
@ -105,7 +107,7 @@ export default {
}
},
methods: {
submit () {
submit() {
var self = this
self.isLoading = true
this.errors = []
@ -116,17 +118,21 @@ export default {
email: this.email,
invitation: this.invitation
}
return axios.post('auth/registration/', payload).then(response => {
logger.default.info('Successfully created account')
self.$router.push({
name: 'profile',
params: {
username: this.username
}})
}, error => {
self.errors = error.backendErrors
self.isLoading = false
})
return axios.post("auth/registration/", payload).then(
response => {
logger.default.info("Successfully created account")
self.$router.push({
name: "profile",
params: {
username: this.username
}
})
},
error => {
self.errors = error.backendErrors
self.isLoading = false
}
)
}
}
}