liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): improve alt text for icons

Browse Source
This commit is contained in:
Draconizations 2022-05-20 07:21:50 +02:00
parent 7fa42676ef
commit 379bb7c55d
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard/src/lib/CardsHeader.svelte
View File

@ -3,6 +3,7 @@
import default_avatar from '../assets/default_avatar.png'; import default_avatar from '../assets/default_avatar.png';
import { toHTML } from 'discord-markdown'; 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; export let item: any;
@ -22,6 +23,11 @@
let avatarOpen = false; let avatarOpen = false;
const toggleAvatarModal = () => (avatarOpen = !avatarOpen); 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; export let loading: boolean = false;
</script> </script>
@ -37,9 +43,9 @@
<div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div> <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
{/if} {/if}
{#if item && (item.avatar_url || item.icon)} {#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} {:else}
<img class="rounded-circle avatar" src={default_avatar} alt="avatar (default)" /> <img class="rounded-circle avatar" src={default_avatar} alt="icon (default)" />
{/if} {/if}
</div> </div>
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}> <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>