[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..." %}" data-asynctask-headline="{% trans "We're applying this voucher to your cart..." %}"
method="post" data-asynctask class="apply-voucher"> method="post" data-asynctask class="apply-voucher">
{% csrf_token %} {% csrf_token %}
<label for="voucher_code" class="sr-only">{% trans "Voucher code" %}</label>
<div class="input-group"> <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"> <span class="input-group-btn">
<button class="btn btn-primary" type="submit" aria-label="{% trans "Redeem voucher" %}"> <button class="btn btn-primary" type="submit">
<span class="fa fa-check" aria-hidden="true"></span> <span class="fa fa-check" aria-hidden="true"></span><span class="sr-only"> {% trans "Redeem voucher" %}</span>
</button> </button>
</span> </span>
</div> </div>

View File

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

View File

@@ -298,10 +298,11 @@
<form method="get" action="{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}"> <form method="get" action="{% eventurl event "presale:event.redeem" cart_namespace=cart_namespace %}">
<div class="row-voucher"> <div class="row-voucher">
<div class="col-md-8 col-sm-6 col-xs-12"> <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"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-ticket fa-fw" aria-hidden="true"></i></span> <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" <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>
</div> </div>
<input type="hidden" name="subevent" value="{{ subevent.id|default_if_none:"" }}" /> <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").click(function (e) {
$(".apply-voucher-toggle").hide(); $(".apply-voucher-toggle").hide();
$(".apply-voucher").show(); $(".apply-voucher").show();
$(".apply-voucher input[ŧype=text]").first().focus(); $(".apply-voucher input[type=text]").first().focus();
e.preventDefault(); e.preventDefault();
return true; return true;
}); });