From 379bb7c55d29d073205dd80525b519f66b9d5288 Mon Sep 17 00:00:00 2001
From: Draconizations <jake.fulminated@gmail.com>
Date: Fri, 20 May 2022 07:21:50 +0200
Subject: [PATCH] feat(dashboard): improve alt text for icons

---
 dashboard/src/lib/CardsHeader.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index dd10cc5e..daa7f848 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -2,7 +2,8 @@
     import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
     import default_avatar from '../assets/default_avatar.png';
     import { toHTML } from 'discord-markdown';
-    import twemoji from 'twemoji';  
+    import twemoji from 'twemoji';
+    import type { Group, Member, System } from '../api/types'; 
 
     export let item: any;
 
@@ -21,6 +22,11 @@
 
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
+
+    let altText = "icon";
+    if (item.icon) altText = "group icon";
+    else if (item.proxy_tags) altText = "member avatar";
+    else if (item.tag) altText = "system avatar";
     
     export let loading: boolean = false;
 </script>
@@ -37,9 +43,9 @@
         <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
         {/if}
         {#if item && (item.avatar_url || item.icon)}
-        <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt="Icon" />
+        <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt={altText} />
         {:else}
-        <img class="rounded-circle avatar" src={default_avatar} alt="avatar (default)" />
+        <img class="rounded-circle avatar" src={default_avatar} alt="icon (default)" />
         {/if}
         </div>
         <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>