Accessibility Changes (#53)

* Semantic HTML: Cards are now articles.

* Semantic HTML: Changed aside to header.

* Changed some references from aside to header.

* Added aria-label to left and right buttons.

* Added aria-hidden to catergory icons.

* Added aria-label to the logo.

* Added aria-hidden on more icons.

* Added aria-hidden to some icons.

components/ProjectCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="project-card">
+  <article class="project-card">
     <div class="icon">
       <img
         :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.svg'"
@@ -43,14 +43,14 @@
             </div>
           </div>
           <div class="stat">
-            <DownloadIcon />
+            <DownloadIcon aria-hidden="true" />
             <div class="info">
               <h4>Downloads</h4>
               <p class="value">{{ formatNumber(downloads) }}</p>
             </div>
           </div>
           <div class="stat">
-            <CalendarIcon />
+            <CalendarIcon aria-hidden="true" />
             <div class="info">
               <h4>Created</h4>
               <p
@@ -66,7 +66,7 @@
             </div>
           </div>
           <div class="stat">
-            <EditIcon />
+            <EditIcon aria-hidden="true" />
             <div class="info">
               <h4>Updated</h4>
               <p
@@ -82,7 +82,7 @@
             </div>
           </div>
           <div v-if="latestVersion" class="stat">
-            <TagIcon />
+            <TagIcon aria-hidden="true" />
             <div class="info">
               <h4>Available For</h4>
               <p class="value">
@@ -97,7 +97,7 @@
     <div v-if="editMode" class="buttons">
       <slot />
     </div>
-  </div>
+  </article>
 </template>
 
 <script>