perf(vssue): improve accessibility (close #96)

meteorlxy · May 25, 2020 · 270b110 · 270b110
1 parent f4d752f
commit 270b110
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 36 deletions.
diff --git a/packages/vssue/src/components/VssueComment.vue b/packages/vssue/src/components/VssueComment.vue
@@ -8,7 +8,12 @@
   >
     <!-- avatar -->
     <div class="vssue-comment-avatar">
-      <a :href="author.homepage" :title="author.username" target="_blank">
+      <a
+        :href="author.homepage"
+        :title="author.username"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         <img :src="author.avatar" :alt="author.username" />
       </a>
     </div>
@@ -19,7 +24,12 @@
         <div class="vssue-comment-header">
           <!-- author - username - link to profile page -->
           <span class="vssue-comment-author">
-            <a :href="author.homepage" :title="author.username" target="_blank">
+            <a
+              :href="author.homepage"
+              :title="author.username"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {{ author.username }}
             </a>
           </span>

diff --git a/packages/vssue/src/components/VssueHeader.vue b/packages/vssue/src/components/VssueHeader.vue
@@ -5,6 +5,7 @@
       class="vssue-header-comments-count"
       :href="vssue.issue ? vssue.issue.link : null"
       target="_blank"
+      rel="noopener noreferrer"
     >
       <span>
         {{
@@ -24,10 +25,11 @@
       <span v-if="vssue.API">
         <a
           :href="vssue.API.platform.link"
-          target="_blank"
           :title="
             `${vssue.API.platform.name} API ${vssue.API.platform.version}`
           "
+          target="_blank"
+          rel="noopener noreferrer"
         >
           {{ vssue.API.platform.name }}
         </a>
@@ -37,8 +39,9 @@
 
       <a
         href="https://github.com/meteorlxy/vssue"
-        target="_blank"
         :title="`Vssue v${vssue.version}`"
+        target="_blank"
+        rel="noopener noreferrer"
       >
         Vssue
       </a>

diff --git a/packages/vssue/src/components/VssueNewComment.vue b/packages/vssue/src/components/VssueNewComment.vue
@@ -6,8 +6,9 @@
         :href="user.homepage"
         :title="user.username"
         target="_blank"
+        rel="noopener noreferrer"
       >
-        <img :src="user.avatar" />
+        <img :src="user.avatar" :alt="user.username" />
       </a>
 
       <VssueIcon
@@ -28,6 +29,7 @@
         :disabled="isInputDisabled"
         :placeholder="vssue.$t(user ? 'placeholder' : 'noLoginPlaceHolder')"
         :spellcheck="false"
+        aria-label="leave a comment"
         @keyup.enter.ctrl="submit()"
       />
     </div>

diff --git a/packages/vssue/src/components/VssuePagination.vue b/packages/vssue/src/components/VssuePagination.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="vssue-pagination">
     <div class="vssue-pagination-per-page">
-      <select
-        v-model="perPage"
-        class="vssue-pagination-select"
-        :disabled="disabled"
-      >
-        <option v-for="val in perPageOptions" :key="val" :value="val">
-          {{ val }}
-        </option>
-      </select>
-
-      <span>
-        {{ vssue.$t('perPage') }}
-      </span>
+      <label>
+        <select
+          v-model="perPage"
+          class="vssue-pagination-select"
+          :disabled="disabled"
+        >
+          <option v-for="val in perPageOptions" :key="val" :value="val">
+            {{ val }}
+          </option>
+        </select>
+
+        <span>
+          {{ vssue.$t('perPage') }}
+        </span>
+      </label>
 
       <span
         v-if="vssue.API.platform.meta.sortable"
@@ -39,24 +41,26 @@
         v-text="`<`"
       />
 
-      <span>
-        {{ vssue.$t('page') }}
-      </span>
-
-      <select
-        v-show="pageCount > 1"
-        v-model="page"
-        class="vssue-pagination-select"
-        :disabled="disabled"
-      >
-        <option v-for="val in pageCount" :key="val" :value="val">
-          {{ val }}
-        </option>
-      </select>
-
-      <span v-show="pageCount < 2" v-text="page" />
-
-      <span v-text="` / ${pageCount} `" />
+      <label>
+        <span>
+          {{ vssue.$t('page') }}
+        </span>
+
+        <select
+          v-show="pageCount > 1"
+          v-model="page"
+          class="vssue-pagination-select"
+          :disabled="disabled"
+        >
+          <option v-for="val in pageCount" :key="val" :value="val">
+            {{ val }}
+          </option>
+        </select>
+
+        <span v-show="pageCount < 2" v-text="page" />
+
+        <span v-text="` / ${pageCount} `" />
+      </label>
 
       <span
         :class="{