From 9deddbbe7c21ae300d3be6165ec51cd996ceaecc Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 20 Aug 2024 23:32:36 -0700
Subject: [PATCH] Improve environments compat description and fix accessibility
 issues project-wide

---
 apps/app-frontend/src/pages/instance/Logs.vue |  6 +-
 .../components/ui/CollectionCreateModal.vue   |  4 +-
 .../src/components/ui/ModalCreation.vue       |  4 +-
 .../src/components/ui/ModerationChecklist.vue | 22 ++---
 .../components/ui/OrganizationCreateModal.vue |  4 +-
 .../src/components/ui/VersionSummary.vue      |  5 +-
 .../ui/thread/ConversationThread.vue          | 34 +++----
 apps/frontend/src/layouts/default.vue         | 89 +++++++++++-------
 apps/frontend/src/locales/en-US/index.json    |  2 +-
 apps/frontend/src/pages/[type]/[id].vue       | 47 +++++-----
 .../src/pages/[type]/[id]/gallery.vue         | 22 +++--
 apps/frontend/src/pages/[type]/[id]/index.vue | 93 ++++++++-----------
 .../src/pages/[type]/[id]/settings/index.vue  |  9 +-
 .../pages/[type]/[id]/version/[version].vue   | 26 +++---
 .../src/pages/[type]/[id]/versions.vue        | 25 ++---
 apps/frontend/src/pages/app.vue               |  2 +-
 apps/frontend/src/pages/collection/[id].vue   | 27 +++---
 apps/frontend/src/pages/dashboard.vue         | 16 ++--
 .../src/pages/dashboard/collections.vue       | 28 +++---
 .../src/pages/dashboard/organizations.vue     |  4 +-
 apps/frontend/src/pages/index.vue             | 18 ++--
 apps/frontend/src/pages/legal.vue             | 16 ++--
 apps/frontend/src/pages/moderation.vue        |  6 +-
 apps/frontend/src/pages/plus.vue              |  2 +-
 apps/frontend/src/pages/report.vue            |  2 +-
 .../src/pages/search/[searchProjectType].vue  |  3 +-
 apps/frontend/src/pages/user/[id].vue         | 13 +--
 packages/assets/icons/monitor-smartphone.svg  |  1 +
 packages/assets/index.ts                      |  2 +
 packages/ui/src/components/base/Badge.vue     | 38 ++++----
 packages/ui/src/components/modal/NewModal.vue |  4 +-
 .../ui/src/components/modal/ShareModal.vue    | 43 ++++++---
 32 files changed, 336 insertions(+), 281 deletions(-)
 create mode 100644 packages/assets/icons/monitor-smartphone.svg

diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/Logs.vue
index f36ce81f1..a89d94962 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -16,14 +16,14 @@
           {{ copied ? 'Copied' : 'Copy' }}
         </Button>
         <Button color="primary" :disabled="offline || !logs[selectedLogIndex]" @click="share">
-          <ShareIcon />
+          <ShareIcon aria-hidden="true" />
           Share
         </Button>
         <Button
           v-if="logs[selectedLogIndex] && logs[selectedLogIndex].live === true"
           @click="clearLiveLog()"
         >
-          <TrashIcon />
+          <TrashIcon aria-hidden="true" />
           Clear
         </Button>
 
@@ -33,7 +33,7 @@
           color="danger"
           @click="deleteLog()"
         >
-          <TrashIcon />
+          <TrashIcon aria-hidden="true" />
           Delete
         </Button>
       </div>
diff --git a/apps/frontend/src/components/ui/CollectionCreateModal.vue b/apps/frontend/src/components/ui/CollectionCreateModal.vue
index 4d1b5915f..e74934fe5 100644
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/CollectionCreateModal.vue
@@ -37,13 +37,13 @@
       <div class="flex gap-2">
         <ButtonStyled color="brand">
           <button @click="create">
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             Create collection
           </button>
         </ButtonStyled>
         <ButtonStyled>
           <button @click="modal.hide()">
-            <XIcon />
+            <XIcon aria-hidden="true" />
             Cancel
           </button>
         </ButtonStyled>
diff --git a/apps/frontend/src/components/ui/ModalCreation.vue b/apps/frontend/src/components/ui/ModalCreation.vue
index d1484af12..1de76a95e 100644
--- a/apps/frontend/src/components/ui/ModalCreation.vue
+++ b/apps/frontend/src/components/ui/ModalCreation.vue
@@ -68,13 +68,13 @@
       <div class="flex gap-2">
         <ButtonStyled color="brand">
           <button @click="createProject">
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             Create project
           </button>
         </ButtonStyled>
         <ButtonStyled>
           <button @click="cancel">
-            <XIcon />
+            <XIcon aria-hidden="true" />
             Cancel
           </button>
         </ButtonStyled>
diff --git a/apps/frontend/src/components/ui/ModerationChecklist.vue b/apps/frontend/src/components/ui/ModerationChecklist.vue
index 997ea571f..7e844fcd9 100644
--- a/apps/frontend/src/components/ui/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/ModerationChecklist.vue
@@ -28,7 +28,7 @@
         <p>All permission checks complete!</p>
         <div class="input-group modpack-buttons">
           <button class="btn" @click="modPackIndex -= 1">
-            <LeftArrowIcon />
+            <LeftArrowIcon aria-hidden="true" />
             Previous
           </button>
         </div>
@@ -142,7 +142,7 @@
         </div>
         <div class="input-group modpack-buttons">
           <button class="btn" :disabled="modPackIndex <= 0" @click="modPackIndex -= 1">
-            <LeftArrowIcon />
+            <LeftArrowIcon aria-hidden="true" />
             Previous
           </button>
           <button
@@ -150,7 +150,7 @@
             :disabled="!modPackData[modPackIndex].status"
             @click="modPackIndex += 1"
           >
-            <RightArrowIcon />
+            <RightArrowIcon aria-hidden="true" />
             Next project
           </button>
         </div>
@@ -273,20 +273,20 @@
       </div>
     </div>
     <div class="input-group modpack-buttons">
-      <button v-if="!done" class="btn skip-btn" @click="goToNextProject">
-        <ExitIcon />
+      <button v-if="!done" class="btn skip-btn" aria-label="Skip" @click="goToNextProject">
+        <ExitIcon aria-hidden="true" />
         <template v-if="futureProjects.length > 0">Skip</template>
         <template v-else>Exit</template>
       </button>
       <button v-if="currentStepIndex > 0" class="btn" @click="previousPage() && !done">
-        <LeftArrowIcon /> Previous
+        <LeftArrowIcon aria-hidden="true" /> Previous
       </button>
       <button
         v-if="currentStepIndex < steps.length - 1 && !done"
         class="btn btn-primary"
         @click="nextPage()"
       >
-        <RightArrowIcon /> Next
+        <RightArrowIcon aria-hidden="true" /> Next
       </button>
       <button
         v-else-if="!generatedMessage"
@@ -294,15 +294,15 @@
         :disabled="loadingMessage"
         @click="generateMessage"
       >
-        <UpdatedIcon /> Generate message
+        <UpdatedIcon aria-hidden="true" /> Generate message
       </button>
       <template v-if="generatedMessage && !done">
         <button class="btn btn-green" @click="sendMessage(project.requested_status ?? 'approved')">
-          <CheckIcon /> Approve
+          <CheckIcon aria-hidden="true" /> Approve
         </button>
         <div class="joined-buttons">
           <button class="btn btn-danger" @click="sendMessage('rejected')">
-            <CrossIcon /> Reject
+            <CrossIcon aria-hidden="true" /> Reject
           </button>
           <OverflowMenu
             class="btn btn-danger btn-dropdown-animation icon-only"
@@ -316,7 +316,7 @@
             ]"
           >
             <DropdownIcon style="rotate: 180deg" />
-            <template #withhold> <EyeOffIcon /> Withhold </template>
+            <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
           </OverflowMenu>
         </div>
       </template>
diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
index 3b4c64320..958c3fcd3 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
@@ -56,13 +56,13 @@
       <div class="flex gap-2">
         <ButtonStyled color="brand">
           <button @click="createOrganization">
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             Create organization
           </button>
         </ButtonStyled>
         <ButtonStyled>
           <button @click="modal.hide()">
