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/Categories.vue

@@ -1,59 +1,59 @@
 <template>
   <div class="categories">
     <p v-if="categories.includes('fabric')">
-      <FabricLoader />
+      <FabricLoader aria-hidden="true" />
       Fabric
     </p>
     <p v-if="categories.includes('forge')">
-      <ForgeLoader />
+      <ForgeLoader aria-hidden="true" />
       Forge
     </p>
     <p v-if="categories.includes('technology')">
-      <TechCategory />
+      <TechCategory aria-hidden="true" />
       Technology
     </p>
     <p v-if="categories.includes('adventure')">
-      <AdventureCategory />
+      <AdventureCategory aria-hidden="true" />
       Adventure
     </p>
     <p v-if="categories.includes('magic')">
-      <MagicCategory />
+      <MagicCategory aria-hidden="true" />
       Magic
     </p>
     <p v-if="categories.includes('utility')">
-      <UtilityCategory />
+      <UtilityCategory aria-hidden="true" />
       Utility
     </p>
     <p v-if="categories.includes('decoration')">
-      <DecorationCategory />
+      <DecorationCategory aria-hidden="true" />
       Decoration
     </p>
     <p v-if="categories.includes('library')">
-      <LibraryCategory />
+      <LibraryCategory aria-hidden="true" />
       Library
     </p>
     <p v-if="categories.includes('cursed')">
-      <CursedCategory />
+      <CursedCategory aria-hidden="true" />
       Cursed
     </p>
     <p v-if="categories.includes('worldgen')">
-      <WorldGenCategory />
+      <WorldGenCategory aria-hidden="true" />
       Worldgen
     </p>
     <p v-if="categories.includes('storage')">
-      <StorageCategory />
+      <StorageCategory aria-hidden="true" />
       Storage
     </p>
     <p v-if="categories.includes('food')">
-      <FoodCategory />
+      <FoodCategory aria-hidden="true" />
       Food
     </p>
     <p v-if="categories.includes('equipment')">
-      <EquipmentCategory />
+      <EquipmentCategory aria-hidden="true" />
       Equipment
     </p>
     <p v-if="categories.includes('misc')">
-      <MiscCategory />
+      <MiscCategory aria-hidden="true" />
       Misc
     </p>
   </div>

components/Pagination.vue

@@ -4,6 +4,7 @@
       :class="{ disabled: currentPage === 1 }"
       class="paginate has-icon"
       @click="currentPage !== 1 ? switchPage(currentPage - 1) : null"
+      aria-label="Previous Page"
     >
       <LeftArrowIcon />
     </button>
@@ -34,6 +35,7 @@
           ? switchPage(currentPage + 1)
           : null
       "
+      aria-label="Next Page"
     >
       <RightArrowIcon />
     </button>

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>