From 68b1e3d6907bd7e28ed28ebe6bdf84a3d1c6a88c Mon Sep 17 00:00:00 2001
From: Jean-Marie 'Histausse' Mineau <ty-webtempl-f76b@jean-marie.mineau.eu>
Date: Thu, 16 Apr 2026 22:27:04 +0200
Subject: [PATCH] add alt text on hover for figure image

---
 lib/custom_html.typ |  1 +
 lib/figures.typ     | 30 +++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/lib/custom_html.typ b/lib/custom_html.typ
index 82b9475..6ae24c1 100644
--- a/lib/custom_html.typ
+++ b/lib/custom_html.typ
@@ -23,3 +23,4 @@
   // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
   html.elem("image-magnifier-group", attrs: (role: "radiogroup"), body)
 }
+#let image-alt-group = html.elem.with("image-alt-group")
diff --git a/lib/figures.typ b/lib/figures.typ
index 376cc87..d09d234 100644
--- a/lib/figures.typ
+++ b/lib/figures.typ
@@ -52,6 +52,31 @@
       pointer-events: none;
     }
 
+    image-alt-group {
+      position: relative;
+      display: inline-block;
+
+      .alt-text {
+        visibility: hidden;
+        opacity: 0;
+        background-color: var(--color-bg-overlay);
+        padding: 10px;
+        margin: 10px;
+        top: 0;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+
+        transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
+      }
+
+      &:hover .alt-text {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 250ms ease-in 1s, visibility 0ms ease-in 1s;
+      }
+    }
+
   }
   ```
   chtml.image-magnifier-group({
@@ -62,7 +87,10 @@
         id: "img-" + str(fs-id) + "-magnified-button", 
         class: ("img-magnified-button",)
       )
-      img
+      chtml.image-alt-group({
+        img
+        html.span(class: ("alt-text",), img.alt)
+      })
     })
     html.label({
       html.input(