liwenyun
/
vue3-realworld-example-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add aria-label for forms

This commit is contained in:
mutoe 2023-09-10 20:30:10 +08:00
parent ece4466b7a
commit 0daf02393b
No known key found for this signature in database
GPG Key ID: 7197231B847AE2EE
5 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ArticleDetailComment.vue
View File

@ -34,10 +34,12 @@
<span class="mod-options">
<i
v-if="showRemove"
tabindex="0"
role="button"
aria-label="Delete comment"
class="ion-trash-a"
@click="emit('remove-comment')"
@keypress.enter="emit('remove-comment')"
/>
</span>
</div>
@ -45,19 +47,18 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { Comment } from 'src/services/api'
import { computed } from 'vue'
interface Props {
comment: Comment
username?: string
}
const props = defineProps<Props>()
interface Emits {
(e: 'remove-comment'): boolean
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const showRemove = computed(() => props.username !== undefined && props.username === props.comment.author.username)

10
src/pages/EditArticle.vue
View File

@ -7,6 +7,7 @@
<fieldset class="form-group">
<input
v-model="form.title"
aria-label="Title"
type="text"
class="form-control form-control-lg"
placeholder="Article Title"
@ -15,6 +16,7 @@
<fieldset class="form-group">
<input
v-model="form.description"
aria-label="Description"
type="text"
class="form-control form-control-lg"
placeholder="What's this article about?"
@ -23,6 +25,7 @@
<fieldset class="form-group">
<textarea
v-model="form.body"
aria-label="Body"
:rows="8"
class="form-control"
placeholder="Write your article (in markdown)"
@ -31,6 +34,7 @@
<fieldset class="form-group">
<input
v-model="newTag"
aria-label="Tags"
type="text"
class="form-control"
placeholder="Enter tags"
@ -44,10 +48,12 @@
class="tag-default tag-pill"
>
<i
class="ion-close-round"
role="button"
:aria-label="`Remove tag: ${tag}`"
tabindex="0"
:aria-label="`Delete tag ${tag}`"
class="ion-close-round"
@click="removeTag(tag)"
@keypress.enter="removeTag(tag)"
/>
{{ tag }}
</span>

2
src/pages/Login.vue
View File

@ -32,6 +32,7 @@
>
<input
v-model="form.email"
aria-label="Email"
class="form-control form-control-lg"
type="email"
required
@ -41,6 +42,7 @@
<fieldset class=" form-group">
<input
v-model="form.password"
aria-label="Password"
class="form-control form-control-lg"
type="password"
required

3
src/pages/Register.vue
View File

@ -29,6 +29,7 @@
<fieldset class="form-group">
<input
v-model="form.username"
aria-label="Username"
class="form-control form-control-lg"
type="text"
required
@ -38,6 +39,7 @@
<fieldset class="form-group">
<input
v-model="form.email"
aria-label="Email"
class="form-control form-control-lg"
type="email"
required
@ -47,6 +49,7 @@
<fieldset class="form-group">
<input
v-model="form.password"
aria-label="Password"
class="form-control form-control-lg"
type="password"
:minLength="8"

5
src/pages/Settings.vue
View File

@ -18,6 +18,7 @@
<fieldset class="form-group">
<input
v-model="form.image"
aria-label="Avatar picture url"
type="text"
class="form-control"
placeholder="URL of profile picture"
@ -26,6 +27,7 @@
<fieldset class="form-group">
<input
v-model="form.username"
aria-label="Username"
type="text"
class="form-control form-control-lg"
placeholder="Your name"
@ -34,6 +36,7 @@
<fieldset class="form-group">
<textarea
v-model="form.bio"
aria-label="Bio"
class="form-control form-control-lg"
:rows="8"
placeholder="Short bio about you"
@ -42,6 +45,7 @@
<fieldset class="form-group">
<input
v-model="form.email"
aria-label="Email"
type="email"
class="form-control form-control-lg"
placeholder="Email"
@ -50,6 +54,7 @@
<fieldset class="form-group">
<input
v-model="form.password"
aria-label="Password"
type="password"
class="form-control form-control-lg"
placeholder="New password"