Refactored a bit. Changed a tags to buttons that look like hyperlinks, to preserve normal button functionality.

src/lib/components/Login.svelte

@@ -50,7 +50,7 @@
     <Popover
       class='popover-leather w-fit'
       placement='bottom'
-      target='avatar'
+      triggeredBy='#avatar'
     >
       <div class='w-full flex space-x-2'>
         <Button

src/lib/components/util/CardActions.svelte

@@ -114,32 +114,32 @@
       <div class='flex flex-col text-nowrap'>
         <ul class="space-y-2">
           <li>
-            <a href="" role="button" class='btn-leather' onclick={viewDetails}>
+            <button type="button" class='btn-leather' onclick={viewDetails}>
               <EyeOutline class="inline mr-2"  /> View details
-            </a>
+            </button>
           </li>
           <li>
-            <a role="button" class='btn-leather' onclick={shareNjump}>
+            <button type="button" class='btn-leather' onclick={shareNjump}>
               {#if shareLinkCopied}
                 <ClipboardCheckOutline class="inline mr-2" /> Copied!
               {:else}
                 <ShareNodesOutline class="inline mr-2" /> Share via NJump
               {/if}
-            </a>
+            </button>
           </li>
           <li>
-            <a role="button" class='btn-leather' onclick={copyEventId}>
+            <button type="button" class='btn-leather' onclick={copyEventId}>
               {#if eventIdCopied}
                 <ClipboardCheckOutline class="inline mr-2" /> Copied!
               {:else}
                 <ClipboardCleanOutline class="inline mr-2" /> Copy event ID
               {/if}
-            </a>
+            </button>
           </li>
           <li>
-            <a href="" role="button" class='btn-leather' onclick={viewJson}>
+            <button type="button" class='btn-leather' onclick={viewJson}>
               <CodeOutline class="inline mr-2"  /> View JSON
-            </a>
+            </button>
           </li>
         </ul>
       </div>
@@ -157,7 +157,7 @@
     <div class="flex flex-row space-x-4">
       {#if image}
       <div class="flex col">
-        <img class="max-w-48" src={image} />
+        <img class="max-w-48" src={image} alt="Publication cover image for {title}" />
       </div>
       {/if}
       <div class="flex flex-col col space-y-5  justify-center  align-middle">

src/lib/components/util/CopyToClipboard.svelte

@@ -18,10 +18,10 @@
   }
 </script>
 
-<a role="button" class='btn-leather text-nowrap' onclick={copyToClipboard}>
+<button type="button" class='btn-leather text-nowrap' onclick={copyToClipboard}>
   {#if copied}
     <ClipboardCheckOutline class="!fill-none dark:!fill-none inline mr-1" /> Copied!
   {:else}
     <ClipboardCleanOutline class="!fill-none dark:!fill-none inline mr-1" /> {displayText}
   {/if}
-</a>
+</button>

src/lib/components/util/Profile.svelte

@@ -46,10 +46,12 @@ function shortenNpub(long: string|undefined) {
       class='h-6 w-6 cursor-pointer'
       src={pfp}
       alt={username}
+      id="profile-avatar"
     />
     {#key username || tag}
       <Popover
-        target="avatar"
+        placement="bottom"
+        triggeredBy="#profile-avatar"
         class='popover-leather w-[180px]'
         trigger='hover'
       >
@@ -70,15 +72,13 @@ function shortenNpub(long: string|undefined) {
               </li>
               {#if isNav}
                 <li>
-                  <a
+                  <button
-                    href=""
                     id='sign-out-button'
                     class='btn-leather text-nowrap mt-3 flex self-stretch align-middle hover:text-primary-400 dark:hover:text-primary-500'
                     onclick={handleSignOutClick}
-                    role="button"
                   >
                     <ArrowRightToBracketOutline class='mr-1 !h-6 !w-6 inline !fill-none dark:!fill-none' /> Sign out
-                  </a>
+                  </button>
                 </li>
               {:else}
                 <!-- li>