-            <XIcon />
+            <XIcon aria-hidden="true" />
             Cancel
           </button>
         </ButtonStyled>
diff --git a/apps/frontend/src/components/ui/VersionSummary.vue b/apps/frontend/src/components/ui/VersionSummary.vue
index 364b67565..4572475ba 100644
--- a/apps/frontend/src/components/ui/VersionSummary.vue
+++ b/apps/frontend/src/components/ui/VersionSummary.vue
@@ -13,16 +13,17 @@
     </div>
     <ButtonStyled color="brand">
       <a :href="downloadUrl" class="min-w-0" @click="emit('onDownload')">
-        <DownloadIcon /> Download
+        <DownloadIcon aria-hidden="true" /> Download
       </a>
     </ButtonStyled>
     <ButtonStyled circular>
       <nuxt-link
         :to="`/project/${props.version.project_id}/version/${props.version.id}`"
         class="min-w-0"
+        aria-label="Open project page"
         @click="emit('onNavigate')"
       >
-        <ExternalIcon />
+        <ExternalIcon aria-hidden="true" />
       </nuxt-link>
     </ButtonStyled>
   </div>
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index b018558bb..450b9ac67 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -28,7 +28,7 @@
             :disabled="!submissionConfirmation"
             @click="resubmit()"
           >
-            <ModerationIcon /> Resubmit for review
+            <ModerationIcon aria-hidden="true" /> Resubmit for review
           </button>
         </div>
       </div>
@@ -52,7 +52,7 @@
     <template v-if="report && report.closed">
       <p>This thread is closed and new messages cannot be sent to it.</p>
       <button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
-        <CloseIcon /> Reopen thread
+        <CloseIcon aria-hidden="true" /> Reopen thread
       </button>
     </template>
     <template v-else-if="!report || !report.closed">
@@ -70,10 +70,10 @@
           :disabled="!replyBody"
           @click="sendReply()"
         >
-          <ReplyIcon /> Reply
+          <ReplyIcon aria-hidden="true" /> Reply
         </button>
         <button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
-          <SendIcon /> Send
+          <SendIcon aria-hidden="true" /> Send
         </button>
         <button
           v-if="isStaff(auth.user)"
@@ -81,7 +81,7 @@
           :disabled="!replyBody"
           @click="sendReply(null, true)"
         >
-          <ModerationIcon /> Add private note
+          <ModerationIcon aria-hidden="true" /> Add private note
         </button>
         <template v-if="currentMember && !isStaff(auth.user)">
           <template v-if="isRejected(project)">
@@ -90,14 +90,14 @@
               class="iconified-button moderation-button"
               @click="openResubmitModal(true)"
             >
-              <ModerationIcon /> Resubmit for review with reply
+              <ModerationIcon aria-hidden="true" /> Resubmit for review with reply
             </button>
             <button
               v-else
               class="iconified-button moderation-button"
               @click="openResubmitModal(false)"
             >
-              <ModerationIcon /> Resubmit for review
+              <ModerationIcon aria-hidden="true" /> Resubmit for review
             </button>
           </template>
         </template>
@@ -110,10 +110,10 @@
                 class="iconified-button danger-button"
                 @click="closeReport(true)"
               >
-                <CloseIcon /> Close with reply
+                <CloseIcon aria-hidden="true" /> Close with reply
               </button>
               <button v-else class="iconified-button danger-button" @click="closeReport()">
-                <CloseIcon /> Close thread
+                <CloseIcon aria-hidden="true" /> Close thread
               </button>
             </template>
           </template>
@@ -125,7 +125,7 @@
                 :disabled="isApproved(project)"
                 @click="sendReply(requestedStatus)"
               >
-                <CheckIcon /> Approve with reply
+                <CheckIcon aria-hidden="true" /> Approve with reply
               </button>
               <button
                 v-else
@@ -133,7 +133,7 @@
                 :disabled="isApproved(project)"
                 @click="setStatus(requestedStatus)"
               >
-                <CheckIcon /> Approve
+                <CheckIcon aria-hidden="true" /> Approve
               </button>
               <div class="joined-buttons">
                 <button
@@ -142,7 +142,7 @@
                   :disabled="project.status === 'rejected'"
                   @click="sendReply('rejected')"
                 >
-                  <CrossIcon /> Reject with reply
+                  <CrossIcon aria-hidden="true" /> Reject with reply
                 </button>
                 <button
                   v-else
@@ -150,7 +150,7 @@
                   :disabled="project.status === 'rejected'"
                   @click="setStatus('rejected')"
                 >
-                  <CrossIcon /> Reject
+                  <CrossIcon aria-hidden="true" /> Reject
                 </button>
                 <OverflowMenu
                   class="btn btn-danger btn-dropdown-animation icon-only"
@@ -180,9 +180,11 @@
                         ]
                   "
                 >
-                  <DropdownIcon style="rotate: 180deg" />
-                  <template #withhold-reply> <EyeOffIcon /> Withhold with reply </template>
-                  <template #withhold> <EyeOffIcon /> Withhold </template>
+                  <DropdownIcon style="rotate: 180deg" aria-hidden="true" />
+                  <template #withhold-reply>
+                    <EyeOffIcon aria-hidden="true" /> Withhold with reply
+                  </template>
+                  <template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
                 </OverflowMenu>
               </div>
             </template>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 64db2b94c..0bdc4b03f 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -13,7 +13,7 @@
       <template v-else>
         <span>{{ formatMessage(addEmailBannerMessages.title) }}</span>
         <nuxt-link class="btn" to="/settings/account">
-          <SettingsIcon />
+          <SettingsIcon aria-hidden="true" />
           {{ formatMessage(addEmailBannerMessages.action) }}
         </nuxt-link>
       </template>
@@ -29,7 +29,7 @@
     >
       <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
       <nuxt-link class="btn" to="/settings/billing">
-        <SettingsIcon />
+        <SettingsIcon aria-hidden="true" />
         {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
       </nuxt-link>
     </div>
@@ -41,14 +41,16 @@
       class="site-banner site-banner--warning"
     >
       <div class="site-banner__title">
-        <IssuesIcon />
+        <IssuesIcon aria-hidden="true" />
         <span>{{ formatMessage(stagingBannerMessages.title) }}</span>
       </div>
       <div class="site-banner__description">
         {{ formatMessage(stagingBannerMessages.description) }}
       </div>
       <div class="site-banner__actions">
-        <Button transparent icon-only :action="hideStagingBanner"><XIcon /></Button>
+        <Button transparent icon-only :action="hideStagingBanner" aria-label="Close banner"
+          ><XIcon aria-hidden="true"
+        /></Button>
       </div>
     </div>
     <header
@@ -92,13 +94,16 @@
               },
             ]"
           >
-            <CompassIcon /> Browse <DropdownIcon class="h-5 w-5 text-secondary" />
-            <template #mods> <BoxIcon /> Mods </template>
-            <template #resourcepacks> <PaintBrushIcon /> Resource Packs </template>
-            <template #datapacks> <BracesIcon /> Data Packs </template>
-            <template #plugins> <ServerIcon /> Plugins </template>
-            <template #shaders> <GlassesIcon /> Shaders </template>
-            <template #modpacks> <PackageOpenIcon /> Modpacks </template>
+            <CompassIcon aria-hidden="true" /> Browse
+            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+            <template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
+            <template #resourcepacks>
+              <PaintBrushIcon aria-hidden="true" /> Resource Packs
+            </template>
+            <template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
+            <template #plugins> <ServerIcon aria-hidden="true" /> Plugins </template>
+            <template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
+            <template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
           </OverflowMenu>
         </ButtonStyled>
         <div class="contents lg:hidden">
@@ -123,26 +128,33 @@
                 },
               ]"
             >
