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>

layouts/default.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="layout">
-    <aside>
+    <header>
       <section class="navbar columns">
         <section class="logo column">
           <NuxtLink to="/">
-            <ModrinthLogo v-if="$colorMode.value === 'light'" />
+            <ModrinthLogo
-            <ModrinthLogoWhite v-else />
+              v-if="$colorMode.value === 'light'"
+              aria-label="modrinth"
+            />
+            <ModrinthLogoWhite v-else aria-label="modrinth" />
           </NuxtLink>
           <span class="badge yellow">Beta</span>
         </section>
@@ -81,7 +84,7 @@
           <template v-else>
             <section class="auth-prompt">
               <a :href="authUrl" class="log-in-button"
-                ><GitHubIcon />Sign In with GitHub</a
+                ><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
               >
             </section>
           </template>
@@ -144,7 +147,7 @@
           </section>
         </nav>
       </section>
-    </aside>
+    </header>
     <main>
       <notifications group="main" position="bottom right" />
       <!--<notifications
@@ -264,7 +267,7 @@ export default {
   display: block;
   height: 100vh;
 
-  aside {
+  header {
     height: var(--size-navbar-height);
     background-color: var(--color-raised-bg);
     max-width: 100vw;
@@ -464,7 +467,7 @@ export default {
 
 @media (min-width: 1024px) {
   .layout {
-    aside {
+    header {
     }
 
     main {
@@ -481,7 +484,7 @@ export default {
 
 @media (min-width: 1280px) {
   .layout {
-    aside {
+    header {
     }
   }
 }