From d3368fe9b6c1a4ea0364d09baad92a5a4dff6520 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 14 May 2025 11:28:05 +0200
Subject: [PATCH] fix VoiceOver not reading aria-describedby on dialog

---
 src/pretix/presale/templates/pretixpresale/base.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/base.html b/src/pretix/presale/templates/pretixpresale/base.html
index 41d662f037..514ad76460 100644
--- a/src/pretix/presale/templates/pretixpresale/base.html
+++ b/src/pretix/presale/templates/pretixpresale/base.html
@@ -48,7 +48,14 @@
 <nav id="skip-to-main" role="navigation" aria-label="{% trans "Skip link" context "skip-to-main-nav" %}" class="sr-only on-focus-visible">
   <p><a href="#content">{% trans "Skip to main content" %}</a></p>
 </nav>
-<dialog id="dialog-info" aria-labelledby="dialog-info-label" aria-describedby="dialog-info-description">
+{% comment %}
+    <dialog> needs to be available onload and role-attribute cannot be changed dynamically.
+    Therefore we need two dialogs, one normal (e.g. for status info like "loading") and one
+    alertdialog with a confirm-button.
+    Note: dialog[aria-describedby] is not read out on VoiceOver, so we add both label and 
+    description to aria-labelledby.
+{% endcomment %}
+<dialog id="dialog-info" aria-labelledby="dialog-info-label dialog-info-description">
     <div class="modal-card">
         <div class="modal-card-icon">
             {% icon "cog big-rotating-icon" %}
@@ -59,7 +66,7 @@
         </div>
     </div>
 </dialog>
-<dialog id="dialog-alert" role="alertdialog" aria-labelledby="dialog-alert-label" aria-describedby="dialog-alert-description">
+<dialog id="dialog-alert" role="alertdialog" aria-labelledby="dialog-alert-label dialog-alert-description">
     <div class="modal-card">
         <div class="modal-card-icon">
             {% icon "cog big-rotating-icon" %}