Add alt tags to image blocks

website/common/templates/common/blocks/image-caption.html

@@ -1,8 +1,8 @@
-{% load wagtailimages_tags wagtailcore_tags %}
+{% load wagtailimages_tags wagtailcore_tags util_tags %}
 
 <figure>
   <div class="image is-16by9">
-    <img src="{% image_url value.image 'width-1500' %}" alt="" />
+    <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" />
   </div>
   <figcaption>
     {{ value.caption|richtext }}

website/common/templatetags/util_tags.py

@@ -1,5 +1,9 @@
 from django.template import Library
+from django.utils.encoding import force_str
 from wagtail.models import Page
+from wagtail.rich_text import RichText
+
+from website.common import utils
 
 register = Library()
 
@@ -12,3 +16,8 @@ def do_range(stop: int) -> range:
 @register.simple_tag(takes_context=True)
 def pagefullurl(context: dict, page: Page) -> str:
     return page.get_full_url(context["request"])
+
+
+@register.filter()
+def extract_text(html: str | RichText) -> str:
+    return utils.extract_text(force_str(html))

website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html

@@ -1,8 +1,8 @@
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags util_tags %}
 
 <figure>
   <div class="image">
-    <img src="https://mermaid.ink/img/{{ value.pako }}" referrerpolicy="no-referrer"/>
+    <img src="https://mermaid.ink/img/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" />
   </div>
   <figcaption>
     {{ value.caption|richtext }}