-              <HamburgerIcon /> More <DropdownIcon class="h-5 w-5 text-secondary" />
-              <template #servers> <ServerIcon /> Host a server </template>
-              <template #app> <DownloadIcon /> Get Modrinth App </template>
-              <template #plus> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </template>
+              <HamburgerIcon aria-hidden="true" /> More
+              <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+              <template #servers> <ServerIcon aria-hidden="true" /> Host a server </template>
+              <template #app> <DownloadIcon aria-hidden="true" /> Get Modrinth App </template>
+              <template #plus>
+                <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+              </template>
             </OverflowMenu>
           </ButtonStyled>
         </div>
         <div class="hidden lg:contents">
           <ButtonStyled v-if="false" type="transparent">
-            <a href="https://bisecthosting.com/modrinth"> <ServerIcon /> Host a server </a>
+            <a href="https://bisecthosting.com/modrinth">
+              <ServerIcon aria-hidden="true" /> Host a server
+            </a>
           </ButtonStyled>
           <ButtonStyled type="transparent">
-            <NuxtLink to="/app"> <DownloadIcon /> Get Modrinth App </NuxtLink>
+            <NuxtLink to="/app"> <DownloadIcon aria-hidden="true" /> Get Modrinth App </NuxtLink>
           </ButtonStyled>
           <ButtonStyled
             v-if="!auth.user || isPermission(auth.badges, 1 << 0)"
             type="transparent"
             color="purple"
           >
-            <NuxtLink to="/plus"> <ArrowBigUpDashIcon /> Upgrade to Modrinth+ </NuxtLink>
+            <NuxtLink to="/plus">
+              <ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+            </NuxtLink>
           </ButtonStyled>
         </div>
       </div>
@@ -153,6 +165,7 @@
             class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
             position="bottom"
             direction="left"
+            aria-label="Create new..."
             :options="[
               {
                 id: 'new-project',
@@ -169,11 +182,16 @@
               },
             ]"
           >
-            <PlusIcon /> <DropdownIcon class="h-5 w-5 text-secondary" />
-            <template #new-project> <BoxIcon /> New project </template>
+            <PlusIcon aria-hidden="true" />
+            <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+            <template #new-project> <BoxIcon aria-hidden="true" /> New project </template>
             <!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
-            <template #new-collection> <CollectionIcon /> New collection </template>
-            <template #new-organization> <OrganizationIcon /> New organization </template>
+            <template #new-collection>
+              <CollectionIcon aria-hidden="true" /> New collection
+            </template>
+            <template #new-organization>
+              <OrganizationIcon aria-hidden="true" /> New organization
+            </template>
           </OverflowMenu>
         </ButtonStyled>
         <OverflowMenu
@@ -246,7 +264,7 @@
             </div>
           </NuxtLink>
           <nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
-            <LogInIcon /> {{ formatMessage(commonMessages.signInButton) }}
+            <LogInIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signInButton) }}
           </nuxt-link>
         </div>
         <div class="links">
@@ -290,20 +308,26 @@
         </div>
       </div>
       <div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
-        <NuxtLink to="/" class="tab button-animation" :title="formatMessage(navMenuMessages.home)">
-          <HomeIcon />
+        <NuxtLink
+          to="/"
+          class="tab button-animation"
+          :title="formatMessage(navMenuMessages.home)"
+          aria-label="Home"
+        >
+          <HomeIcon aria-hidden="true" />
         </NuxtLink>
         <button
           class="tab button-animation"
           :class="{ 'router-link-exact-active': isBrowseMenuOpen }"
           :title="formatMessage(navMenuMessages.search)"
+          aria-label="Search"
           @click="toggleBrowseMenu()"
         >
           <template v-if="auth.user">
-            <SearchIcon />
+            <SearchIcon aria-hidden="true" />
           </template>
           <template v-else>
-            <SearchIcon class="smaller" />
+            <SearchIcon aria-hidden="true" class="smaller" />
             {{ formatMessage(navMenuMessages.search) }}
           </template>
         </button>
@@ -311,6 +335,7 @@
           <NuxtLink
             to="/dashboard/notifications"
             class="tab button-animation"
+            aria-label="Notifications"
             :class="{
               'no-active': isMobileMenuOpen || isBrowseMenuOpen,
             }"
@@ -322,24 +347,26 @@
               }
             "
           >
-            <NotificationIcon />
+            <NotificationIcon aria-hidden="true" />
           </NuxtLink>
           <NuxtLink
             to="/dashboard"
             class="tab button-animation"
+            aria-label="Dashboard"
             :title="formatMessage(commonMessages.dashboardLabel)"
           >
-            <ChartIcon />
+            <ChartIcon aria-hidden="true" />
           </NuxtLink>
         </template>
         <button
           class="tab button-animation"
           :title="formatMessage(messages.toggleMenu)"
+          :aria-label="isMobileMenuOpen ? 'Close menu' : 'Open menu'"
           @click="toggleMobileMenu()"
         >
           <template v-if="!auth.user">
