fix(buttons): add types and aria-labels

VChet · Oct 17, 2020 · c83fea0 · c83fea0
1 parent c392d51
commit c83fea0
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -24,15 +24,15 @@
           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">
           <div class="title">
             Styles
             <span v-if="ownerFilter">
               by {{ ownerFilter }}
-              <close-button @click="resetFilters" />
+              <close-button aria-label="Clear the owner filter" @click="resetFilters" />
             </span>
           </div>
           <hr />