feat: add aria-label for forms

src/components/ArticleDetailComment.vue

@@ -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)

src/pages/EditArticle.vue

@@ -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>

src/pages/Login.vue

@@ -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

src/pages/Register.vue

@@ -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"

src/pages/Settings.vue

@@ -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"