[a11y] add missing labels on voucher-input and fix input.focus when revealing voucher-input via JS (#1998)

This commit is contained in:
Richard Schreiber
2021-03-16 12:17:47 +01:00
committed by GitHub
parent 09b2e69178
commit 1357b010de
4 changed files with 10 additions and 6 deletions

View File

@@ -306,11 +306,12 @@
data-asynctask-headline="{% trans "We're applying this voucher to your cart..." %}"
method="post" data-asynctask class="apply-voucher">
{% csrf_token %}
<label for="voucher_code" class="sr-only">{% trans "Voucher code" %}</label>
<div class="input-group">
<input type="text" class="form-control" name="voucher" placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
<input type="text" class="form-control" name="voucher" id="voucher_code" placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" aria-label="{% trans "Redeem voucher" %}">
<span class="fa fa-check" aria-hidden="true"></span>
<button class="btn btn-primary" type="submit">
<span class="fa fa-check" aria-hidden="true"></span><span class="sr-only"> {% trans "Redeem voucher" %}</span>
</button>
</span>
</div>

View File

@@ -6,12 +6,14 @@
{% load eventsignal %}
{% load rich_text %}
{% for tup in items_by_category %}
<section{% if tup.0 %} aria-labelledby="category-{{ tup.0.id }}"{% else %} aria-label="{% trans "Uncategorized products" %}"{% endif %}{% if tup.0.description %} aria-describedby="category-info-{{ tup.0.id }}"{% endif %}>
<section aria-labelledby="category-{% if tup.0 %}{{ tup.0.id }}{% else %}none{% endif %}"{% if tup.0.description %} aria-describedby="category-info-{{ tup.0.id }}"{% endif %}>
{% if tup.0 %}
<h3 id="category-{{ tup.0.id }}">{{ tup.0.name }}</h3>
{% if tup.0.description %}
<div id="category-info-{{ tup.0.id }}">{{ tup.0.description|localize|rich_text }}</div>
{% endif %}
{% else %}
<h3 id="category-none" class="sr-only">{% trans "Uncategorized products" %}</h3>
{% endif %}
{% for item in tup.1 %}
{% if item.has_variations %}

View File

@@ -298,10 +298,11 @@
<form method="get" action="{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}">
<div class="row-voucher">
<div class="col-md-8 col-sm-6 col-xs-12">
<label for="voucher" class="sr-only">{% trans "Voucher code" %}</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-ticket fa-fw" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="voucher" id="voucher"
placeholder="{% trans "Voucher code" %}" aria-label="{% trans "Voucher code" %}">
placeholder="{% trans "Voucher code" %}">
</div>
</div>
<input type="hidden" name="subevent" value="{{ subevent.id|default_if_none:"" }}" />

View File

@@ -75,7 +75,7 @@ $(function () {
$(".apply-voucher-toggle").click(function (e) {
$(".apply-voucher-toggle").hide();
$(".apply-voucher").show();
$(".apply-voucher input[ŧype=text]").first().focus();
$(".apply-voucher input[type=text]").first().focus();
e.preventDefault();
return true;
});