From 5d8f42b537559d6057c06e4c20595be96c1a3672 Mon Sep 17 00:00:00 2001
From: Draconizations <jake.fulminated@gmail.com>
Date: Mon, 30 May 2022 10:02:12 +0200
Subject: [PATCH] feat(dashboard): autofocus on expanded avatar image

---
 dashboard/src/lib/CardsHeader.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index c683442c..646547b1 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { tick } from 'svelte';
     import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
     import default_avatar from '../assets/default_avatar.png';
     import { toHTML } from 'discord-markdown';
@@ -29,6 +30,11 @@
     else if (item.tag) altText = "system avatar";
     
     export let loading: boolean = false;
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
 </script>
 
     <CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100">
@@ -50,7 +56,7 @@
         </div>
         <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
             <div slot="external" on:click={toggleAvatarModal} style="height: 100%;  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
-                <Image style="display: block; margin: auto;" src={icon_url} thumbnail alt={altText}/>
+                <img class="d-block m-auto img-thumbnail" src={icon_url} alt={altText} tabindex={0} use:focus/>
             </div>
         </Modal>
     </CardTitle>
\ No newline at end of file