Improve environments compat description and fix accessibility issues project-wide

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>

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

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 -->

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>

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>