[A11y] move lightbox to native dialog (#5137)

* [A11y] move lightbox to native dialog

* fix width-sizing-issue

* move button label to aria-label

* increase padding for lightbox, so button does not overlay image

* Remove unused JS

* add close on backdrop-click

---------

Co-authored-by: Raphael Michel <michel@rami.io>
This commit is contained in:
Richard Schreiber
2025-05-23 10:19:03 +02:00
committed by GitHub
parent 6e306055cb
commit 37af6edeab
4 changed files with 57 additions and 2 deletions

View File

@@ -18,7 +18,6 @@
<script type="text/javascript" src="{% static "pretixpresale/js/ui/cookieconsent.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
<script type="text/javascript" src="{% static "lightbox/js/lightbox.js" %}"></script>
<script type="text/javascript" src="{% static "pretixpresale/js/ui/iframe.js" %}"></script>
<script type="text/javascript" src="{% static "pretixbase/js/addressform.js" %}"></script>
{% endcompress %}

View File

@@ -46,6 +46,19 @@
</div>
</div>
</div>
<dialog id="lightbox-dialog" role="alertdialog" aria-labelledby="lightbox-label">
<form method="dialog" class="modal-card">
<div class="modal-card-content">
<figure class="text-center text-muted">
<img />
<figcaption id="lightbox-label"></figcaption>
</figure>
<button id="lightbox-close" class="btn btn-default btn-xs" aria-label="{% trans "Close" %}">{% icon "close" %}</button>
</div>
</form>
</dialog>
{% if request.organizer and request.organizer.settings.cookie_consent %}
<script type="text/plain" id="cookie-consent-storage-key">cookie-consent-{{ request.organizer.slug }}</script>
{% if cookie_consent_from_widget %}