-            <HamburgerIcon v-if="!isMobileMenuOpen" />
-            <CrossIcon v-else />
+            <HamburgerIcon v-if="!isMobileMenuOpen" aria-hidden="true" />
+            <CrossIcon v-else aria-hidden="true" />
           </template>
           <template v-else>
             <Avatar
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index b45789df7..e0042de44 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -543,7 +543,7 @@
     "message": "Shader"
   },
   "project.about.compatibility.environments": {
-    "message": "Environments"
+    "message": "Supported environments"
   },
   "project.about.compatibility.game.minecraftJava": {
     "message": "Minecraft: Java Edition"
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 39ebef7d4..0c7e36926 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -38,7 +38,7 @@
             :link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
             label="General"
           >
-            <SettingsIcon />
+            <SettingsIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${
@@ -46,7 +46,7 @@
             }/settings/tags`"
             label="Tags"
           >
-            <TagsIcon />
+            <TagsIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${
@@ -54,7 +54,7 @@
             }/settings/description`"
             label="Description"
           >
-            <DescriptionIcon />
+            <DescriptionIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${
@@ -62,7 +62,7 @@
             }/settings/license`"
             label="License"
           >
-            <CopyrightIcon />
+            <CopyrightIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${
@@ -70,7 +70,7 @@
             }/settings/links`"
             label="Links"
           >
-            <LinksIcon />
+            <LinksIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${
@@ -78,7 +78,7 @@
             }/settings/members`"
             label="Members"
           >
-            <UsersIcon />
+            <UsersIcon aria-hidden="true" />
           </NavStackItem>
           <h3>View</h3>
           <NavStackItem
@@ -88,7 +88,7 @@
             label="Analytics"
             chevron
           >
-            <ChartIcon />
+            <ChartIcon aria-hidden="true" />
           </NavStackItem>
           <h3>Upload</h3>
           <NavStackItem
@@ -96,14 +96,14 @@
             label="Gallery"
             chevron
           >
-            <GalleryIcon />
+            <GalleryIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             :link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
             label="Versions"
             chevron
           >
-            <VersionIcon />
+            <VersionIcon aria-hidden="true" />
           </NavStackItem>
         </NavStack>
       </aside>
@@ -184,9 +184,9 @@
                   :href="`modrinth://mod/${project.slug}`"
                   @click="() => installWithApp()"
                 >
-                  <ModrinthIcon />
+                  <ModrinthIcon aria-hidden="true" />
                   Install with Modrinth App
-                  <ExternalIcon />
+                  <ExternalIcon aria-hidden="true" />
                 </a>
               </ButtonStyled>
               <Accordion ref="getModrinthAppAccordion">
@@ -208,7 +208,7 @@
           <div class="mx-auto flex w-fit flex-col gap-2">
             <ButtonStyled v-if="project.game_versions.length === 1">
               <div class="disabled button-like">
-                <GameIcon />
+                <GameIcon aria-hidden="true" />
                 {{
                   currentGameVersion
                     ? `Game version: ${currentGameVersion}`
@@ -234,14 +234,14 @@
               "
             >
               <template #title>
-                <GameIcon />
+                <GameIcon aria-hidden="true" />
                 {{
                   currentGameVersion ? `Game version: ${currentGameVersion}` : "Select game version"
                 }}
               </template>
               <div class="iconified-input mb-2 flex w-full">
                 <label for="game-versions-filtering" hidden>Search game versions...</label>
-                <SearchIcon />
+                <SearchIcon aria-hidden="true" />
                 <input
                   id="game-versions-filtering"
                   ref="gameVersionFilterInput"
@@ -300,7 +300,7 @@
               v-if="project.loaders.length === 1 && project.project_type !== 'resourcepack'"
             >
               <div class="disabled button-like">
-                <WrenchIcon />
+                <WrenchIcon aria-hidden="true" />
                 {{
                   currentPlatform
                     ? `Platform: ${formatCategory(currentPlatform)}`
@@ -327,7 +327,7 @@
               "
             >
               <template #title>
-                <WrenchIcon />
+                <WrenchIcon aria-hidden="true" />
                 {{
                   currentPlatform
                     ? `Platform: ${formatCategory(currentPlatform)}`
@@ -536,7 +536,7 @@
                       class="btn collection-button"
                       @click="(event) => $refs.modal_collection.show(event)"
                     >
-                      <PlusIcon />
+                      <PlusIcon aria-hidden="true" />
                       Create new collection
                     </button>
                   </template>
@@ -549,7 +549,7 @@
                 <nuxt-link
                   :to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
                 >
-                  <SettingsIcon />
+                  <SettingsIcon aria-hidden="true" />
                 </nuxt-link>
               </ButtonStyled>
               <ButtonStyled size="large" circular type="transparent">
@@ -591,22 +591,23 @@
                     },
                     { id: 'copy-id', action: () => copyId() },
                   ]"
+                  aria-label="More options"
                 >
-                  <MoreVerticalIcon />
+                  <MoreVerticalIcon aria-hidden="true" />
                   <template #analytics>
-                    <ChartIcon />
+                    <ChartIcon aria-hidden="true" />
                     Analytics
                   </template>
                   <template #moderation-checklist>
-                    <ScaleIcon />
+                    <ScaleIcon aria-hidden="true" />
                     Review project
                   </template>
                   <template #report>
-                    <ReportIcon />
+                    <ReportIcon aria-hidden="true" />
                     Report
                   </template>
                   <template #copy-id>
-                    <ClipboardCopyIcon />
+                    <ClipboardCopyIcon aria-hidden="true" />
                     Copy ID
                   </template>
                 </OverflowMenu>
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index fa3d87e2c..f180af038 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -8,7 +8,7 @@
       <div class="modal-gallery universal-labels">
         <div class="gallery-file-input">
           <div class="file-header">
-            <ImageIcon />
+            <ImageIcon aria-hidden="true" />
             <strong>{{ editFile ? editFile.name : "Current image" }}</strong>
             <FileInput
               v-if="editIndex === -1"
@@ -17,6 +17,7 @@
               :accept="acceptFileTypes"
               :max-size="524288000"
               should-always-reset
+              aria-label="Replace image"
               @change="
                 (x) => {
                   editFile = x[0];
@@ -24,7 +25,7 @@
                 }
               "
             >
-              <TransferIcon />
+              <TransferIcon aria-hidden="true" />
             </FileInput>
           </div>
           <img
@@ -95,7 +96,7 @@
         </button>
         <div class="button-group">
           <button class="iconified-button" @click="$refs.modal_edit_item.hide()">
-            <XIcon />
+            <XIcon aria-hidden="true" />
             Cancel
           </button>
           <button
@@ -104,7 +105,7 @@
             :disabled="shouldPreventActions"
             @click="createGalleryItem"
           >
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             Add gallery image
           </button>
           <button
@@ -113,7 +114,7 @@
             :disabled="shouldPreventActions"
             @click="editGalleryItem"
           >
-            <SaveIcon />
+            <SaveIcon aria-hidden="true" />
             Save changes
           </button>
         </div>
@@ -199,14 +200,15 @@
         :max-size="524288000"
         :accept="acceptFileTypes"
         prompt="Upload an image"
+        aria-label="Upload an image"
         class="iconified-button brand-button"
         :disabled="!isPermission(currentMember?.permissions, 1 << 2)"
         @change="handleFiles"
       >
-        <UploadIcon />
+        <UploadIcon aria-hidden="true" />
       </FileInput>
       <span class="indicator">
-        <InfoIcon /> Click to choose an image or drag one onto this page
+        <InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
       </span>
       <DropArea
         :accept="acceptFileTypes"
@@ -234,7 +236,7 @@
         </div>
         <div class="gallery-bottom">
           <div class="gallery-created">
-            <CalendarIcon />
+            <CalendarIcon aria-hidden="true" aria-label="Date created" />
             {{ $dayjs(item.created).format("MMMM D, YYYY") }}
           </div>
           <div v-if="currentMember" class="gallery-buttons input-group">
@@ -252,7 +254,7 @@
                 }
               "
             >
-              <EditIcon />
+              <EditIcon aria-hidden="true" />
               Edit
             </button>
             <button
@@ -264,7 +266,7 @@
                 }
               "
             >
-              <TrashIcon />
+              <TrashIcon aria-hidden="true" />
               Remove
             </button>
           </div>
diff --git a/apps/frontend/src/pages/[type]/[id]/index.vue b/apps/frontend/src/pages/[type]/[id]/index.vue
index a01568972..aa5007ac1 100644
--- a/apps/frontend/src/pages/[type]/[id]/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/index.vue
@@ -36,7 +36,7 @@
           </div>
         </div>
       </section>
-      <section>
+      <section v-if="project.project_type !== 'resourcepack'">
         <h3>{{ formatMessage(compatibilityMessages.platforms) }}</h3>
         <div class="tag-list">
           <div
@@ -50,67 +50,50 @@
           </div>
         </div>
       </section>
-      <section>
+      <section
+        v-if="
+          (project.actualProjectType === 'mod' || project.project_type === 'modpack') &&
+          !(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
+          !(project.client_side === 'unknown' && project.server_side === 'unknown')
+        "
+      >
         <h3>{{ formatMessage(compatibilityMessages.environments) }}</h3>
         <div class="status-list">
-          <div class="status-list__item status-list__item--color-green">
-            <CheckIcon />
+          <div
+            v-if="
+              (project.client_side === 'required' && project.server_side !== 'required') ||
+              (project.client_side === 'optional' && project.server_side === 'optional')
+            "
+            class="status-list__item"
+          >
+            <ClientIcon aria-hidden="true" />
+            Client only
+          </div>
+          <div
+            v-if="
+              (project.server_side === 'required' && project.client_side !== 'unsupported') ||
+              (project.client_side === 'optional' && project.server_side === 'optional')
+            "
+            class="status-list__item"
+          >
+            <ServerIcon aria-hidden="true" />
+            Server only
+          </div>
+          <div class="status-list__item">
+            <UserIcon aria-hidden="true" />
             Singleplayer
           </div>
-          <div
-            v-if="project.client_side !== 'unsupported' && project.server_side !== 'unsupported'"
-            class="status-list__item status-list__item--color-green"
-          >
-            <CheckIcon />
-            Client and server
-          </div>
-          <div
-            v-if="project.client_side === 'required' && project.server_side === 'unsupported'"
-            class="status-list__item status-list__item--color-green"
-          >
-            <CheckIcon />
-            Client
-          </div>
-          <div
-            v-if="project.server_side === 'required' && project.client_side === 'unsupported'"
-            class="status-list__item status-list__item--color-green"
-          >
-            <CheckIcon />
-            Server
-          </div>
           <div
             v-if="
               project.client_side === 'optional' ||
-              (project.client_side === 'required' && project.server_side === 'optional')
-            "
-            class="status-list__item status-list__item--color-orange"
-          >
-            <CheckIcon />
-            Client <span class="text-sm">(Limited functionality)</span>
-          </div>
-          <div
-            v-if="
+              (project.client_side === 'required' && project.server_side === 'optional') ||
               project.server_side === 'optional' ||
               (project.server_side === 'required' && project.client_side === 'optional')
             "
-            class="status-list__item status-list__item--color-orange"
+            class="status-list__item"
           >
-            <CheckIcon />
-            Server <span class="text-sm">(Limited functionality)</span>
-          </div>
-          <div
-            v-if="project.client_side === 'unsupported'"
-            class="status-list__item status-list__item--color-red"
-          >
-            <XIcon />
-            Client
-          </div>
-          <div
-            v-if="project.server_side === 'unsupported'"
-            class="status-list__item status-list__item--color-red"
-          >
-            <XIcon />
-            Server
+            <MonitorSmartphoneIcon aria-hidden="true" />
+            Client and server <span class="text-sm">(optional)</span>
           </div>
         </div>
       </section>
@@ -321,8 +304,6 @@
 
 <script setup>
 import {
-  CheckIcon,
-  XIcon,
   CalendarIcon,
   IssuesIcon,
   WikiIcon,
@@ -340,6 +321,10 @@ import {
   VersionIcon,
   ExternalIcon,
   CodeIcon,
+  UserIcon,
+  ServerIcon,
+  ClientIcon,
+  MonitorSmartphoneIcon,
 } from "@modrinth/assets";
 
 import { NewModal, Avatar } from "@modrinth/ui";
@@ -395,7 +380,7 @@ const compatibilityMessages = defineMessages({
   },
   environments: {
     id: "project.about.compatibility.environments",
-    defaultMessage: "Environments",
+    defaultMessage: "Supported environments",
   },
 });
 const linksMessages = defineMessages({
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 1f90f3dab..6772eaece 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -33,10 +33,11 @@
             accept="image/png,image/jpeg,image/gif,image/webp"
             class="choose-image iconified-button"
             prompt="Upload icon"
+            aria-label="Upload icon"
             :disabled="!hasPermission"
             @change="showPreviewImage"
           >
-            <UploadIcon />
+            <UploadIcon aria-hidden="true" />
           </FileInput>
           <button
             v-if="!deletedIcon && (previewImage || project.icon_url)"
@@ -44,7 +45,7 @@
             :disabled="!hasPermission"
             @click="markIconForDeletion"
           >
-            <TrashIcon />
+            <TrashIcon aria-hidden="true" />
             Remove icon
           </button>
         </div>
@@ -211,7 +212,7 @@
           :disabled="!hasChanges"
           @click="saveChanges()"
         >
-          <SaveIcon />
+          <SaveIcon aria-hidden="true" />
           Save changes
         </button>
       </div>
@@ -233,7 +234,7 @@
         :disabled="!hasDeletePermission"
         @click="$refs.modal_confirm.show()"
       >
-        <TrashIcon />
+        <TrashIcon aria-hidden="true" />
         Delete project
       </button>
     </section>
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 962fa05ee..8abc8a0a8 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -39,13 +39,13 @@
         <div class="button-group">
           <ButtonStyled>
             <button @click="$refs.modal_package_mod.hide()">
-              <CrossIcon />
+              <CrossIcon aria-hidden="true" />
               Cancel
             </button>
           </ButtonStyled>
           <ButtonStyled color="brand">
             <button @click="createDataPackVersion">
-              <RightArrowIcon />
+              <RightArrowIcon aria-hidden="true" />
               Begin packaging data pack
             </button>
           </ButtonStyled>
@@ -254,7 +254,7 @@
         </div>
         <ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
           <button @click="version.dependencies.splice(index, 1)">
-            <TrashIcon />
+            <TrashIcon aria-hidden="true" />
             Remove
           </button>
         </ButtonStyled>
@@ -307,7 +307,7 @@
         <div class="input-group">
           <ButtonStyled color="brand">
             <button @click="addDependency(dependencyAddMode, newDependencyId, newDependencyType)">
-              <PlusIcon />
+              <PlusIcon aria-hidden="true" />
               Add dependency
             </button>
           </ButtonStyled>
@@ -317,7 +317,7 @@
     <div class="version-page__files universal-card">
       <h3>Files</h3>
       <div v-if="isEditing && replaceFile" class="file primary">
-        <FileIcon />
+        <FileIcon aria-hidden="true" />
         <span class="filename">
           <strong>{{ replaceFile.name }}</strong>
           <span class="file-size">({{ $formatBytes(replaceFile.size) }})</span>
@@ -325,12 +325,13 @@
         <FileInput
           class="iconified-button raised-button"
           prompt="Replace"
+          aria-label="Replace"
           :accept="acceptFileFromProjectType(project.project_type)"
           :max-size="524288000"
           should-always-reset
           @change="(x) => (replaceFile = x[0])"
         >
-          <TransferIcon />
+          <TransferIcon aria-hidden="true" />
         </FileInput>
       </div>
       <div
@@ -341,7 +342,7 @@
           primary: primaryFile.hashes.sha1 === file.hashes.sha1,
         }"
       >
-        <FileIcon />
+        <FileIcon aria-hidden="true" />
         <span class="filename">
           <strong>{{ file.filename }}</strong>
           <span class="file-size">({{ $formatBytes(file.size) }})</span>
@@ -389,7 +390,7 @@
               }
             "
           >
-            <TrashIcon />
+            <TrashIcon aria-hidden="true" />
             Remove
           </button>
         </ButtonStyled>
@@ -400,14 +401,14 @@
             :title="`Download ${file.filename}`"
             tabindex="0"
           >
-            <DownloadIcon />
+            <DownloadIcon aria-hidden="true" />
             Download
           </a>
         </ButtonStyled>
       </div>
       <template v-if="isEditing">
         <div v-for="(file, index) in newFiles" :key="index" class="file">
-          <FileIcon />
+          <FileIcon aria-hidden="true" />
           <span class="filename">
             <strong>{{ file.name }}</strong>
             <span class="file-size">({{ $formatBytes(file.size) }})</span>
@@ -435,7 +436,7 @@
                 }
               "
             >
-              <TrashIcon />
+              <TrashIcon aria-hidden="true" />
               Remove
             </button>
           </ButtonStyled>
@@ -448,6 +449,7 @@
           <span v-else>Used for files such as sources or Javadocs.</span>
           <FileInput
             prompt="Drag and drop to upload or click to select"
+            aria-label="Upload additional file"
             multiple
             long-style
             :accept="acceptFileFromProjectType(project.project_type)"
@@ -460,7 +462,7 @@
                 })
             "
           >
-            <UploadIcon />
+            <UploadIcon aria-hidden="true" />
           </FileInput>
         </div>
       </template>
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index 127d64803..1d78830c6 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -9,12 +9,13 @@
         :accept="acceptFileFromProjectType(project.project_type)"
         prompt="Upload a version"
         class="btn btn-primary"
+        aria-label="Upload a version"
         @change="handleFiles"
       >
-        <UploadIcon />
+        <UploadIcon aria-hidden="true" />
       </FileInput>
       <span class="flex items-center gap-2">
-        <InfoIcon /> Click to choose a file or drag one onto this page
+        <InfoIcon aria-hidden="true" /> Click to choose a file or drag one onto this page
       </span>
       <DropArea :accept="acceptFileFromProjectType(project.project_type)" @change="handleFiles" />
     </div>
@@ -134,9 +135,10 @@
                 v-tooltip="`Download`"
                 :href="getPrimaryFile(version).url"
                 class="z-[1] group-hover:!bg-brand group-hover:!text-brand-inverted"
+                aria-label="Download"
                 @click="emits('onDownload')"
               >
-                <DownloadIcon />
+                <DownloadIcon aria-hidden="true" />
               </a>
             </ButtonStyled>
             <ButtonStyled circular type="transparent">
@@ -196,34 +198,35 @@
                     shown: currentMember && false,
                   },
                 ]"
