From c83fea032a90ad3b704211f8ca8383a8204eca7a Mon Sep 17 00:00:00 2001
From: VChet <17050347+VChet@users.noreply.github.com>
Date: Sat, 17 Oct 2020 12:38:28 +0500
Subject: [PATCH] fix(buttons): add types and aria-labels

---
 src/src/components/AppHeader.vue               | 10 ++++++++--
 src/src/components/CloseButton.vue             |  2 +-
 src/src/components/StyleCard.vue               |  1 +
 src/src/components/dialogs/AddStyleDialog.vue  |  4 ++--
 src/src/components/dialogs/BaseDialog.vue      |  2 +-
 src/src/components/dialogs/StyleInfoDialog.vue |  8 ++++----
 src/src/views/Home.vue                         |  4 ++--
 7 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/src/components/AppHeader.vue b/src/src/components/AppHeader.vue
index 4bf5e1e..e1a2af9 100644
--- a/src/src/components/AppHeader.vue
+++ b/src/src/components/AppHeader.vue
@@ -1,8 +1,14 @@
 <template>
   <header :class="{ active: menuIsActive }">
     <div class="container">
-      <button class="link logo" @click="scrollToTop">StyleBase</button>
-      <button class="link burger-menu" @click="menuIsActive = !menuIsActive">
+      <button class="link logo" type="button" @click="scrollToTop">StyleBase</button>
+      <button
+        class="link burger-menu"
+        type="button"
+        :aria-label="menuIsActive ? 'Close the menu' : 'Open the menu'"
+        :aria-expanded="menuIsActive ? 'true' : 'false'"
+        @click="menuIsActive = !menuIsActive"
+      >
         <span></span>
         <span></span>
       </button>
diff --git a/src/src/components/CloseButton.vue b/src/src/components/CloseButton.vue
index 37bb4ef..3175beb 100644
--- a/src/src/components/CloseButton.vue
+++ b/src/src/components/CloseButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="close-button" type="button" @click="$emit('click')">
+  <button class="close-button" type="button" v-bind="$attrs" @click="$emit('click')">
     <span class="cross-first-line" />
     <span class="cross-second-line" />
   </button>
diff --git a/src/src/components/StyleCard.vue b/src/src/components/StyleCard.vue
index 7fa9588..97a9010 100644
--- a/src/src/components/StyleCard.vue
+++ b/src/src/components/StyleCard.vue
@@ -9,6 +9,7 @@
       <img v-else class="no-image" src="@/images/no-image.png" alt="No preview" />
       <a
         class="button style-button-filled"
+        type="button"
         :href="styleData.usercss"
         rel="noopener"
         target="_blank"
diff --git a/src/src/components/dialogs/AddStyleDialog.vue b/src/src/components/dialogs/AddStyleDialog.vue
index c9adcda..3bb79ac 100644
--- a/src/src/components/dialogs/AddStyleDialog.vue
+++ b/src/src/components/dialogs/AddStyleDialog.vue
@@ -4,7 +4,7 @@
       <div class="dialog-title">Add new style</div>
       <div class="dialog-input">
         <input v-model.trim="url" type="text" placeholder="Link to GitHub repository" />
-        <close-button v-show="url" @click="url = ''" />
+        <close-button v-show="url" aria-label="Clear the input" @click="url = ''" />
       </div>
       <div class="dialog-buttons">
         <button class="style-button" type="button" @click="$emit('close')">Not now</button>
@@ -16,7 +16,7 @@
           @verify="submitStyle"
           @expired="onCaptchaExpired"
         >
-          <button class="style-button-filled" :disabled="isSubmitting" type="submit">Add</button>
+          <button class="style-button-filled" type="submit" :disabled="isSubmitting">Add</button>
         </vue-recaptcha>
       </div>
     </template>
diff --git a/src/src/components/dialogs/BaseDialog.vue b/src/src/components/dialogs/BaseDialog.vue
index 4706ba9..10747c7 100644
--- a/src/src/components/dialogs/BaseDialog.vue
+++ b/src/src/components/dialogs/BaseDialog.vue
@@ -10,7 +10,7 @@
         @clickOutside="onClickOutside"
         @keydown.esc="onClose"
       >
-        <close-button v-if="!closeButtonHidden" @click="onClose" />
+        <close-button v-if="!closeButtonHidden" aria-label="Close the modal" @click="onClose" />
 
         <div>
           <slot></slot>
diff --git a/src/src/components/dialogs/StyleInfoDialog.vue b/src/src/components/dialogs/StyleInfoDialog.vue
index e7c48f6..38394b2 100644
--- a/src/src/components/dialogs/StyleInfoDialog.vue
+++ b/src/src/components/dialogs/StyleInfoDialog.vue
@@ -21,11 +21,11 @@
 
       <ul v-if="styleData.topics.length" class="topics">
         <li v-for="topic in styleData.topics" :key="topic">
-          <button @click="$emit('search-topic', topic)">{{ topic }}</button>
+          <button type="button" @click="$emit('search-topic', topic)">{{ topic }}</button>
         </li>
       </ul>
 
-      <div v-if="authorizedUser" class="edit">
+      <form v-if="authorizedUser" class="edit">
         <input
           :value="styleData.customName"
           type="text"
@@ -38,8 +38,8 @@
           placeholder="Preview url"
           @change="(e) => (customPreview = e.target.value)"
         />
-        <button class="style-button" @click="editStyle">Edit</button>
-      </div>
+        <button class="style-button" type="submit" @click="editStyle">Edit</button>
+      </form>
 
       <div class="image">
         <img
diff --git a/src/src/views/Home.vue b/src/src/views/Home.vue
index 8c6633d..05311ad 100644
--- a/src/src/views/Home.vue
+++ b/src/src/views/Home.vue
@@ -24,7 +24,7 @@
           type="text"
           placeholder="Search by style name or owner..."
         />
-        <close-button v-show="searchQuery" @click="resetFilters" />
+        <close-button v-show="searchQuery" aria-label="Clear the search input" @click="resetFilters" />
       </section>
       <section class="main-container">
         <div class="section-header">
@@ -32,7 +32,7 @@
             Styles
             <span v-if="ownerFilter">
               by {{ ownerFilter }}
-              <close-button @click="resetFilters" />
+              <close-button aria-label="Clear the owner filter" @click="resetFilters" />
             </span>
           </div>
           <hr />