fix: improve accessibility by adding aria-labelledby attributes to card input labels

This commit is contained in:
2026-05-26 13:17:47 +02:00
parent f0a638be2e
commit dd5ecec3f6
3 changed files with 5 additions and 5 deletions
+1 -1
View File
@@ -22,7 +22,7 @@
{% csrf_token %} {% csrf_token %}
<div class="mb-4"> <div class="mb-4">
<label class="form-label">Puntuación</label> <label for="rating-input" class="form-label">Puntuación</label>
<div class="star-rating d-flex gap-1" id="star-rating"> <div class="star-rating d-flex gap-1" id="star-rating">
{% for i in "12345" %} {% for i in "12345" %}
<span class="star fs-2 {% if form.initial.rating|default:0 >= i|add:0 %}text-warning text-dark{% else %}text-secondary{% endif %}" data-value="{{ i }}" style="cursor: pointer; font-size: 2rem;"></span> <span class="star fs-2 {% if form.initial.rating|default:0 >= i|add:0 %}text-warning text-dark{% else %}text-secondary{% endif %}" data-value="{{ i }}" style="cursor: pointer; font-size: 2rem;"></span>
+2 -2
View File
@@ -44,8 +44,8 @@
</p> </p>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Datos de la tarjeta</label> <label id="label-card-data" class="form-label">Datos de la tarjeta</label>
<div id="card-element"></div> <div id="card-element" aria-labelledby="label-card-data"></div>
<div id="card-errors" role="alert"></div> <div id="card-errors" role="alert"></div>
</div> </div>
+2 -2
View File
@@ -164,8 +164,8 @@
<div id="new-card-section" {% if saved_cards %}style="display:none;"{% endif %}> <div id="new-card-section" {% if saved_cards %}style="display:none;"{% endif %}>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Número de tarjeta</label> <label id="label-card-number" class="form-label">Número de tarjeta</label>
<div id="card-element"></div> <div id="card-element" aria-labelledby="label-card-number"></div>
<div id="card-errors" role="alert"></div> <div id="card-errors" role="alert"></div>
</div> </div>
<div class="form-check mb-3"> <div class="form-check mb-3">