+                aria-label="More options"
               >
-                <MoreVerticalIcon />
+                <MoreVerticalIcon aria-hidden="true" />
                 <template #download>
-                  <DownloadIcon />
+                  <DownloadIcon aria-hidden="true" />
                   Download
                 </template>
                 <template #new-tab>
-                  <ExternalIcon />
+                  <ExternalIcon aria-hidden="true" />
                   Open in new tab
                 </template>
                 <template #copy-link>
-                  <LinkIcon />
+                  <LinkIcon aria-hidden="true" />
                   Copy link
                 </template>
                 <template #share>
-                  <ShareIcon />
+                  <ShareIcon aria-hidden="true" />
                   Share
                 </template>
                 <template #report>
-                  <ReportIcon />
+                  <ReportIcon aria-hidden="true" />
                   Report
                 </template>
                 <template #edit>
-                  <EditIcon />
+                  <EditIcon aria-hidden="true" />
                   Edit
                 </template>
                 <template #delete>
-                  <TrashIcon />
+                  <TrashIcon aria-hidden="true" />
                   Delete
                 </template>
               </OverflowMenu>
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index efd185e3a..4e2b3c89c 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -210,7 +210,7 @@ useSeoMeta({
           <div class="search-bar">
             <h4>Installed mods</h4>
             <div class="mini-input">
-              <SearchIcon />
+              <SearchIcon aria-hidden="true" />
               <div class="search">Search mods</div>
             </div>
           </div>
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 5fae917b0..0246c0526 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -15,17 +15,17 @@
           <div class="card__overlay input-group">
             <template v-if="canEdit && isEditing === false">
               <Button @click="isEditing = true">
-                <EditIcon />
+                <EditIcon aria-hidden="true" />
                 {{ formatMessage(commonMessages.editButton) }}
               </Button>
               <Button id="delete-collection" @click="() => $refs.deleteModal.show()">
-                <TrashIcon />
+                <TrashIcon aria-hidden="true" />
                 {{ formatMessage(commonMessages.deleteLabel) }}
               </Button>
             </template>
             <template v-else-if="canEdit && isEditing === true">
               <PopoutMenu class="btn">
-                <EditIcon /> {{ formatMessage(messages.editIconButton) }}
+                <EditIcon aria-hidden="true" /> {{ formatMessage(messages.editIconButton) }}
                 <template #menu>
                   <span class="icon-edit-menu">
                     <FileInput
@@ -35,10 +35,11 @@
                       accept="image/png,image/jpeg,image/gif,image/webp"
                       class="btn btn-transparent upload"
                       style="white-space: nowrap"
-                      prompt=""
+                      prompt="Upload icon"
+                      aria-label="Upload icon"
                       @change="showPreviewImage"
                     >
-                      <UploadIcon />
+                      <UploadIcon aria-hidden="true" />
                       {{ formatMessage(messages.uploadIconButton) }}
                     </FileInput>
                     <Button
@@ -52,7 +53,7 @@
                         }
                       "
                     >
-                      <TrashIcon />
+                      <TrashIcon aria-hidden="true" />
                       {{ formatMessage(messages.deleteIconButton) }}
                     </Button>
                   </span>
@@ -103,11 +104,11 @@
             </div>
             <div class="push-right input-group">
               <Button @click="isEditing = false">
-                <XIcon />
+                <XIcon aria-hidden="true" />
                 {{ formatMessage(commonMessages.cancelButton) }}
               </Button>
               <Button color="primary" @click="saveChanges()">
-                <SaveIcon />
+                <SaveIcon aria-hidden="true" />
                 {{ formatMessage(commonMessages.saveButton) }}
               </Button>
             </div>
@@ -122,7 +123,7 @@
 
               <div>
                 <span class="collection-label">
-                  <BoxIcon /> {{ formatMessage(messages.collectionLabel) }}
+                  <BoxIcon aria-hidden="true" /> {{ formatMessage(messages.collectionLabel) }}
                 </span>
               </div>
 
@@ -187,7 +188,7 @@
                   "
                   class="date"
                 >
-                  <CalendarIcon />
+                  <CalendarIcon aria-hidden="true" />
                   <label>
                     {{
                       formatMessage(messages.createdAtLabel, {
@@ -208,7 +209,7 @@
                   "
                   class="date"
                 >
-                  <UpdatedIcon />
+                  <UpdatedIcon aria-hidden="true" />
                   <label>
                     {{
                       formatMessage(messages.updatedAtLabel, {
@@ -331,7 +332,7 @@
                 }
               "
             >
-              <TrashIcon />
+              <TrashIcon aria-hidden="true" />
               {{ formatMessage(messages.removeProjectButton) }}
             </button>
             <button
@@ -339,7 +340,7 @@
               class="iconified-button"
               @click="unfollowProject(project)"
             >
-              <TrashIcon />
+              <TrashIcon aria-hidden="true" />
               {{ formatMessage(messages.unfollowProjectButton) }}
             </button>
           </ProjectCard>
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 8a6d37a0e..4900ce60d 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -5,33 +5,33 @@
         <h1>Dashboard</h1>
         <NavStack>
           <NavStackItem link="/dashboard" label="Overview">
-            <DashboardIcon />
+            <DashboardIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/dashboard/notifications" label="Notifications">
-            <NotificationsIcon />
+            <NotificationsIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/dashboard/reports" label="Active reports">
-            <ReportIcon />
+            <ReportIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/dashboard/analytics" label="Analytics">
-            <ChartIcon />
+            <ChartIcon aria-hidden="true" />
           </NavStackItem>
 
           <h3>Manage</h3>
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
-            <ListIcon />
+            <ListIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
-            <OrganizationIcon />
+            <OrganizationIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem
             link="/dashboard/collections"
             :label="formatMessage(commonMessages.collectionsLabel)"
           >
-            <LibraryIcon />
+            <LibraryIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/dashboard/revenue" label="Revenue">
-            <CurrencyIcon />
+            <CurrencyIcon aria-hidden="true" />
           </NavStackItem>
         </NavStack>
       </aside>
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index d3e34d67e..ea7019944 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -5,14 +5,19 @@
     <div class="search-row">
       <div class="iconified-input">
         <label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
-        <SearchIcon />
+        <SearchIcon aria-hidden="true" />
         <input id="search-input" v-model="filterQuery" type="text" />
-        <Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
-          <XIcon />
+        <Button
+          v-if="filterQuery"
+          class="r-btn"
+          aria-label="Clear search"
+          @click="() => (filterQuery = '')"
+        >
+          <XIcon aria-hidden="true" />
         </Button>
       </div>
       <Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
-        <PlusIcon /> {{ formatMessage(messages.createNewButton) }}
+        <PlusIcon aria-hidden="true" /> {{ formatMessage(messages.createNewButton) }}
       </Button>
     </div>
     <div class="collections-grid">
@@ -29,7 +34,7 @@
           </span>
           <div class="stat-bar">
             <div class="stats">
-              <BoxIcon />
+              <BoxIcon aria-hidden="true" />
               {{
                 formatMessage(messages.projectsCountLabel, {
                   count: formatCompactNumber(user ? user.follows.length : 0),
@@ -37,7 +42,8 @@
               }}
             </div>
             <div class="stats">
-              <LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
+              <LockIcon aria-hidden="true" />
+              <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
             </div>
           </div>
         </div>
@@ -56,7 +62,7 @@
           </span>
           <div class="stat-bar">
             <div class="stats">
-              <BoxIcon />
+              <BoxIcon aria-hidden="true" />
               {{
                 formatMessage(messages.projectsCountLabel, {
                   count: formatCompactNumber(collection.projects?.length || 0),
@@ -65,19 +71,19 @@
             </div>
             <div class="stats">
               <template v-if="collection.status === 'listed'">
-                <WorldIcon />
+                <WorldIcon aria-hidden="true" />
                 <span> {{ formatMessage(commonMessages.publicLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'unlisted'">
-                <LinkIcon />
+                <LinkIcon aria-hidden="true" />
                 <span> {{ formatMessage(commonMessages.unlistedLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'private'">
-                <LockIcon />
+                <LockIcon aria-hidden="true" />
                 <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'rejected'">
-                <XIcon />
+                <XIcon aria-hidden="true" />
                 <span> {{ formatMessage(commonMessages.rejectedLabel) }} </span>
               </template>
             </div>
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index 71a0705fc..168e688e0 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -6,7 +6,7 @@
         <h2 class="header__title text-2xl">Organizations</h2>
         <div class="input-group">
           <button class="iconified-button brand-button" @click="openCreateOrgModal">
-            <PlusIcon />
+            <PlusIcon aria-hidden="true" />
             Create organization
           </button>
         </div>
@@ -30,7 +30,7 @@
               </div>
               <span class="stat-bar">
                 <div class="stats">
-                  <UsersIcon />
+                  <UsersIcon aria-hidden="true" />
                   <span>
                     {{ onlyAcceptedMembers(org.members).length }} member<template
                       v-if="onlyAcceptedMembers(org.members).length !== 1"
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index adb395315..ebbcc5de3 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -23,15 +23,15 @@
       </h2>
       <div class="button-group">
         <ButtonStyled color="brand" size="large">
-          <nuxt-link to="/mods"> <CompassIcon /> Discover mods </nuxt-link>
+          <nuxt-link to="/mods"> <CompassIcon aria-hidden="true" /> Discover mods </nuxt-link>
         </ButtonStyled>
         <ButtonStyled size="large" type="outlined">
           <nuxt-link v-if="!auth.user" to="/auth/sign-up" rel="noopener nofollow">
-            <LogInIcon />
+            <LogInIcon aria-hidden="true" />
             Sign up
           </nuxt-link>
           <nuxt-link v-else to="/dashboard/projects">
-            <DashboardIcon />
+            <DashboardIcon aria-hidden="true" />
             Go to dashboard
           </nuxt-link>
         </ButtonStyled>
@@ -175,7 +175,7 @@
                       {{ notification.versions[notification.versions.length - 1] }}
                     </p>
                     <div class="date">
-                      <CalendarIcon />
+                      <CalendarIcon aria-hidden="true" />
                       <span>
                         Received
                         {{ fromNow(notification.date_modified) }}
@@ -217,19 +217,21 @@
                   href="https://prismlauncher.org/"
                   class="graphic gradient-border"
                   title="Prism Launcher"
+                  aria-label="Prism Launcher"
                 >
-                  <PrismLauncherLogo />
+                  <PrismLauncherLogo aria-hidden="true" />
                 </a>
-                <nuxt-link to="/app" class="graphic gradient-border">
-                  <ModrinthIcon />
+                <nuxt-link to="/app" class="graphic gradient-border" aria-label="Modrinth App">
+                  <ModrinthIcon aria-hidden="true" />
                 </nuxt-link>
                 <a
                   rel="noopener"
                   href="https://atlauncher.com/"
                   class="graphic gradient-border"
                   title="ATLauncher"
+                  aria-label="ATLauncher"
                 >
-                  <ATLauncherLogo />
+                  <ATLauncherLogo aria-hidden="true" />
                 </a>
               </div>
             </div>
diff --git a/apps/frontend/src/pages/legal.vue b/apps/frontend/src/pages/legal.vue
index 4f9c9352d..41dd0a298 100644
--- a/apps/frontend/src/pages/legal.vue
+++ b/apps/frontend/src/pages/legal.vue
@@ -5,32 +5,32 @@
         <h1>Legal</h1>
         <NavStack>
           <NavStackItem link="/legal/terms" label="Terms of Use">
-            <HeartHandshakeIcon />
+            <HeartHandshakeIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/legal/rules" label="Content Rules">
-            <ScaleIcon />
+            <ScaleIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/legal/copyright" label="Copyright Policy">
-            <CopyrightIcon />
+            <CopyrightIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/legal/security" label="Security Notice">
-            <ShieldIcon />
+            <ShieldIcon aria-hidden="true" />
           </NavStackItem>
 
           <h3>Privacy</h3>
           <NavStackItem link="/legal/privacy" label="Privacy Policy">
-            <LockIcon />
+            <LockIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/legal/ccpa" label="California Privacy Notice">
-            <InfoIcon />
+            <InfoIcon aria-hidden="true" />
           </NavStackItem>
 
           <h3>Rewards Program</h3>
           <NavStackItem link="/legal/cmp" label="Rewards Program Terms">
-            <CurrencyIcon />
+            <CurrencyIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/legal/cmp-info" label="Rewards Program Info">
-            <InfoIcon />
+            <InfoIcon aria-hidden="true" />
           </NavStackItem>
         </NavStack>
       </aside>
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index 27085a552..4dcd6f889 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -5,13 +5,13 @@
         <h1>Moderation</h1>
         <NavStack>
           <NavStackItem link="/moderation" label="Overview">
-            <ModrinthIcon />
+            <ModrinthIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/moderation/review" label="Review projects">
-            <ModerationIcon />
+            <ModerationIcon aria-hidden="true" />
           </NavStackItem>
           <NavStackItem link="/moderation/reports" label="Reports">
-            <ReportIcon />
+            <ReportIcon aria-hidden="true" />
           </NavStackItem>
         </NavStack>
       </aside>
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 3018f2102..084269001 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -44,7 +44,7 @@
         to="/settings/billing"
         class="btn btn-purple btn-large"
       >
-        <SettingsIcon />
+        <SettingsIcon aria-hidden="true" />
         Manage subscription
       </nuxt-link>
       <button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 43cce3b1d..1b80ecae3 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -82,7 +82,7 @@
             :disabled="submitLoading || !canSubmit"
             @click="submitReport"
           >
-            <SaveIcon />
+            <SaveIcon aria-hidden="true" />
             Submit
           </Button>
         </div>
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 0ccd4382d..39de2775d 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -40,9 +40,10 @@
             "
             v-tooltip="`Reset all filters`"
             class="btn icon-only"
+            aria-label="Reset all filters"
             @click="clearFilters"
           >
-            <FilterXIcon />
+            <FilterXIcon aria-hidden="true" />
           </button>
         </div>
         <div
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 997a134bb..c38636157 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -30,7 +30,7 @@
             <div class="flex flex-wrap gap-2">
               <ButtonStyled size="large">
                 <NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile">
-                  <EditIcon />
+                  <EditIcon aria-hidden="true" />
                   {{ formatMessage(commonMessages.editButton) }}
                 </NuxtLink>
               </ButtonStyled>
@@ -52,18 +52,19 @@
                     },
                     { id: 'copy-id', action: () => copyId() },
                   ]"
+                  aria-label="More options"
                 >
-                  <MoreVerticalIcon />
+                  <MoreVerticalIcon aria-hidden="true" />
                   <template #manage-projects>
-                    <BoxIcon />
+                    <BoxIcon aria-hidden="true" />
                     {{ formatMessage(messages.profileManageProjectsButton) }}
                   </template>
                   <template #report>
-                    <ReportIcon />
+                    <ReportIcon aria-hidden="true" />
                     {{ formatMessage(commonMessages.reportButton) }}
                   </template>
                   <template #copy-id>
-                    <ClipboardCopyIcon />
+                    <ClipboardCopyIcon aria-hidden="true" />
                     {{ formatMessage(commonMessages.copyIdButton) }}
                   </template>
                 </OverflowMenu>
@@ -141,7 +142,7 @@
               <div class="details">
                 <h2 class="title">{{ collection.name }}</h2>
                 <div class="stats">
-                  <LibraryIcon />
+                  <LibraryIcon aria-hidden="true" />
                   Collection
                 </div>
               </div>
diff --git a/packages/assets/icons/monitor-smartphone.svg b/packages/assets/icons/monitor-smartphone.svg
new file mode 100644
index 000000000..0494f32d6
--- /dev/null
+++ b/packages/assets/icons/monitor-smartphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-smartphone"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>
\ No newline at end of file
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 5d4c92b58..1eca3e5b2 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -103,6 +103,7 @@ import _LogOutIcon from './icons/log-out.svg?component'
 import _MailIcon from './icons/mail.svg?component'
 import _MessageIcon from './icons/message.svg?component'
 import _MicrophoneIcon from './icons/microphone.svg?component'
+import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
 import _MoonIcon from './icons/moon.svg?component'
 import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
 import _MoreVerticalIcon from './icons/more-vertical.svg?component'
@@ -272,6 +273,7 @@ export const LogOutIcon = _LogOutIcon
 export const MailIcon = _MailIcon
 export const MessageIcon = _MessageIcon
 export const MicrophoneIcon = _MicrophoneIcon
+export const MonitorSmartphoneIcon = _MonitorSmartphoneIcon
 export const MoonIcon = _MoonIcon
 export const MoreHorizontalIcon = _MoreHorizontalIcon
 export const MoreVerticalIcon = _MoreVerticalIcon
diff --git a/packages/ui/src/components/base/Badge.vue b/packages/ui/src/components/base/Badge.vue
index 134a41f98..18fe5e9c8 100644
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -4,69 +4,69 @@
 
     <!-- User roles -->
     <template v-else-if="type === 'admin'">
-      <ModrinthIcon /> {{ formatMessage(messages.modrinthTeamLabel) }}
+      <ModrinthIcon aria-hidden="true" /> {{ formatMessage(messages.modrinthTeamLabel) }}
     </template>
     <template v-else-if="type === 'moderator'">
-      <ScaleIcon /> {{ formatMessage(messages.moderatorLabel) }}
+      <ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.moderatorLabel) }}
     </template>
     <template v-else-if="type === 'creator'">
-      <BoxIcon /> {{ formatMessage(messages.creatorLabel) }}
+      <BoxIcon aria-hidden="true" /> {{ formatMessage(messages.creatorLabel) }}
     </template>
 
     <!-- Project statuses -->
     <template v-else-if="type === 'approved'">
-      <ListIcon /> {{ formatMessage(messages.listedLabel) }}
+      <ListIcon aria-hidden="true" /> {{ formatMessage(messages.listedLabel) }}
     </template>
     <template v-else-if="type === 'approved-general'">
-      <CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
+      <CheckIcon aria-hidden="true" /> {{ formatMessage(messages.approvedLabel) }}
     </template>
     <template v-else-if="type === 'unlisted'">
-      <EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
+      <EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.unlistedLabel) }}
     </template>
     <template v-else-if="type === 'withheld'">
-      <EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
+      <EyeOffIcon aria-hidden="true" /> {{ formatMessage(messages.withheldLabel) }}
     </template>
     <template v-else-if="type === 'private'">
-      <LockIcon /> {{ formatMessage(messages.privateLabel) }}
+      <LockIcon aria-hidden="true" /> {{ formatMessage(messages.privateLabel) }}
     </template>
     <template v-else-if="type === 'scheduled'">
-      <CalendarIcon /> {{ formatMessage(messages.scheduledLabel) }}
+      <CalendarIcon aria-hidden="true" /> {{ formatMessage(messages.scheduledLabel) }}
     </template>
     <template v-else-if="type === 'draft'">
-      <FileTextIcon /> {{ formatMessage(messages.draftLabel) }}
+      <FileTextIcon aria-hidden="true" /> {{ formatMessage(messages.draftLabel) }}
     </template>
     <template v-else-if="type === 'archived'">
-      <ArchiveIcon /> {{ formatMessage(messages.archivedLabel) }}
+      <ArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.archivedLabel) }}
     </template>
     <template v-else-if="type === 'rejected'">
-      <XIcon /> {{ formatMessage(messages.rejectedLabel) }}
+      <XIcon aria-hidden="true" /> {{ formatMessage(messages.rejectedLabel) }}
     </template>
     <template v-else-if="type === 'processing'">
-      <UpdatedIcon /> {{ formatMessage(messages.underReviewLabel) }}
+      <UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.underReviewLabel) }}
     </template>
 
     <!-- Team members -->
     <template v-else-if="type === 'accepted'">
-      <CheckIcon /> {{ formatMessage(messages.acceptedLabel) }}
+      <CheckIcon aria-hidden="true" /> {{ formatMessage(messages.acceptedLabel) }}
     </template>
     <template v-else-if="type === 'pending'">
-      <UpdatedIcon /> {{ formatMessage(messages.pendingLabel) }}
+      <UpdatedIcon aria-hidden="true" /> {{ formatMessage(messages.pendingLabel) }}
     </template>
 
     <!-- Transaction statuses (pending, processing reused) -->
     <template v-else-if="type === 'processed'">
-      <CheckIcon /> {{ formatMessage(messages.processedLabel) }}
+      <CheckIcon aria-hidden="true" /> {{ formatMessage(messages.processedLabel) }}
     </template>
     <template v-else-if="type === 'failed'">
-      <XIcon /> {{ formatMessage(messages.failedLabel) }}
+      <XIcon aria-hidden="true" /> {{ formatMessage(messages.failedLabel) }}
     </template>
     <template v-else-if="type === 'returned'">
-      <XIcon /> {{ formatMessage(messages.returnedLabel) }}
+      <XIcon aria-hidden="true" /> {{ formatMessage(messages.returnedLabel) }}
     </template>
 
     <!-- Report status -->
     <template v-else-if="type === 'closed'">
-      <XIcon /> {{ formatMessage(messages.closedLabel) }}
+      <XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
     </template>
 
     <!-- Other -->
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index ad0adb519..8507ba504 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -31,8 +31,8 @@
             </slot>
           </div>
           <ButtonStyled v-if="closable" circular>
-            <button @click="hide">
-              <XIcon />
+            <button @click="hide" aria-label="Close">
+              <XIcon aria-hidden="true" />
             </button>
           </ButtonStyled>
         </div>
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index c19e0da71..2a64fefa2 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -121,35 +121,48 @@ defineExpose({
         <div ref="qrCode">
           <QrcodeVue :value="url" class="qr-code" margin="3" />
         </div>
-        <Button v-tooltip="'Copy QR code'" icon-only class="copy-button" @click="copyImage">
-          <ClipboardCopyIcon />
+        <Button
+          v-tooltip="'Copy QR code'"
+          icon-only
+          class="copy-button"
+          aria-label="Copy QR code"
+          @click="copyImage"
+        >
+          <ClipboardCopyIcon aria-hidden="true" />
         </Button>
       </div>
       <div v-else class="resizable-textarea-wrapper">
         <textarea v-model="content" />
-        <Button v-tooltip="'Copy Text'" icon-only class="copy-button transparent" @click="copyText">
-          <ClipboardCopyIcon />
+        <Button
+          v-tooltip="'Copy Text'"
+          icon-only
+          aria-label="Copy Text"
+          class="copy-button transparent"
+          @click="copyText"
+        >
+          <ClipboardCopyIcon aria-hidden="true" />
         </Button>
       </div>
       <div class="all-buttons">
         <div v-if="link" class="iconified-input">
           <LinkIcon />
           <input type="text" :value="url" readonly />
-          <Button v-tooltip="'Copy Text'" class="r-btn" @click="copyText">
-            <ClipboardCopyIcon />
+          <Button v-tooltip="'Copy Text'" aria-label="Copy Text" class="r-btn" @click="copyText">
+            <ClipboardCopyIcon aria-hidden="true" />
           </Button>
         </div>
         <div class="button-row">
-          <Button v-if="canShare" v-tooltip="'Share'" icon-only @click="share">
-            <ShareIcon />
+          <Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
+            <ShareIcon aria-hidden="true" />
           </Button>
           <a
             v-tooltip="'Send as an email'"
             class="btn icon-only"
             :href="sendEmail"
             :target="targetParameter"
+            aria-label="Send as an email"
           >
-            <MailIcon />
+            <MailIcon aria-hidden="true" />
           </a>
           <a
             v-if="link"
@@ -157,32 +170,36 @@ defineExpose({
             class="btn icon-only"
             :target="targetParameter"
             :href="url"
+            aria-label="Open link in browser"
           >
-            <GlobeIcon />
+            <GlobeIcon aria-hidden="true" />
           </a>
           <a
             v-tooltip="'Toot about it'"
             class="btn mastodon icon-only"
             :target="targetParameter"
             :href="sendToot"
+            aria-label="Toot about it"
           >
-            <MastodonIcon />
+            <MastodonIcon aria-hidden="true" />
           </a>
           <a
             v-tooltip="'Tweet about it'"
             class="btn twitter icon-only"
             :target="targetParameter"
             :href="sendTweet"
+            aria-label="Tweet about it"
           >
-            <TwitterIcon />
+            <TwitterIcon aria-hidden="true" />
           </a>
           <a
             v-tooltip="'Share on Reddit'"
             class="btn reddit icon-only"
             :target="targetParameter"
             :href="postOnReddit"
+            aria-label="Share on Reddit"
           >
-            <RedditIcon />
+            <RedditIcon aria-hidden="true" />
           </a>
         </div>
       </div>