Mostly accessibility stuff (#344)

components/ui/Checkbox.vue

@@ -1,9 +1,22 @@
 <template>
-  <div class="checkbox-outer" :class="{ disabled }" @click="toggle">
-    <button class="checkbox" :disabled="disabled" :class="{ checked: value }">
-      <CheckIcon v-if="value" />
+  <div
+    class="checkbox-outer"
+    :class="{ disabled }"
+    role="presentation"
+    @click="toggle"
+  >
+    <button
+      class="checkbox"
+      role="checkbox"
+      :disabled="disabled"
+      :class="{ checked: value }"
+      :aria-label="description"
+      :aria-checked="value"
+    >
+      <CheckIcon v-if="value" aria-hidden="true" />
     </button>
-    <p v-if="label">{{ label }}</p>
+    <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
+    <p v-if="label" aria-hidden="true">{{ label }}</p>
     <slot v-else />
   </div>
 </template>
@@ -25,6 +38,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    description: {
+      type: String,
+      default: '',
+    },
     value: Boolean,
     clickEvent: {
       type: Function,

components/ui/ProjectCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="project-card card">
+  <article class="project-card card" :aria-label="name" role="listitem">
     <div class="columns">
       <div class="icon">
         <nuxt-link :to="`/${type}/${id}`">
@@ -26,7 +26,7 @@
               v-if="clientSide === 'optional' && serverSide === 'optional'"
               class="side-descriptor"
             >
-              <InfoIcon />
+              <InfoIcon aria-hidden="true" />
               Universal {{ type }}
             </div>
             <div
@@ -36,7 +36,7 @@
               "
               class="side-descriptor"
             >
-              <InfoIcon />
+              <InfoIcon aria-hidden="true" />
               Client {{ type }}
             </div>
             <div
@@ -46,7 +46,7 @@
               "
               class="side-descriptor"
             >
-              <InfoIcon />
+              <InfoIcon aria-hidden="true" />
               Server {{ type }}
             </div>
           </div>
@@ -56,18 +56,18 @@
           <Categories :categories="categories" class="right-categories" />
           <div class="dates">
             <div class="date">
-              <CalendarIcon />
+              <CalendarIcon aria-hidden="true" />
               Created {{ $dayjs(createdAt).fromNow() }}
             </div>
             <div class="date">
-              <EditIcon />
+              <EditIcon aria-hidden="true" />
               Updated {{ $dayjs(updatedAt).fromNow() }}
             </div>
           </div>
         </div>
         <div class="right-side">
           <div v-if="downloads" class="stat">
-            <DownloadIcon />
+            <DownloadIcon aria-hidden="true" />
             <p>
               <strong>{{ formatNumber(downloads) }}</strong> download<span
                 v-if="downloads !== '1'"
@@ -76,7 +76,7 @@
             </p>
           </div>
           <div v-if="follows" class="stat">
-            <HeartIcon />
+            <HeartIcon aria-hidden="true" />
             <p>
               <strong>{{ formatNumber(follows) }}</strong> follower<span
                 v-if="follows !== '1'"

components/ui/search/SearchFilter.vue

@@ -2,12 +2,13 @@
   <Checkbox
     class="filter"
     :value="activeFilters.includes(facetName)"
+    :description="displayName"
     @input="toggle()"
   >
     <div class="filter-text">
-      <div v-if="icon" class="icon" v-html="icon"></div>
+      <div v-if="icon" aria-hidden="true" class="icon" v-html="icon"></div>
       <div v-else class="icon"><slot /></div>
-      <span> {{ displayName }}</span>
+      <span aria-hidden="true"> {{ displayName }}</span>
     </div>
   </Checkbox>
 </template>