[A11y] improve cart renew confirmation (#5206)

* [A11y] improve cart renew confirmation

* revert time

* add inline-dialog to cart-renewal-button so confirm-button has interactive meaning
This commit is contained in:
Richard Schreiber
2025-06-11 08:58:26 +02:00
committed by GitHub
parent 362ac8de6f
commit ae4073b3e4
4 changed files with 51 additions and 11 deletions

View File

@@ -1,4 +1,5 @@
{% load i18n %}
{% load icon %}
{% load eventurl %}
{% load daterange %}
{% load safelink %}
@@ -506,10 +507,23 @@
</p>
<p>
<button class="btn btn-default" type="submit" id="cart-extend-button" aria-describedby="cart-deadline">
<i class="fa fa-refresh" aria-hidden="true"></i> {% trans "Renew reservation" %}
{% icon "refresh" %} {% trans "Renew reservation" %}
</button>
</p>
</form>
<dialog role="alertdialog" id="cart-extend-confirmation-dialog" class="inline-dialog" aria-labelledby="cart-deadline">
<form method="dialog">
<p>
<button class="btn btn-success" autofocus value="OK">
<span role="img" aria-label="{% trans "OK" %}.">
{% icon "check" %}
</span>
{% trans "Reservation renewed" %}
</button>
</p>
</form>
</dialog>
{% else %}
<p class="sr-only" id="cart-description">{% trans "Overview of your ordered products." %}</p>
{% endif %}

View File

@@ -48,6 +48,10 @@
<p class="modal-card-confirm"><button class="btn btn-lg btn-primary">{% trans "Renew reservation" %}</button></p>
{% enddialog %}
{% dialog "dialog-cart-extended" "" "" icon="clock-o" alert=true %}
<p class="modal-card-confirm"><button class="btn btn-lg btn-primary">{% trans "OK" %}</button></p>
{% enddialog %}
<dialog id="lightbox-dialog" class="modal-card" role="alertdialog" aria-labelledby="lightbox-label">
<form method="dialog" class="modal-card-inner form-horizontal">
<div class="modal-card-content">