From 0daf02393bf34a7765b1cc7357e34401aa529d42 Mon Sep 17 00:00:00 2001
From: mutoe <imutoe@gmail.com>
Date: Sun, 10 Sep 2023 20:30:10 +0800
Subject: [PATCH] feat: add aria-label for forms

---
 src/components/ArticleDetailComment.vue |  7 ++++---
 src/pages/EditArticle.vue               | 10 ++++++++--
 src/pages/Login.vue                     |  2 ++
 src/pages/Register.vue                  |  3 +++
 src/pages/Settings.vue                  |  5 +++++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/ArticleDetailComment.vue b/src/components/ArticleDetailComment.vue
index eed9b99..cc1f2a5 100644
--- a/src/components/ArticleDetailComment.vue
+++ b/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)
diff --git a/src/pages/EditArticle.vue b/src/pages/EditArticle.vue
index 3cda38e..63fcb46 100644
--- a/src/pages/EditArticle.vue
+++ b/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>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index fa52aa5..fcee837 100644
--- a/src/pages/Login.vue
+++ b/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
diff --git a/src/pages/Register.vue b/src/pages/Register.vue
index c794a90..b1845d0 100644
--- a/src/pages/Register.vue
+++ b/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"
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index cccda4b..aea6371 100644
--- a/src/pages/Settings.vue
+++ b/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"